• Перевод

Сейчас самое время повышать уровень дизайна своих работ с помощью веб-шрифтов

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

Свобода использования веб-шрифтов вне безопасного списка на всех ведущих ОС стала возможной, по большому счету, благодаря трем основным, почти одновременным технологическим факторам: широко распространенной поддержке правила @font-face в браузерах; появлению таких «шрифтохранилищ» как Typekit и Fontdeck ; создание нового формата шрифтов — архивированного файла шрифта WOFF.

* Мало что из этих шрифтов есть для кириллицы, поэтому эта подборка больше подойдет для «аутсорсеров». Будем надеятся, что скоро появится хоть часть этих и не только шрифтов для славянских языков на кириллице. Добавить метки

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

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

Теперь, когда положительный эффект, производимый красивыми шрифтами на сайте, стал нам очевидным, возникает резонный вопрос «так как же использовать нестандартные шрифты на сайте?» . Ключ к ответу на него лежит в понимании принципа работы компьютерных шрифтов.

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

1. Файл определенного формата . Файл шрифта, чтобы его могла использовать программа, с которой мы работаем, должен быть определенного «известного этой программе» формата. Форматов компьютерных шрифтов существует несколько, что автоматически порождает проблему совместимости. Все усилия по поиску и подбору шрифта сойдут на нет, если он не поддерживается программой, в которой просматривается текст.
2. Используется программой или ОС . Файл шрифта должен быть физически доступен системе, чтобы его можно было использовать для отображения текста. В условиях Интернета это - нетривиальная задача. Ведь сайт просматривается на множестве разных компьютеров, и мы вовсе не можем быть уверены, что на них есть необходимые шрифты.
3. Описание набора букв и знаков . Мы должны быть уверены, что шрифт содержит глифы, описывающие все символы в отображаемом тексте. Например, если мы будем пытаться отобразить русский текст с использованием шрифта, в котором отсутствуют кириллические глифы , у нас ничего не получится.
4. Применение для отображения символов . Необходимо иметь способ проинформировать программу, в которой осуществляется просмотр текста, о том, какая именно его часть должна отображаться с использованием того или иного шрифта.

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

Поиск шрифта для веб-сайта

Самая первая задача, которую нам необходимо решить, это - найти и выбрать подходящий шрифт и убедиться, что:

• он поддерживает нужный язык (в частности, русский)
• лицензия шрифта допускает его использование на веб-сайте

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

• MyFonts - крупнейшая онлайн библиотека шрифтов, предоставляет удобную систему поиска с подробной информацией о каждом шрифтовом семействе и возможностью скачать или приобрести выбранные варианты.
• Google Webfonts - библиотека свободно-распространяемых шрифтов, созданная компанией Google, все шрифты из данной коллекции могут быть свободно использованы на любых сайтах, при этом Google также предоставляет простой интерфейс для их встраивания.
• Adobe Edge Web Fonts - аналогичный сервис от Adobe, содержащий большой каталог свободно-доступных шрифтов, средства поиска и тестирования, возможность встраивания в сайт.
• free.type.org.ua - пополняемая коллекция свободно-распространяемых шрифтов с поддержкой кириллицы.

Если в названии шрифта его кириллическая сущность не указана явно (например, Museo Sans Cyrillic), то чтобы убедиться в поддержке русского языка, необходимо либо просмотреть таблицу содержащихся в нем символов, либо попробовать что-нибудь им написать. Некоторые онлайн библиотеки предоставляют такую возможность, альтернативно можно использовать сервисы для тестирования шрифтов, например:

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

Шрифт можно использовать на сайте, только в случае если лицензионное соглашение (EULA) приобретенная у дизайнера или агентства разрешает это. Многие производители шрифтов (в том числе и кириллических, например, ParaType) предоставляют такую лицензию. В качестве альтернативы покупки веб-лицензии шрифта у отдельного агентства, выступают сервисы встраиваемых шрифтов (Web Font Embedding Services). Они представляют собой по сути удаленные библиотеки шрифтов, дающие своим клиентам возможность подгружать шрифты и встраивать их в свои сайты за некоторую абонентскую плату (обзор сервисов встраивания). Наиболее популярные среди них:

