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

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

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

Что они могут делать?
Переменные шрифты можно использовать для точной настройки простых параметров дизайна, таких как ширина. Вы когда-нибудь использовали шрифт, который кажется слишком темным или светлым? Наиболее распространенные параметры переменного шрифта, также известные как «оси», относятся к ширине и толщине. Это дает вам возможность немного затемнить его — например, когда вам нужно внести небольшие корректировки в вес, когда текст выбивается из темного фона. Или когда вам нужно расширить слово, чтобы выровнять строку текста на плакате, или заполнить пространство на блокировке логотипа.

Как использовать вариативные шрифты?
Не все шрифты вариативные, поэтому сначала нужно найти вариативный шрифт. Если вы хотите попробовать один из них без вложений, у Adobe Fonts есть несколько в их библиотеке, а также у Google Fonts.

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

Браузерная поддержка вариативных шрифтов также довольно хороша и открывает довольно забавные возможности для CSS-анимации в Интернете.