Вариативные шрифты: начало работы

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

Готовы к сексуальной веб-типографике? Тогда давайте погрузимся в нее.

Что такое вариативные шрифты?

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

Небольшой размер файла объясняется тем, что каждый символ имеет только контур. Точки, которые создают этот контур, могут двигаться, чтобы создать, например, другой вес шрифта. Это также позволяет создавать промежуточные состояния (полужирный). Затем отдельные стили динамически интерполируются прямо в браузере.

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

Вариативные шрифты могут иметь множество осей изменений. Например, к оси веса можно добавить ось ширины и получить еще больше возможных стилей. Например, шрифт Venn от Dalton Maag, который используется в примерах, поддерживает диапазон значений веса от 300 до 800, а ширины — от 75 до 125%. То есть из одного Venn можно получить 25000 стилей, а весит он всего 112 килобайт.

Что можно делать с вариативными шрифтами?

Все зависит от дизайна. Существует 5 зарезервированных осей, которые могут динамически настраиваться:

• wdth для ширины
• wght для веса
• ital для italic
• slnt для slant
• opsz для оптического размера.

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

На изображении видно изменение вариативных шрифтов по разным осям. Ось веса — Source Serif Variable, ось ширины — Venn, ось наклона — Output Sans.

Разве растягивать шрифт не плохо?

Когда вариативный шрифт меняет свою ширину, вес или другие параметры, он не искажается, как это происходит при использовании css-метода transform: scaleX(0.5). Дело в том, что вариативный шрифт изменяется только в заданных дизайнером пределах, то есть продуманно.

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

Преимущества вариативных шрифтов

Богатство типографики

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

Малый размер файла

Вариативные шрифты позволяют хранить множество типографских параметрах в небольших файлах. Например, Süddeutsche Zeitung Magazin загружает 236 килобайт шрифтов для своего сайта. 166 из них — это просто 4 разных веса Work Sans. Если бы они заменили их одним вариативным шрифтом, то могли бы сэкономить более 50% пропускной способности.

Тонкая настройка

Вариативные шрифты обеспечивают детальный контроль над отображением. Возможно, вес 430 будет выглядеть лучше, чем стандартный 400. При этом font-weight: bold и другие именованные значения по-прежнему будет работать.

Лучшая адаптивность

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

Анимация

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

Возвращение оптического размера

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

На картинке шрифт Voto Serif.

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

1. Подберите подходящий

Эта технология довольно новая, поэтому, прежде чем вы сможете перейти к использованию вариативного шрифта, вам сначала нужно найти его. Можно поискать на сайте v-fonts.com. Некоторые шрифты с открытым исходным кодом могут быть загружены с Github. А вот здесь большой список доступных переменных шрифтов от Indra Kupferschmid.

2. Добавьте его в таблицу стилей

Во втором квартале 2018 года браузерная поддержка вариативных шрифтов довольно хорошая (больше 65%): текущие версии Chrome и Safari (на MacOS 10.13+), все браузеры на iOS 11.2 и Chrome на Android. Firefox поддерживает их за флагом, и очень скоро Edge тоже добавить эту возможность. Это все довольно удивительно для технологии, которая была анонсирована всего полтора года назад. Есть большая статья Ричарда Раттера о том, как использовать вариативные шрифты в реальном мире, где он рассказывает, что делать с браузерами, которые их не поддерживают.

В интеграции вариативного шрифта нет ничего необычного, если вы знакомы с @font-face. Нужно только изменить формат на woff2-variations или truetype-variations (в зависимости от файла). Это станет стандартом, но в настоящее время его поддерживает только Safari. Для Chrome и Firefox нужно добавить еще один источник, в котором формат будет установлен без variations. Браузеры по-прежнему будут иметь доступ к функциям переменных.

@font-face {
  font-family: 'Venn';
  src: url('Venn.woff2') format('woff2-variations'),
       /* will be the standard and works in Safari now */
       url('Venn.woff2') format('woff2');
       /* for the other supporting browsers */
}

3. Определите оси и диапазоны изменения

Каждый шрифт имеет собственные оси и пределы изменения. Если вы не знаете, на что способен ваш шрифт, воспользуйтесь Wakamai Fondue.  Вы даже можете сгенерировать css для дальнейшего использования.

4. Стилизуйте

Как пишет Ричард Раттер, модуль CSS4 Fonts добавит новые  высокоуровневые свойства для работы с вариативными шрифтами.

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

Не каждый вариативный шрифт будет использовать все эти параметры. После запуска некоторых тестов я обнаружил, что Safari поддерживает font-weight и font-stretch и автоматически включает оптический размер, если он доступен. Но использование font-style: italic приводит к искажению шрифта.

На данный момент эти высокоуровневые свойства поддерживаются только частично, и то только в Safari. Поэтому рекомендуется использовать свойство низкого уровня font-variation-settings с четырехсимвольными названиями осей.

p {
  font-family: "Venn"; 
  font-variation-settings: "wght" 550, "wdth" 125;
}

Когда высокоуровневые свойства получат полную поддержку, этот код будет аналогичен следующему:

p {
  font-family: "Venn";
  font-weight: 550;
  font-stretch: 125%;
}

Дополнительные оси изменения также доступны в свойстве font-variation-settings, например:

h1 {
 font-family: 'Decovar Alpha VF', sans-serif;
 font-variation-settings: "TRMC" 0, "SKLA" 0, "SKLB" 0, "TRME" 0;
}

Вот результат этого кода (я добавил анимацию, чтобы эффект был заметнее):

Подводные камни

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

Слишком много возможностей

Когда есть столько возможностей для изменения, выбрать очень трудно. Даже когда я смотрю на список именованных опций в Adobe Illustrator, голова кружится. Это Acumin Variable Concept и больше 90 вариантов от ExtraCondensed Thin до Wide UltraBlack Italic.

Требуется больше типографских знаний

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

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

Не всегда есть прирост производительности

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

Вам все равно могут понадобиться второй файл курсивного шрифта

Истинный курсив — это не просто наклонная версия вертикального шрифта, у них очень разные принципы построения и, следовательно, формы букв. Поэтому практически нет вариативных шрифтов с курсивной осью, лишь некоторые имеют ось наклона. Обычно вариативные шрифты имеют отдельный файл для курсива (см. примеры на v-fonts.com).

Все зависит от моделей лицензирования

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

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

Google Fonts смогут сэкономить тонну пропускной способности, когда начнут работать с вариативными шрифтами.

Когда начинать?

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

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

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

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