Однако все эти сервисы в силу своего происхождения ориентированы в первую очередь на зарубежный (использующий латиницу) рынок и количество шрифтов, поддерживающих кириллицу, у них невелико. Цена же подписки на эти сервисы достаточно высока и может быть признана неоправданной для отдельного некоммерческого проекта. Достойной альтернативой им служит использование свободно-распространяемых шрифтов, например из уже упоминавшихся Google Webfonts или Adobe Edge Web Fonts, а также предоставляемых отдельными дизайнерами или агентствами (подробнее о проблеме лицензирования шрифтов для веб рассказывает статья A List Apart).

Форматы шрифтов для веб

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

TTF - TrueType - формат компьютерных шрифтов, разработанный фирмой Apple в конце 1980-х годов, сейчас используется компаниями Apple и Microsoft в своих операционных системах. Файлы шрифтов имеют расширение .ttf .

OTF - OpenType - формат файла шрифтов разработанный совместно Microsoft и Adobe для применения в своих операционных системах. OpenType обладает большими по сравнению с TrueType возможностями до печатной подготовки и поддерживает больший набор символов при меньшем размере файла. Кроссплатформенность OpenType достигается за счет включения в один файл и Windows и Mac OS-версий данного шрифта. Файлы шрифтов имеют расширение .ttf или .otf .

EOT - Embedded OpenType - компактный формат внедряемых в веб страницы OpenType шрифтов разработанный Microsoft. Файлы таких шрифтов обычно имеют расширение .eot . Формат Embedded OpenType проприетарный и поддерживается исключительно браузером Internet Explorer.

WOFF - Web Open Font Format - формат сжатого шрифта OpenType или TrueType, представляет собой что-то вроде контейнера, который содержит в себе оригинальные шрифты в формате OpenType или TrueType. При этом исходные шрифты сжимаются для удобства передачи и сопровождаются рядом данных, которые может добавить разработчик шрифта.

SVG - Scalable Vector Graphics - язык разметки масштабируемой векторной графики, в с помощью которого можно описать и представление шрифта.

Веб-сайты просматриваются посетителями с использованием различных браузеров, которые в свою очередь функционируют в различных операционных системах (Windows, Mac OS, Linux, Android, iOS и т.п.). Используя нестандартный шрифт, мы должны обеспечить его отображение в большинстве (в идеале во всех) случаях. Так как ни один из указанных вариантов не является полностью кросс-платформенным, их придется использовать несколько, чтобы решить эту задачу. Обычно рекомендуется иметь следующую комбинацию форматов для установки на сайт: TTF, WOFF, EOT, SVG. Имея шрифт TTF или OTF можно конвертировать его, используя, например, генератор Fontsquirrel - сервис позволяет загрузить шрифт и конвертировать его в необходимые форматы. Кроме этого, он генерирует код CSS, который можно использовать для последующей установки шрифтов на сайт.

При использовании библиотеки Google или Adobe Edge - можно не беспокоится о форматах. Предоставляемый компаниями программный сервис определяет поддержку шрифта в большинстве случаев.

Встраивание шрифтов в сайт

Сама возможность встраивать шрифты для использования на сайте (подобно тому как мы встраиваем изображения или видео) обеспечивается языком стилей CSS , который отвечает за оформление всех элементов на странице, в том числе и текста. Уже на ранних этапах развития этой технологии существовала возможность указать, какой шрифт должен использоваться для отображения того или иного элемента. Однако при этом предполагалось, что указанный шрифт должен быть установлен на компьютере пользователя. Как вариант «страховки» на случай отсутствия конкретного шрифта - существовала возможность задать несколько шрифтов в порядке «приоритетности», с тем чтобы система последовательно выполнина поиск и использовала первый найденный вариант из списка. Такой подход породил концепцию безопасных для веб шрифтов (web save fonts) - некоторого набора шрифтов, которые с большой долей вероятности установлены на компьютерах пользователей, так как, например, входят в комплект поставки ОС или просто пользуются большой популярностью.

