Поддержка вариативных шрифтов в Figma

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

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

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

В чем разница между статичными и вариативными шрифтами?

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

Что такое ось?

Ось — это выражение одного изменяемого свойства шрифта. Например, "ширина" (width) определяет, насколько узким или широким может быть символ. “Вес" (weight) — насколько легким или жирным он может быть.

Какие виды осей существуют?

Большинство осей содержат непрерывный диапазон значений, однако некоторые из них являются бинарными. Бинарная ось — это переключатель, то есть существует только два варианта: выключить или включить (в нашем примере — курсив или не курсив). Ось с диапазоном значений дает больше возможностей для увеличения или уменьшения свойства, например, наклона.

Как вариативные шрифты меняют процесс разработки

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

Посмотрим на вариативные шрифты в действии

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

1. Делайте тексты более читабельными

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

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

2. Создавайте переходы

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

Пример сверху: меняется “вес” (начертание) шрифта — соответственно меняется и ширина кнопки. Снизу — ширина остается неизменной, но шрифт становится более жирным за счет переключения оси Grade.

3. Размещайте шрифты в ограниченном пространстве

Занимаетесь ли вы локализацией дизайна или вам нужно уместить большое количество символов в ограниченном пространстве, вы можете использовать ось ширины (width axis), чтобы регулировать расстояние между буквами.

Сверху — пункты меню на английском языке, снизу — перевод на немецкий. Мы можем уместить их в той же панели, изменив расстояние между буквами.

4. Добавьте движения

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

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

Экспериментируйте!

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

Классные вариативные шрифты

ABC Whyte и Whyte Inktrap от Dinamo. ABC Whyte имеет плавные и резкие переходы, а Inktrap — грубоватые изогнутые стыки внутри букв.
GT Ultra от Grillitype. Эта универсальная типографская система сочетает в себе классический облик антиквы с динамизмом современных гротесков, бросая вызов современным представлениям о том, каким должен быть шрифт.
Cheee от OH no Type Co. Название этого шрифта — детское произношение слова “cheese” (сыр). Он выглядит странно, но восхитительно.
Fraunces от Undercase Type. Fraunces — шрифт в “псевдостаром стиле". В рамках этого стиля первостепенное значение имеет индивидуальность, а не правильное строгое построение букв.
Roboto Flex от Google Fonts. Этот проект с открытым исходным кодом модернизирует Roboto, превращая его в более мощную систему шрифтов, которая предоставляет вам больше возможностей для редактирования текстового контента и повышения его выразительности.
Noto Sans Display от Google Fonts. Шрифт с поддержкой латиницы, кириллицы и греческого языка, который составит идеальную пару другим шрифтам Noto Sans.
Anicons от Wenting Zhang и Hua Shu. Первый в мире цветной анимированный иконочный шрифт, основанный на иконках Material Design. Anicons — это эксперимент, сочетающий в себе две передовые шрифтовые технологии: вариативные и цветные шрифты.
WT Zaft² от WiseType. Zaft² — это 3 вариативных шрифта, каждый из которых включает уникальную ось управления и имеет свою собственную форму.