Красивая Типографика от Google

Несмотря на зарождающиеся технологии и различные новшества, запускаемые в сети, есть одна вещь, которой нам так не хватало в последнее время – визуально богатая и красивая веб-типографика. Не смотря на то, что имеется очень большой выбор шрифтов, до недавнего времени мы могли использовать только определенный набор регулярных шрифтов, так называемых веб-безопасных, загруженный в наши компьютеры и поддерживаемый большинством из них.

Веб-типографика vs печатная типографика

Квинтэссенция создания контента в традиционных средствах массовой информации (газетах, журналах, книгах) в его творческой лицензии на использование типографики.

Но теперь пропасть между печатными и Интернет СМИ уменьшается из-за поддержки многими современными браузерами (в том числе Internet Explorer, имеющим такую поддержку начиная с версии IE4.0)) использования CSS-правила @font-face.

Представляем Google Font API

Google представил каталог шрифтов Google Font Directory и интерфейс Google Font API, бесплатный веб-сервис, который позволяет владельцам веб-сайтов легко, удобно и эффективно пользоваться шрифтами, отличными от стандартного набора веб-безопасных шрифтов.

Google Font API – нововведение в нише Шрифт-как-Сервис (Font-as-Service), включающую такие сервисы, как TypeKit, Typotheque и другие.

Итак, давайте попробуем окунуться в неиспользованный потенциал Google Font API.

Что такое Google Font API?

OK, вы просматриваете в Интернете много страниц, но много ли Вы встречали сайтов или блогов, использующих нестандартные шрифты? Давайте уточним – нестандартные шрифты, все шрифты, кроме Arial, Helvetica, Verdana, Georgia и Times New Roman (т.е. кроме веб-безопасных).

Кроме дизайн-ориентированных веб-сайтов и блогов, вероятно, не так уж много.

Google Font API представляет собой веб-сервис, который поддерживает высококачественные файлы шрифтов с открытым исходным кодом, легко используемые в веб-дизайне. Коллекция шрифтов, надеемся, будет продолжать расти, чтобы обеспечить еще большие возможности для выбора типа шрифта.

Преимущества при использовании Google Font API

Если Вы решили использовать Google Font API, вот преимущества, которыми Вы можете воспользоваться:

Продолжаем пользоваться HTML текстом

В отличие от использования изображений или замены картинки фона на CSS-изображение, применение @ font-face в качестве улучшения веб-типографики более оправдано с точки зрения SEO. Кроме того, это ненавязчивое решение, что означает, что вам не нужно изменять ничего из существующего контента – просто обновите таблицы CSS стилей.

Сетевая доступность

Поскольку Вы используете HTML текст, а не картинку или CSS-фон, то люди, использующие программу экранный диктор (screen reader) не будут испытывать неудобств.

Высокая работоспособность и доступность инфраструктуры и загруженность Вашего сервера

Передавая работу @font-face для исполнения надежной инфраструктуре Googlе, Вы можете быть уверены, что обработка шрифтовых файлов будет быстрой, и Вы разгрузите работу Вашего собственного сервера.

Как использовать Google Font API

Вам не нужно быть продвинутым веб-разработчиком, чтобы использовать Google API Font. Все, что вам нужно сделать, это добавить одну ссылку таблицы стилей на Вашу веб-страницу, и Вы можете начать использовать этот шрифт в CSS.

Вот вкратце описание процесса использования Google API Font:

Шаг 1: Добавить ссылку таблицы стилей выбранного шрифта
Просмотрите каталог шрифтов и выберите понравившейся Вам. Базовый формат для добавления выбранного шрифта на веб-страницу такой:

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Font+Name">

Шаг 2: Используйте шрифт, чтобы изменить стиль HTML элементов

В приведенном примере, даете элементам название шрифта в таблице CSS:

h1 {
font-family: 'Font Name', serif;
}

Если Вы собираетесь использовать данный шрифт только один раз, можете декларировать стиль в HTML:

<p style="font-family: 'Font Name', serif" >Smashmag - Дизайн на каждый день!</p>

Шаг 3: Всегда имейте запасной план

Вы наверное уже заметили, что в примерах кода ипользуется «откатный» шрифт на случай, если сервис гугл по каким-то странным причинам будет недоступен. Для этих целей я пишу serif или sans-serif, что при обычном кодировании каскадных стилей называется наслойкой шрифтов.

Пример использования Google Font API

Скопируйте приведенный ниже блок кодов в HTML документ, сохраните и откройте в Вашем браузере. Советую протестировать HTML документ в разных браузерах, чтобы определить есть ли разница или нет. Можете экспериментировать с различными шрифтами, я использовал для этого примера шрифт Lobster.

<html>
<head>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Lobster">
<style>
  h1 {
    font-family: 'Lobster', serif;
    font-size: 48px;
  }
</style>
</head>
<body>
  <h1>Smashmag - Дизайн на каждый день!</h1>
</body>
</html>

Генерированный текст – обычный HTML текст, к которому далее можно применить по желанию другие стили (в моем примере использован только один элемент: h1).

Запрос на несколько шрифтов, используя Google Font API

Допустим Вам нужны три шрифта из каталога Google’s Font Directory. Не создавайте многочислейнные запросы. Они увеличивают количество HTTP запросов, которые делает веб-страница. А чем меньше HTTP запросов, тем лучше с точки зрения времени отклика веб-страницы.

Вместо многочисленных тэгов ссылок таблиц стилей, используйте следующий формат для hrefproperty тэга ссылки ваших таблиц стилей.

Приведенный ниже пример URL запроса загрузит все три шрифта (Vollkorn, Yanone, and Droid Sans) по одному запросу.

http://fonts.googleapis.com/css?family=Vollkorn|Yanone|Droid+Sans

Имейте ввиду

Разделяйте названия шрифтов | без пробелов между ними. Обратите внимание на + в шрифте Droid Sans. Используйте + в названиях шрифтов, где есть пробелы. В нашем случае название шрифта Droid Sans, поэтому будет записывать Droid+Sans в запросе.

Внимание: Использование слишком большого количества шрифтов в одном запросе может снизить время отклика страницы. Поэтому загружайте только те шрифты, которые Вам реально нужны. Будьте сдержаны: только потому, что сервис бесплатный, не надо сходить с ума!

Используйте двоеточие (:) после названия шрифта без пробелов между ними указывайте тип вариации (например, bolditalic) или короткий код вариации (например, bi). Если предполается использовать различные вариации для одного шрифта, указывайте их без пробелов, разделяя запятыми.

Вес шрифта Bold и Bold-Italic

В примере, приведенном ниже, мы запрашиваем bold и bold-italic вес шрифта Vollkorn и italics вариацию шрифта Inconsolata:

http://fonts.googleapis.com/css?family=Vollkorn:bold,bolditalic|Inconsolata:italic|Droid+Sans

или с использованием сокращений:

http://fonts.googleapis.com/css?family=Vollkorn:b,bi|Inconsolata:i|Droid+Sans

Google Font API делает веб-типографику более привлекательной

Индустрия веб-дизайна гудит от решения вековой проблемы – ограничение используемых в Интернете шрифтов. Используете ли вы уже @ font-face? Если вы не используете его еще, почему бы и не попробовать? Поделитесь своими мыслями и мнениями в комментариях.