Статистику «распространения» таких шрифтов можно увидеть с помощью сервисаcssfontstack.com , который также помогает сконструировать последовательность «страховочных» шрифтов для каждого из них.

Соответственно, все возможности веб-типографики того периода были сосредоточены в десятке шрифтов, которые входили в состав «безопасного» набора. Однако с развитием CSS появилась возможность «встраивать» шрифты в сайт, т.е. размещать файл шрифта вместе с другим содержимым сайта на сервере и ссылаться на него в коде шаблонов с тем, чтобы он загружался браузером при просмотре сайта и таким образом становился доступным для использования на компьютере пользователя. Это достигается с помощью директивы @font-face , она поддерживается большинством современных браузеров и используется на все большем числе сайтов. Но и при ее использовании не следует забывать указывать «страховочные» варианты шрифтов, которые могут быть использованы в случаях, когда основной шрифт по какой-то причине оказался недоступным. Итак,встраиваем шрифт, расположенный на собственном сервере .

1. Находим нужный шрифт в формате TTF или OTF, проверяем, поддерживает ли он нужный нам язык.
2. Используем генератор Fontsquirrel для конвертации шрифта в различные веб-форматы.

1. Скачиваем создаваемый генератором @font-face-пакет, который включает в себя файлы шрифтов (их необходимо разместить на сервере, вместе с другими элементами шаблона) и заготовку @font-face правила, которое необходимо разместить в самом начале файла стилей на своем сайте, убедившись, что пути к файлам шрифтов в нем указаны верно.

