Вариативные веб шрифты

  • Раздел: Блог

Вариативные веб шрифты

Прошла не одна неделя с You Gotta Love Frontend конференции, но еще не поздно пройтись по нескоторым поднятым вопросам. Я думаю это будет ряд статей на увлекательные для меня темы, как и для вас, надеюсь. Данный пост  о вариативных шрифтов, используя которые Lea Verou показывала ряд приёмов в цикле своих выступлений “Cекреты CSS”.
 
Вариативные шрифты это будущее веб типографии которые предлагают ряд возможностей управления отображением текста (размер, стиль, жирность). И все это при релятивно малом размере файла. Пора сказать прощай нескончаемым дебатам на тему, сколько шрифтов вам нужно подключить и дать возможность вашему контенту жить новой, прекрасной жизнью.
 

Для примера, в тексте (на картинках) используется Output Sans Variable вариативный шрифт который можно настроить по двум осям (вес и скос). В оригинальной статье используется 18 различных стилей шрифта и все это в одном файле шрифта размером в 57 KB. По факту, вариативные шрифты это новая хайповая фишка для всех любителей типографии со времен web fonts. К концу года вариативные шрифты будут поддерживаться всеми ведущими браузерами и в начале 2019 года, мы будем использовать такие шрифты как альтернативу статическим шрифтам. Они работают, а что можно с ними сделать?

Введение


В рамках своего исследования, я нашел самое простое объяснение вариативным шрифтам. Один вариативный шрифт хранится в одном файле, но способен заменить собою множество других шрифтов хранящихся в разных файлах. Обычно под каждый вес (жирность) или стиль (italic, bold, light) шрифта вы должны загрузить ряд соответствующих шрифтов, файлов. С OpenType вариативным файлом шрифта, вы можете сгенерировать множество разных вариации шрифта, притом любой градации (granular, например weight = 100 или 101 и так далее).

Вариативные шрифты могут иметь несколько осей. Этот пример демонстрирует две оси — ширину и вес.
Малый размер файла достигается благодаря тому, что у каждого символа имеется только один контур. Точки которые создают контур, имеют ряд инструкций, которые определяют их поведение и формирование того или другого стиля. Интерполирование происходит динамически прямо в браузере. В сентябре 2016 года, OpenType Font Variations были публично анонсированы и разработаны совместными усилиями Google, Adobe, Microsoft and Apple. Ясно, что такая кооперация придала вариативным шрифтам некий стимул на быструю реализацию.

Возможности

Это всегда зависит от шрифта. Дизайнерам доступны те или иные оси для манипуляции шрифтом. В настоящее время существует пять зарезервированных осей которые могут быть подвижно изменены: wdth — ширина, wght — вес, ital — курсив, slnt — скос, opsz — оптический размер.
Большинство шрифтов предоставляют оси веса и ширины, похоже они наиболее популярны. Но так же могут быть какие-либо создаваемые оси. Например serifs (засечки) или атрибуты нижнего и верхнего регистра.

Действительно ли нам необходимо так много разных стилей?

Давайте остановимся и спросим себя, зачем нам нужны разные стили шрифта? Типографика придает словам смысл посредством дизайна, то есть хорошая типография может поддерживать контент, плохая (или неуместная) типография может портить его. Текст может быть отформатирован разными стилями одного и того же шрифта. Например жирный текст, выделяет, что-то важное. А что-то важное, не будет выделятся, если шрифт однообразный и все выглядит идентично. Конечго можно, например, использовать цвет, но это совсем другая история. Одаренные дизайнеры обожают БОЛЬШОЙ И ЖИРНЫЙ ТЕКСТ красного цвета на билбордах.

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

Как использовать вариативные шрифты?

Найдите доступный вариативный шрифт

Данная технология довольна новая, по этому перед тем как начать использовать вариативные шрифты, вы должны сначала найти их 🙂 Отличным местом для поиска является v-fonts.com. Тут вы сможете найти много разных вариативных шрифтов, поиграться с ними и скачать. Так же список шрифтов можно найти тут

Интегрируйте шрифты в ваши стили

Поддержка браузерами уже достаточно хороша, около 65%. Все последние браузеры в общем-то поддерживают вариативные шрифты. Firefox поддерживает за флагом.
Интеграция вариативного шрифта в целом очень проста. Делаете вы это используя ‘@font-face’

Узнайте какие оси поддерживает шрифт

У каждого шрифта может быть свой набор поддерживаемых осей. Если вы не знаете возможностей своего шрифта, вы можете использовать замечательный инструмент от Roel Nieskens. Просто перетяните туда свой шрифт. Там же вы сможете скопировать сгенерённый CSS стиль для шрифта и использовать его в своем проекте.

Стилизация вариативного шрифта

  • font-weight — вес, принимает только от 1 до 999.
  • font-stretch — растяжение, принимает процент. 100% — дефолт, 50% сжатый, 200% сильно растянутый. Название не совсем очевидно, ведь по факту это ширина.
  • font-style — стиль, принимает наклон, от -90 до 90. Так же font-style: italic по-прежнему будет работать. Кстати, большинство шрифтов как правило реализуют наклон до 8 градусов.
  • font-optical-sizing — новое свойство, которое принимает auto или none. По умолчанию браузеры будут ставить свойство в auto.
Не все шрифты будут поддерживать эти свойства, и не все браузеры поддерживают их на данный момент.
Спасибо.

Мы создаем сайты любой сложности и делаем это красиво!