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

Вариативные (или настраиваемые) шрифты — это, без преувеличения, новая страница в веб-типографике. Настраиваемые шрифты стали возможны благодаря совместным усилиям компаний Microsoft, Apple, Adobe и Google. Концепция была впервые представлена в сентябре 2016 года, вместе с релизом OpenType 1.8. На самом деле, работы в этом направлении велись ещё в 90-х, но только широкое использование шрифтов в вебе дало этой идее вторую жизнь и бурное развитие.

На момент написания статьи вариативные шрифты уже достаточно хорошо поддерживаются приложениями (Photoshop, Illustrator) и браузерами (Chrome, Edge, Safari, в Firefox пока за флагом и только на MacOS), а кроме того, выложено несколько свободно распространяемых демо-версий, следовательно, уже можно заняться изучением возможностей таких шрифтов и подготовиться к их использованию в реальной жизни.

Вариативные шрифты — это расширение формата OpenType, которое позволяет хранить все варианты начертаний в одном файле, а для переключения между ними использовать не только фиксированные шаги, но и промежуточные значения. Например, вместо привычных значений жирности вроде 100, 400, 700 можно будет задать 75 или 650, и так же гибко можно настроить ширину символа от самого сжатого до самого широкого задав любое значение в предопределённом диапазоне, и всё это без загрузки дополнительных файлов:

See the Pen Variable fonts variations by yoksel (@yoksel) on CodePen.

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

Настройками шрифта можно управлять с помощью CSS.

Высокоуровневые и низкоуровневые CSS-свойства

Низкоуровневые — это font-variation-settings и font-feature-settings. Их значения состоят из списка пар имён и значений, перечисленных через запятую.

Пример кода:

font-variation-settings: "wght" 1, "wdth" 200, "ital" 1, "opsz" 100;
font-feature-settings: "liga" on, "zero" on;

Высокоуровневые — это, например, font-optical-sizing, font-variant-ligatures и font-variant-numeric.

Пример кода:

font-optical-sizing: 100; /* = font-variation-settings: "opsz" 100; */
font-variant-ligatures: common-ligatures; /* = font-feature-settings: "liga" on; */
font-variant-numeric: slashed-zero; /* = font-feature-settings: "zero" on; */

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

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

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

• fontdrop.info — покажет все возможности шрифта и позволит поиграться с ними вживую. Не поддерживает WOFF2.
• wakamaifondue.com — покажет возможности, живые примеры и предложит CSS. Так как он пытается показать примеры для всех настроек шрифта, на шрифтах с кучей символов и настроек страница может ощутимо тормозить. Поддерживает WOFF2.

Для экспериментов можно воспользоваться шрифтами, выложенными в открытый доступ:

• Adobe Variable Font Prototype
• AmstelvarAlpha
• AvenirNext
• Decovar
• dT Jakob Variable Concept
• FF Meta Variable
• Gingham
• KairosSans
• Slovic
• VotoSerif

font-variation-settings

Спецификация

Свойство позволяет управлять вариациями шрифта, задавать как отрисовывается глиф (наклон, толщина линий, ширина символа). Исключение составляет ital, при котором могут заменяться глифы.

В значении свойства через запятую перечисляются названия вариаций и значения для них. Названия вариаций в кавычках, названия кастомных вариаций пишутся капсом.

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

Значение по умолчанию: normal (шрифт выглядит как обычно, настройки не применяются).

Предопределённые вариации:

ital — курсив.

Пример кода:

font-variation-settings: "ital" 1;

Демо:

See the Pen aKLXWW by yoksel (@yoksel) on CodePen.

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

Также в этом демо можно увидеть как огругляются неподдерживаемые значения. Можно задать, например, "ital" 0.5, и оно приведётся к единице, а все меньшие значения — к нулю.

slnt — наклон.

Пример кода:

font-variation-settings: "slnt" 1;

Демо:

See the Pen Font Variation: Slant by yoksel (@yoksel) on CodePen.

По идее, slnt — это наклон, а не курсив, то есть глифы не меняются, но в некоторых шрифтах такое поведение демонстрирует ital. Для демо был выбран KairosSans, в котором ital ведёт себя как slnt.

В отличие от ital, наклон может изменяться плавно.

opsz — оптический размер.

Пример кода:

font-variation-settings: "optz" 10;

Демо:

See the Pen Font Variation: Optical size by yoksel (@yoksel) on CodePen.

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

See the Pen Font Variation: Optical size for small font-size by yoksel (@yoksel) on CodePen.

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

wdth — ширина

Пример кода:

font-variation-settings: "wdth" 150;

Демо:

See the Pen Font Variation: Width by yoksel (@yoksel) on CodePen.

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

See the Pen Font Variation Width vs Transform Scale by yoksel (@yoksel) on CodePen.

Управление шириной глифа доступно во многих шрифтах.

wght — вес

Пример кода:

font-variation-settings: "wght" 900;

Демо:

See the Pen Font Variation: Weight by yoksel (@yoksel) on CodePen.

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

Полный список предопределённых вариаций можно найти в спецификации OpenType, там же есть подробное описание каждой из них.

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

Например, у шрифта Decovar есть целых 15 настроек, из которых только одна стандартная — управление весом линий, в итоге из одного шрифта можно извлечь огромное количество вариантов:

See the Pen Decovar is beautiful ❤️ by yoksel (@yoksel) on CodePen.

В этом случае каждый отдельный стиль текста может задаваться набором значений:

font-variation-settings: "BLDA" 913.8, "BLDB" 162.8, "SKLB" 1000;

Обратите внимание, что названия кастомных меток пишутся капсом.

А у Slovic — всего одна настройка, но она позволяет плавно переключаться между предустановленными стилями:

See the Pen Font Custom Variation: Style by yoksel (@yoksel) on CodePen.

Значения вариаций можно анимировать.

font-feature-settings

Спецификация

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

See the Pen Font Feature Settings by yoksel (@yoksel) on CodePen.

Фичи из демо:

• liga — лигатуры (когда для удобочитаемости два символа отображаются как один)
• smcp — отображение строчных как маленьких заглавных
• frac — отображение дробей
• onum — цифры в старом стиле
• zero — перечеркнутый ноль

Если фичу нужно включить, достаточно её имени, например:

font-feature-settings: "smcp", "onum";

Хотя запись типа "smcp" on помогает лучше понять что происходит в коде.

Если же нужно выключить, обязательно добавлять off:

font-feature-settings: "smcp" off, "onum" off;

Некоторые фичи включены по умолчанию, например, разные виды лигатур: clig, liga и rlig. Подробнее можно почитать в спецификации.

Здесь приведено лишь небольшое количество возможностей, полный список с подробными описаниями есть в спецификации OpenType.

Много примеров с кодом можно найти здесь: OpenType features in CSS.

Как уже говорилось выше, font-feature-settings — это низкоуровневая настройка. Спецификация рекомендует, по возможности, использовать высокоуровневые варианты, например:

• font-variant-ligatures для управления лигатурами (спецификация)
• font-variant-caps для приведения строчных к заглавным (спецификация)
• font-variant-numeric для управления отображением цифр (спецификация)

Больше вариантов можно найти в разделе спецификации Font Feature Properties.

font-feature-settings может использоваться для получения более или менее радикального варианта шрифта:

See the Pen Slovic with variations & features by yoksel (@yoksel) on CodePen.

Ещё интереснее распорядился фичами автор шрифта dT Jakob Variable Concept: он сделал не только вариативный шрифт, но и слоёный, и стиль для каждого из слоёв включается с помощью лигатур:

See the Pen dKZdRV by yoksel (@yoksel) on CodePen.

Не уверена, что это правильное использование лигатур, но вариант, безусловно, интересный.

Использование в реальной жизни

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

@font-face {
  font-family: 'MyFontVariable';
  src: url('source-sans-variable.woff2') format('woff2');
  font-weight: 1 999;
}

@font-face {
  font-family: 'MyFont';
  src: url('source-sans-regular.woff2') format('woff2'),
         url('source-sans-regular.woff') format('woff');
  font-weight: 400;
}

@font-face {
  font-family: 'MyFont';
  src: url('source-sans-black.woff2') format('woff2'),
         url('source-sans-black.woff') format('woff');
  font-weight: 900;
}

Затем с помощью @supports определяется поддержка настроек браузерами и задаётся нужный шрифт:

html {
  font-family: 'MyFont', sans-serif;
}

@supports (font-variation-settings: normal) {
  html {
    font-family: 'MyFontVariable', sans-serif;
}
}

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

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