@font-face { font-family: ‘myfont’; src: url(‘myfont-webfont.eot’); src: url(‘myfont-webfont.eot?#iefix’) format(’embedded-opentype’), url(‘myfont-webfont.woff’) format(‘woff’), url(‘myfont-webfont.ttf’) format(‘truetype’), url(‘myfont-webfont.svg#myfont’) format(‘svg’); font-weight: normal; font-style: normal; }

2. Указываем в стилях, к каким элементам должен быть применен встроенный шрифт с помощью регулярного CSS синтаксиса.

Наслаждаемся произведенным эффектом. Можем также несколько упростить себе задачуиспользуя сторонний сервис для загрузки шрифтов , например Google Webfonts .

1. Выбираем шрифт в библиотеке и проверяем, поддерживает ли он нужный язык.
2. В режиме «быстрого использования» выбираем необходимый нам вариант начертания и наборы символов, которые необходимо поддерживать. Чем больше вариантов мы захотим использовать, тем «тяжелее» файл шрифта и как следствие больше время его загрузки. Поэтому не выбирайте лишнего.
3. Копируем генерируемый системой код и вставляем его в код шаблона сайта между тэгами перед другими ссылками на .css файлы.
4. Указываем в стилях, к каким элементам должен быть применен встроенный шрифт с помощью регулярного CSS синтаксиса, также как и в предыдущем случае.

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

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

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

01. Зачем вообще нужны веб-шрифты, почему не обойтись стандартными?

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

И можно было бы вовсе отказаться от стандартных шрифтов, тем более, что многие мобильные ОС их не поддерживают (например, Arial, Taһoma, Verdana и Georgia). Но, к сожалению, индустрия, много лет подгоняемая под 96 DPI экраны и джорджии-верданы, оказалась не совсем готова к быстрым переменам, и на старых ОС Windows до сих пор возникают проблемы с отображением нестандартных шрифтов из-за особенностей механизма растеризации.

02. Как выбрать хороший веб-шрифт?

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

Однако при выборе шрифта гораздо большее значение имеет даже не это, а целесообразность и соответствие шрифта способу использования и возложенным на него задачам. Если работаешь со шрифтами, нужно понимать, как все это работает , какие технологии используются. Это поможет не держать в голове кучу непонятных заученных правил, схваченных урывками. Например, каждый уважающий себя полиграфист знает, почему нежелательно использовать TrueType шрифты при офсетной печати, какие шрифты можно использовать в качестве текстовых, а какие - только для заголовков или указателей. Если он не будет этого знать, потом придется перепечатывать огромный тираж, а на работе его будут ждать постоянные сюрпризы и проблемы. Удивительно, почему к веб-дизайнерам никто не предъявляет никаких требований.

03. Как браузеры отрисовывают шрифты?

Довольно часто приходилось слышать, дескать, браузеры сами отрисовывают шрифты, поэтому везде выглядят по-разному. Но на самом деле, отрисовкой шрифтов занимается специальная графическая подсистема ОС: в Windows это GDI или DirectWrite , а на OS X и iOS - CoreText (а раньше QuickDraw). Всего есть 3 распространенных механизма растеризации (рендеринга) шрифтов: двухцветное (черно-белое) пиксельное, монохромное пиксельное (его еще часто называют antialiasing или обычное сглаживание) и субпиксельное. Субпиксельное использует особенность ЖК и плазменных дисплеев, где каждый пиксель разделен на 3 части (красную, зеленую и синюю), для того, чтобы увеличить горизонтальное разрешение отрисованной картинки и повысить четкость.

Однако браузеры действительно сами выбирают способ отрисовки, из тех которые предоставлены ОС. Например, в составе GDI есть 3 варианта рендеринга: ч/б, обычное сглаживание и субпиксельный ClearType . Особенность последнего в том, что сглаживание происходит только по горизонтали, в соответствии с расположением субпикселей. Именно поэтому при его использовании мы часто наблюдаем ужасные зубцы на горизонтальных и диагональных штрихах шрифта. К счастью, Microsoft начала потихоньку совершенствовать механизм, и на смену GDI пришла технология DirectWrite, где таки появилось сглаживание по вертикали. Сравните:

04. TTF или OTF?

TrueType и PostScript - изначально это были разные форматы шрифтов. В TrueType используются квадратичные кривые Безье, а в PostScript кубические кривые, хорошо знакомые дизайнерам, работающим в Illustrator и Photoshop. Сегодня оба способа описания кривых используются в составе одного формата OpenType, с той лишь разницей, что файлы с TrueType имеют расширение TTF, а с PostScript - OTF. У каждой из технологий есть свои особенности хинтинга и специфика применения.

Посмотрите на картинку. Если TrueType шрифт намного читабельнее в мелком кегле, но в крупном размере мы видим характерные зубцы, то для PostScript шрифта все ровно наоборот. Так происходит потому, что для PS и TT браузеры выбирают разные методы растрирования. Для PS браузер применил обычное монохромное сглаживание, а TT был обработан ClearType’ом. Вот и получается, что для текстовых шрифтов предпочтительнее будет TrueType, а для заголовков и крупных надписей лучше подойдет PostScript.

Еще мы видим, что пока DirectWrite используют не все браузеры. Так, его до сих пор нет в Google Chrome.

05. Что еще влияет на отображение?

Иногда способ растеризации лучше задавать вручную. Например, в браузерах с движком Webkit можно использовать CSS-свойство -webkit-font-smoothing и включить вручную обычное сглаживание вместо субпиксельного, и наоборот. Есть и нетривиальные способы добиться от браузера смены способа растрирования, на хабре однажды предлагали использовать хак с text-shadow .

Нельзя забывать и про размер шрифта (font-size). Форма контуров, контраст штрихов и читаемость могут сильно отличаться для разных кеглей. Отложите графический редактор и посмотрите, как веб-шрифт выглядит в браузере, в боевых условиях.

Еще один способ сгладить недостатки сглаживания - это управление цветом и контрастом. С целью ослабить эффект хроматического контура (при использовании ClearType проявляются желтые и пурпурные контуры по краям), можно попробовать ослабить тональный контраст, приблизив цвет фона к цвету текста. Сильно не увлекайтесь, помните о пользователях с ослабленным зрением.

06. Нужен ли веб-шрифтам хинтинг?

Хинтинг - это специальные инструкции, которые жестко привязывают абстрактные кривые шрифта к пикселям на мониторе. Абсолютное большинство шрифтов (в том числе коммерческих) - не хинтованные, потому что это довольно трудоемкая и сложная процедура. Для TrueType и PostScript хинтинг выполняется по-разному. Если вы берете дешевый шрифт, безопаснее формат OTF, потому что в TT процедура осталась неизменной со времен черно-белого растрирования и не совсем адекватная, а для PS процедура проще, и у автора есть возможность сделать автоматический хинтинг.

Шрифт без хинтинга при растрировании становится замыленным, а высота букв может скакать.

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

В ОС Windows мы видим, пожалуй, самый радикальный подход: такие популярные шрифты как Tahoma, Verdana, Arial и Georgia были отхинтованы специально под GDI ClearType, и когда появился DirectWrite, пришлось перехинтовывать и обновлять основные шрифты в комплекте ОС.

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

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

07. @font-face или Cufon?

Как бы странно это не звучало, но есть еще люди, которые задают себе этот вопрос. Казалось бы, после того как браузеры начали поддерживать аттрибут @font-face, все остальные технологии встраивания шрифтов (Cufon, sIFR, Flash) вроде как должны были стать неактуальными. Но некий смысл все же остается, например способ замены шрифта изображением, когда на сайт выводятся не векторные кривые, а только отпечаток, как принтер отпечатывает его на листе или Photoshop выводит нередактируемый JPG. Это разрешено многими лицензиями на обычные (десктопные) шрифты. Некоторые производители шрифтов (например, Adobe) разрешают внедрять (в программы и на сервер) десктопный шрифт, если при этом он остается защищенным и его нельзя скачать.

Если у вас нет возможности купить отдельную веб-лицензию, тогда можно применить подходящую для этого sIFR , когда шрифт встраивается с помощью флеш-объектов. Недостаток в том, что используется Flash, который поддерживается далеко не всеми устройствами. Еще можно использовать технологию Cufon (используется Canvas), если позволяет лицензия. Конечно, в данном случае скрипт будет громоздким, а выделение текста не работает, но в безвыходной ситуации подойдет.

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

08. В каких форматах должны быть файлы шрифта?

Подготовленные к внедрению (@font-face) на сайт шрифты на сегодняшний день должны быть сразу в нескольких форматах:

TTF или OTF - привычный нам файл шрифта, но подгружаемый с сервера на время просмотра сайта;
WOFF - незащищенный архив исходника OTF или TTF, пожалуй, самый важный формат, который поддерживают большинство популярных браузеров, а файлы в WOFF обычно 2–2,5 раза легче, чем исходные;
EOT - внедряемый TT OpenType архив, имеющий механизмы защиты, нужен для поддержки старых браузеров Internet Explorer (начиная с IE8 кроме TrueType кривых, поддерживаются и PostScript);
SVG - для поддержки браузера Safari.

09. Можно ли конвертировать веб-шрифты?

Что бы вам ни говорили, нельзя просто переконвертировать файл и сохранить исходное качество шрифта, особенно, если изначально он был в формате OpenType. В процессе есть шанс потерять какие-то данные, вшитые в файл шрифта (скомпилированные инструкции, дополнительные знаки, метрики). Вы заметите это, когда при конвертации файл неожиданно «похудеет», особенно некошерно конвертировать TrueType в PostScript и обратно.

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

10. Сколько должны весить веб-шрифты?

Прежде чем отобразить страницу, браузер должен полностью загрузить файлы шрифтов. Может быть, вам приходилось видеть эффект «font flash» (или FOUT), когда на короткое мгновение вместо экзотических шрифтов успевают вспыхнуть стандартные шрифты системы. Нормально, если TTF (OTF) укладывается в 100 кб, а WOFF (EOT) в 50 кб. Всегда задумывайтесь о том, нужно ли вам вообще использовать нестандартные шрифты, даже если вы используете его в 1 коротком заголовке, все равно придется загружать весь файл шрифта целиком.
Чем больше в дизайне перфекционизма, тем меньше могут весить файлы шрифта, и старайтесь выбирать простые формы. В этом смысле, идеальная форма - это открытый геометрический гротеск с малым контрастом. Для ускорения загрузки шрифта, также бывает полезно включить его в файл стилей с помощью data:uri.

11. Сколько начертаний шрифта можно использовать в вебе?

С точки зрения дизайнера, много начертаний - это круто. И действительно, для заголовочка - Bold, а вон там, для врезочки - ExtraLight, ненужные текстики вообще запихнем и запрессуем в Condensed Bold. Вот оно - настоящее богатство и стилистическое разнообразие. Но когда все это «богатство» начинают переносить на сайт, выясняется, что все жутко тормозит. И лучше даже не пытаться открыть такой сайт с мобильного устройства. А еще, не забываем, что каждое начертание стоит отдельных денег, и вполне вероятно, что заказчик попросит вас или найти шрифтовой синоним, или уменьшить количество начертаний, только бы не покупать всю дорогую гарнитуру. Нормально использовать максимум 2-3 начертания одной или разных гарнитур.

12. Нужно ли ограничивать набор символов?

Ответ на этот вопрос, зависит от того, что это за сайт и как он будет использоваться. Ограничения могут быть полезны, потому что есть возможность значительно уменьшить объем файлов. Иногда из-за незнания, разработчики грузят на сайт тяжеленные файлы шрифта с его полным набором знаков, и хорошо, если там нет иероглифов (к сведению, шрифт Arial Unicode содержащий большую часть символов из таблицы Юникод весит 22 мб).

Тем, кто делает англоязычные сайты проще всего, им вообще не нужно грузить дополнительные знаки, достаточно тех, что есть в Basic Latin (или ASCII). Если вы используете шрифт только для заголовков на русском языке + вкрапления английского, то вам будет достаточно наборов ASCII (Basic Latin) и 64 символа русского алфавита, совсем не обязательно грузить набор Cyrillic Extended из 420 символов. Совсем другая история, если ваш сайт многоязычный, в этом случае во избежание некорректного отображения символов нужно постараться охватить все используемые языки.

13. Можно ли использовать шрифтовые клоны?

Бывает, что купить оригинал шрифта или слишком дорого, или вообще невозможно, вот тогда будет уместно подобрать шрифтовой синоним (клон). Конечно, от них не стоит ждать потрясающего качества, даже если они сделаны, скажем, именитой российской фирмой. Совсем все плохо, когда вам попался опус какого-нибудь анонимуса-грамотея, решившего опробовать себя на новой ниве, таких шрифтов остерегайтесь. Вот примеры клонов (в скобках указан оригинал): FreeSet (Frutiger), Pragmatica и Helios (Helvetica). Обратите внимание, что формы букв могут отличаться. Большое количество клонов есть в справочнике шрифтовых синонимов Паратайпа .

14. Как протестировать шрифт?

Дизайнеры, не привыкайте видеть шрифты только сквозь окна фотошопа, графические редакторы используют свои методы сглаживания текстов, и вы можете быть обмануты красивой картинкой. Гораздо полезнее научиться тестировать и смотреть их в браузерах. Если есть демонстрационная страница, обязательно убедитесь, что при рендеринге не вылезают всевозможные артефакты и спайки. Есть еще такой инструмент как Typecast , где можно проверить многие шрифты, а потом показать страницу клиенту. Для тех, кто выбирает новый шрифт для уже готового сайта - незаменимый для вас сервис Web Fonts Previewer , вы сможете протестировать любой шрифт на живом работающем сайте, так, как будто вы уже его внедрили.

15. У меня на компе есть шрифт, можно ли его использовать на сайте?

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

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

16. Как купить веб-шрифт?

Когда вы «покупаете шрифт» - это ближе всего к покупке ПО, когда вы получаете лицензию на его использование, а не права на сам файл программы. Получается, юридически скомпилированный файл шрифта - это программа. Модификация и изменение, если этого не разрешает лицензия, рассматриваются как нарушение авторского права.

Удобный способ покупки шрифтов - через каталоги шрифтов (Fonts.com, MyFonts, Ascender, Typekit). Вы сможете просмотреть, сравнить и выбрать один из имеющихся вариантов использования, оплатить картой. Для компаний проще всего будет напрямую связаться со студией-производителем или же предоставить покупку шрифтов заказчику

А может быть вообще лучше не тратить деньги на шрифт? Существует множество замечательных бесплатных шрифтов, которые ни в чем не уступают платным!

17. Какие бывают лицензии?

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

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

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

Свободные лицензии (public domain) - автор шрифта допускает свободное распространение, с условием указания своего имени (Creative Commons) или без него (например, OFL, GPL, Apache 2.0). Этот тип лицензии допускает даже коммерческое использование, кроме продаж и платного распространения. Примеры: PT Sans, Opensans, Droid. Иногда разрешается модификация шрифта (GPL), но созданная вами модификация автоматически наследует такую же лицензию (то есть, вас тоже могут форкнуть). Свобода предполагает, что можно использовать на любых носителях, в т.ч. и веб.

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

18. В чем отличие лицензий для веб-шрифтов?

Веб-лицензии - наши самые любимые, они либо является дополнением к основной лицензии, либо даются отдельно. Регулирует частный случай - использование шрифтов на сайтах. Как правило, самое главное ограничение - на количество просмотров страниц. Например, 10 тыс в месяц, 100 тыс или 1 млн. То есть, чем больше людей посещают ваш сайт, тем больше вы платите за лицензию. Есть и безлимитные варианты, когда вы платите за шрифт 1 раз, но они во много раз дороже. Наверно, задались вопросом, а следит ли кто-то за количеством просмотров? Чаще всего нет. Но не забывайте, что огромное количество счетчиков отслеживают трафик вашего сайта и, вызвав подозрение продавца, вы можете лишиться лицензии.

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

После покупки вы получаете специальные файлы, которые встраиваете в сайт (TTF, OTF, WOFF, EOT), и некоторые шрифты не разрешают размещать данные файлы на сайте в незащищенном виде, так как теоретически третьи лица могут заполучить сами файлы шрифтов. Третий вариант – вы используете специальный веб-сервис производителя шрифтов, например как Typekit, принадлежащий компании Adobe, и платите абоненскую плату.

Первая часть главы посвящена знакомству с CSS шрифтами. На этой странице вы узнаете, как подключать шрифты в CSS, что такое веб-шрифты и как с ними работать, какие форматы шрифтов бывают, как пользоваться Google Fonts. Для начала рассмотрим легкий пример подключения шрифта CSS:

P { font-family: Verdana; }

Этот небольшой кусочек кода означает, что ко всем тегам

Применен шрифт Verdana. Свойство font-family устанавливает, какой шрифт или семейство шрифтов будет использоваться. Корректное отображение этого стиля в браузере пользователя зависит от того, установлен ли на его компьютере заданный шрифт. В нашем случае, если на компьютере пользователя отсутствует шрифт Verdana, то браузер отобразит шрифт, установленный по умолчанию.

В свое время дизайнерам приходилось дополнительно указывать несколько запасных шрифтов на случай, если на компьютере пользователя будет отсутствовать основной. Допустим, вы желаете оформить текст шрифтом Verdana, а в качестве запасных установить шрифты Trebuchet MS, Geneva и любой шрифт без засечек. Записывается это таким образом:

P { font-family: Verdana, "Trebuchet MS", Geneva, sans-serif; }

При обработке этого кода браузер сначала проверит наличие шрифта Verdana на компьютере пользователя. Если шрифт присутствует, содержимое тегов

Отобразится этим шрифтом. Если шрифт отсутствует, браузер проверит наличие следующего по списку шрифта – Trebuchet MS. Если и этот шрифт отсутствует, будет проверяться наличие следующего шрифта – Geneva. Если на компьютере пользователя нет и Geneva, браузер выберет другой доступный шрифт без засечек и отобразит текст им.

Обратите внимание: в коде мы записали название шрифта Trebuchet MS в кавычках. Необходимо брать название шрифта в двойные либо одинарные кавычки тогда, когда в нем содержатся пробелы.

О том, что такое шрифт с засечками (serif) и без (sans-serif), вы можете прочитать на странице Википедии .

Веб-шрифты

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

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

Итак, для отображения нужного шрифта в браузере пользователя нам необходимо, чтобы этот шрифт сам загружался на его компьютер. Осуществить это довольно просто. Такой метод подключения шрифтов к CSS открывает действительно широкие возможности перед дизайнерами. Но стоит упомянуть и о ложке дёгтя в бочке мёда: во-первых, не каждый браузер поддерживает определенный формат шрифта (что приведет к тому, что шрифт не отобразится), а во-вторых, если файл со шрифтом имеет большой вес, это может замедлить загрузку страницы.

Поддержка форматов

Как бороться с проблемой несоответствия формата файла? Давайте взглянем на таблицу, где показаны наиболее популярные форматы шрифтов и узнаем, какие браузеры их поддерживают:

Примечание: актуальную информацию о поддержке форматов шрифтов вы всегда можете узнать на сайте caniuse.com . В строку поиска необходимо ввести название формата (например, ttf).

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

Подключаем веб-шрифт с помощью @font-face

Предположим, у вас есть свой уникальный шрифт под названием MyUniqueFont в формате TTF и вы желаете, чтобы основной текст веб-страницы отображался именно этим шрифтом. Первое, что нужно сделать, это скопировать файл шрифта в папку, где находятся все остальные файлы сайта. Чтобы не создавать беспорядок, вы можете создать отдельную папку специально для шрифтов, назвав ее, к примеру, fonts .

@font-face { font-family: MyUniqueFont; src: url("fonts/MyUniqueFont.ttf"); }

Свойство font-family в данном случае играет другую роль: с помощью него мы присваиваем имя шрифту, чтобы потом использовать это имя при написании стиля:

P { font-family: MyUniqueFont; }

Во второй строке указывается путь к файлу шрифта. В нашем примере файл MyUniqueFont.ttf находится в папке fonts . У вас URL-адрес может отличаться.

Шрифты Google Fonts

Компания Google дает возможность легко подключать любой шрифт из коллекции Google Fonts. Всё, что вам необходимо сделать, чтобы начать использовать понравившийся шрифт, – указать несколько настроек на странице шрифта в Google, после чего скопировать специальную ссылку на этот шрифт и добавить в ваш веб-документ.

Примечание: вся коллекция шрифтов от Google доступна на сайте Google Fonts . На странице можно воспользоваться различными фильтрами для поиска шрифтов по категориям, толщине, алфавиту.

Ниже мы опишем каждый шаг подключения шрифта от Google. Чтобы понимать, о чем идет речь, выберите любой шрифт со страницы Google Fonts и откройте его, нажав на кнопку Quick-use .

Шаг 1: выберите начертание

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

Шаг 2: выберите алфавит

Далее на странице есть возможность выбрать набор символов: латиница, кириллица и т. д. В зависимости от шрифта, в нем могут быть доступны не все варианты алфавита. Аналогично предыдущему пункту, лучше поставить галочку только напротив того алфавита, который понадобится.

Шаг 3: добавьте код на сайт

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

...

Второй способ – подключение шрифта с помощью директивы @import . Готовый код находится во второй вкладке пункта 3 на странице выбранного Google-шрифта. Его нужно добавить в самое начало вашей таблицы стилей (в противном случае файл не импортируется). Выглядит код примерно так:

@import url(http://fonts.googleapis.com/css?family=Roboto&subset=latin,cyrillic);

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

Шаг 4: создайте стиль

После осуществления предыдущих шагов можно начать применять шрифт. Как записывается такое правило CSS, вы уже видели ранее:

P { font-family: "Roboto", sans-serif; }

Если на первом шаге вы выбрали несколько вариантов начертания (к примеру, добавили вариант жирного шрифта Bold 700), тогда на третьем шаге код немного видоизменится:

@import url(http://fonts.googleapis.com/css?family=Roboto:700,400&subset=latin,cyrillic);

Чтобы затем придать шрифту жирное начертание, запишите CSS-стиль таким образом:

P { font-family: "Roboto", sans-serif; font-weight: 700; }

Примечание: в Google Fonts для обозначения насыщенности шрифта используются только условные единицы от 100 до 900. Так, нормальное начертание (по умолчанию) эквивалентно значению 400 (normal), а стандартное полужирное начертание эквивалентно 700 (bold).

Главными преимуществами сервиса Google Fonts является:

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

Среди недостатков сервиса – не очень большое разнообразие шрифтов, особенно кириллических. К слову, в интернете есть и другие похожие сервисы, например, TypeKit (платный).

Итоги

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