От автора: Thierry Blancpain – бренд-дизайнер, работает в Informal Inquiry в Нью-Йорке, является сооснователем Grilli Type, семейсива шрифта Swiss. Статья применима ко всем веб-шрифтам, однако в качестве примеров концепций используются шрифты Grilli Type, в частности те, которые демонстрируют функции OpenType.
Использовать свои шрифты вместо системных становится все проще, но тема все еще развивается. Мы разберем разные форматы шрифтов для веб, а также обсудим советы и лучшие практики. С теми, кто хочет повысить свой уровень и максимально отточить мастерство передовыми концепциями, мы подробно разберем более глубокие возможности. В конце статьи вы должны быть не просто подготовленными, но и уметь выжимать максимум из веб-шрифтов. Поехали!
Форматы шрифтов
При покупке лицензии на шрифт вы получаете пакет файлов шрифтов, который обычно включает, как минимум, следующие форматы:
Embedded OpenType (EOT): EOT – старый формат, разработанный Microsoft. EOT необходим для рендера шрифтов в старых версиях IE. EOT часто предоставляют в несжатом виде, поэтому если вам не нужно поддерживать IE8 и ниже, то лучше отказаться от этого формата.
TrueType (TTF): TTF – формат шрифта, разработанный Microsoft и Apple в 1980-х. Современные файлы TTF также называют TrueType OpenType шрифты. TTF полезен для расширения поддержки старых браузеров, особенно мобильных при необходимости.
Web Open Font Format (WOFF): WOFF разработан в 2009 – это формат-обертка для шрифтов TrueType и OpenType. Формат сжимает файлы и поддерживается во всех современных браузерах.
Web Open Font Format 2 (WOFF2): WOFF2 – обновление оригинального формата WOFF. Разработан Google и считается лучшим форматом из предложенных, так как обеспечивает меньший размер файлов и лучшую производительность в современных браузерах с поддержкой.
Если ваша целевая аудитория использует современные браузеры, вы можете взять прогрессивный метод @font-face, который работает только с форматами WOFF и WOFF2. Форматы дают лучшее сжатие и позволяют работать с меньшим количеством файлов в коде. Если машина пользователя старая и не поддерживает ни один из них, возможно, лучше предоставить их в виде системного шрифта для улучшения производительности.
Если хотите максимально расширить поддержку, добавьте файлы EOT и TTF. Также для расширения поддержки браузеров обычно используют SVG шрифты, но на сайте Grilli Type мы больше не используем SVG шрифты, так как у них есть минусы. Google Chrome, например, полностью удалил их поддержку.
Вставляемые веб-шрифты
Подключение шрифтов в CSS осуществляется через @font-face. Ниже представлена максимальная поддержка, в том числе все форматы шрифтов, о которых мы говорили ранее:
@font-face { font-family: FontName; src: url('path/filename.eot'); src: url('path/filename.eot?#iefix') format('embedded-opentype'), url('path/filename.woff2') format('woff2'), url('path/filename.woff') format('woff'), url('path/filename.ttf') format('truetype');
}
Если необходимо поддерживать только современные браузеры, можно урезать код:
@font-face { font-family: FontName; src: url('path/filename.woff2') format('woff2'), url('path/filename.woff') format('woff');
}
После объявления шрифтов их можно использовать на элементах. Например:
body { font-family: 'FontName', Helvetica, Arial, sans-serif;
}
Хостинг веб-шрифтов
Один из самых гибких способов загружать веб-шрифты – это хранить их самому. То есть вы храните файлы на своем сервере, и шрифты всегда будут доступны пользователям на сайте без сторонних зависимостей. Для загрузки своих шрифтов не нужны трек-коды и JS. Множество небольших сайтов-производителей шрифтов дают прямую ссылку на загрузку, что позволяет самим хранить файлы. Мы в Grilli Type считаем это лучшим способом доставки шрифтов.
Пока некоторые производители шрифтов предлагают самостоятельный хостинг (как с большими ограничениями и требованиями, так и без), другие дают только свой хостинг. То есть они сами будут хостить файлы от вашего имени. Среди таких сайтов можно выделить Hoefler & Co., Font Bureau и Typotheque. Font Bureau и Typotheque предлагают свои шрифты в обоих вариантах по разным ценам.
Перед покупкой лицензии узнайте, как производитель предоставляет доступ к шрифтам. Различия в хостинге и правилах использования могут повлиять на их реализацию. Покупайте то, что максимально подходит именно вам, и используйте их законно, соблюдая лицензионное соглашение производителя.
Продвинутые функции типографики
Давайте рассмотрим парочку наиболее продвинутых функций веб-шрифтов.
Интервал и кернинг
В файлах есть 2 настройки, отвечающие за расстояние между символами:
letter-spacing: боковые отступы слева и справа от каждого символа
font-kerning: особая настройка между двумя символами
Интервал нельзя полностью отключить. В таком случае движок рендера текста (браузер) не будет знать, что делать с буквами. Кернинг же по умолчанию выключен и включается вручную в CSS.
Контролировать кернинг легче, чем вы думаете! Как активировать кернинг во всхе браузерах с поддержкой:
p { font-feature-settings: "kern" 1; font-kerning: normal;
}
Если вы не используете Autoprefixer, то вам придется вручную писать вендорные префиксы для поддержки в старых версиях:
/* All vendor prefixes for `font-feature-settings` */
p { -moz-font-feature-settings: "kern" 1; -ms-font-feature-settings: "kern" 1; -o-font-feature-settings: "kern" 1; -webkit-font-feature-settings: "kern" 1; font-feature-settings: "kern" 1; font-kerning: normal;
}
Продвинутые функции OpenType
Мы обсудили, как с помощью атрибута font-feature-settings контролировать кернинг, но с его помощью можно контролировать другие OpenType функции. Список поддерживаемых функций постоянно растет. Возможности OpenType удобно смотреть через CSS-Tricks almanac.
«Функции OpenType действительно поражают. Они открывают кучу возможностей по контролю за шрифтами без необходимости загружать много файлов для получения одинакового эффекта. Также стоит отметить, что дизайнер сам решает, какие функции будет поддерживать его OpenType шрифт. Функции во всех шрифтах могут отличаться.»
Для демонстрации соединения продвинутых функций OpenType представляю вам код ниже. Код включает числовые символы с поддержкой OpenType, старых цифр (onum) и пропорциональных цифр (pnum). Также шрифт включает кернинг и особый стилистический набор.
.my-element { font-feature-settings: "onum" 1, "pnum" 1, "kern" 1, "ss01" 1;
}
С помощью атрибута font-feature-settings можно активировать стилистические альтернативы, дискреционные лигатуры, разные типы фигур, маленькие заглавные буквы и другие полезные вещи. На Typofonderie есть замечательный обзор продвинутых функций с примерами.
font-feature-settings используется для установки множества OpenType функций за раз. Поэтому невозможно определить одну настройку по-другому, так как другие варианты не будут наследоваться. Для изменения настроек дочерних элементов необходимо заново определять все функции.
Отступы между букв и слов
CSS уже давно поддерживает letter-spacing и word-spacing. При правильном использовании оба атрибута позволяют хорошо контролировать 2 важных аспекта внешнего вида шрифта.
Как и с любой типографикой, вам нужно научиться оценивать разные варианты как функционально, так и визуально, после чего принимать решения на основе впечатлений. Разные контексты могут требовать разных отступов.
На маленьких экранах большинство шрифтов выиграют от маленького дополнительного пространства между символами и словами. В чем-то большом типа заголовков шрифты могут выиграть с уменьшенными отступами. В любом случае правильное решение требует внимания и лучшего мнения, основанного на результатах.
Я выяснил, что letter-spacing и word-spacing лучше всего работают с em единицами. Это позволяет отступам гибко подстраиваться на основе размера шрифта на элементе, к которому он применен. Следующий пример даст тексту немного больше места на маленьких размерах шрифта:
p { font-size: 12px; letter-spacing: 0.015em; word-spacing: 0.001em;
}
Рендер шрифтов
Использование шрифтов на экране поднимает важные вопросы о том, как происходит их рендер. Обычно шрифты проектируют под сетку 1000 units tall или выше, но отображают в размере около 16px. При взаимодействии устройства, экрана и ПО такое сокращение разрешения и точности требует некоторых умений, чтобы улучшить читаемость маленького шрифта. Будьте наблюдательны, тестируйте лучшее решение в нескольких браузерах, чтобы использовать лучшие методы для улучшения читаемости.
Хинтинг
Все ОС по-разному видят шрифты. В MacOS смарты находятся в ОС (следовательно, могут развиваться со временем), в то время как сами шрифты могут быть тупыми. На Windows исторически так сложилось, что смарты включают в ПО шрифтов, и система должна использовать эти смарты, чтобы решить, как шрифт должен отображаться на разных размерах.
Эти смарты называются хинтингом (подсказки). Хинтинг информация, вставленная в файлы шрифта, может подсказать компьютеру, что 2 полосы символа Н должны иметь одинаковую ширину строки, или что расстояние сверху и снизу от средней линии должно быть примерно одинаковым на маленьких размерах.
Хинтинг – очень сложная тема. Важно понять, что один и тот же шрифт на одном размере может рендериться по-разному, даже на том же ПК. Все зависит от множества факторов, в том числе экрана, браузера и даже шрифта и цвета фона.
У Microsoft на тему хинтинга есть руководство. Несмотря на то, что оно было выпущено в 1997, чтиво до сих пор актуально. В нем очень подробно раскрыта тема.
Сглаживание шрифтов
Хинтинг информация в файлах шрифтов почти всегда игнорируется MacOS, но в определенных браузерах есть дополнительные возможности по контролю рендера шрифтов.
p { -webkit-font-smoothing: antialiased; /* Chrome, Safari */ -moz-osx-font-smoothing: grayscale; /* Firefox */
}
Эти свойства CSS сделают текст еще точнее и тоньше на MacOS и iOS. Однако это может привести к проблемам с рендером, особенно если шрифт уже был тонкий или жирный.
antialiased и grayscale полезны для баланса рендера шрифтов при использовании светлого текста на темном фоне. Без них текст был бы более жирным.
font-smoothing и его значения не станут стандартной CSS функцией, поэтому используйте его осторожно и, возможно, только в том контексте, где необходимо работать с определенным браузером.
Внимание: OptimizeLegibility
Мы часто встречаем этот атрибут при отладки шрифта на сайтах клиентов Grilli Type:
p { text-rendering: optimizeLegibility;
}
Помимо всего прочего, это значение активирует кернинг. Когда-то оно было полезно, но больше не нужно. Помимо кернинга, оно активирует все виды лигарут, в том числе изощренные, которые могут быть в файлах шрифта.
У данного значения есть способы применения, но не используйте его, если не уверены. Скорее всего, оно вам не нужно.
Продвинутые возможности веб-шрифтов
Ниже представлено еще больше продвинутых возможностей для тех, кто хочет повысить свой уровень.
Загрузка лицензионных шрифтов на Github
Если вы выложили проект в публичный репозиторий и используете файлы шрифтов с лицензией, обязательно убедитесь, что файлы или папка шрифтов включена в файл .gitignore, чтобы избежать загрузки. Это не позволит другим скачивать и использовать ваш шрифт, а вам нарушить правила использования лицензионных шрифтов, у которых часто есть ограничения по использованию и распространению.
.DS_Store path/to/web/fonts/folder/*
Тактики загрузки шрифтов
Загрузка веб-шрифтов может быть такой же легкой, как @font-face, но не факт, что производительность будет наилучшей. Например, это может привести к миганию нестилизованного текста (МНТ), что считается плохим UX в некоторых случаях. Статья Zach Leat «полное руководство по стратегиям загрузки шрифтов» рассказывает об этом и предлагает методы по улучшению загрузки, которые осчастливят ваших пользователей и вас.
Файлы шрифтов с кодировкой Base64
В некоторых редких случаях удобно кодировать шрифты в base64 через CSS. Но почти всегда это не нужно. В процессе кодирования можно нарушить лицензионные соглашения. При использовании base64 внимательно прочтите правила использования шрифта.
Декорация текста через CSS
W3C работает на черновиком новых элементов для декорации текста. В основном, это связано с тем, как сделать подчеркнутый текст лучше и легче в CSS. Пока что это не работает во всех браузерах, но вы посмотрите!
Переменные шрифты
В 2017 вышла OpenType спецификация шрифтов 1.8.2, что открыло дорогу переменным шрифтам. Новая версия OpenType позволяет включать множество стилей шрифта в один файл, снижая количество запросов на сервер и размер файла. В зависимости от выбора дизайнера шрифт также может допускать использование произвольной жирности между существующей жирностью и шириной шрифта. На Axis Praxis можно поиграться с существующими тестовыми шрифтами – понадобится последняя версия Safari или Chrome.
Заключение
В статье было затронуто много тем! Надеюсь, теперь вы понимаете разницу между файлами шрифтов, как с ними работать, а также все потрясающие и мощные способы стилизации шрифтов с проверенными и истинными методами и передовыми возможностями.
Автор: Thierry Blancpain
Источник: https://css-tricks.com/
Редакция: Команда webformyself.