Как нарисовать вариативный шрифт: внутреннее устройство шрифтового файла

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

С момента анонса на конференции ATypI в 2016 году вариативные шрифты были внедрены в основные инструменты графического дизайна. Их можно использовать в программах Adobe, Figma и в большинстве браузеров. Сегодня вариативные шрифты стали незаменимым инструментом для дизайнеров, работающих в цифровой среде.

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

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

Дизайн-пространство—это система всех мастеров шрифта в гарнитуре шрифта и их взаимное расположение.

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

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

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

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

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

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

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

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

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

Давайте проанализируем вариативный шрифтовой файл на примере CoFo Peshka.

CoFo Peshka—шрифт с несколькими классическими осями интерполяции: насыщенность, ширина и наклон.

• Насыщенность: от Hairline до Black
• Ширина: от 0 до 1000
• Наклон: от -24° до 24°

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

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

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

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

Electric Blue от Font Spectrum интерполируется между предельно жирными и тонкими пиксельными формами: буквы переходят от отдельных, словно расплавленных элементов к полностью слитным очертаниям, создавая динамичный ретрофутуристический эффект, отсылающий к эстетике космической эры 1960-х и неонового сияния 1980-х.

Exposure Федерико Парра Барриоса позволяет управлять «насыщенностью чернил», переходя от еле пропечатанных пропадающих штрихов к насыщенным, заплывшим формам почти без просветов. Воспроизводит  ощущение печати старыми металлическими литерами.

CoFo Kabeltouw   •   Electric Blue   •   Exposure

LTR Very Bauble от Letterror плавно переходит от чистого, заостренного гротеска к более острым тосканским засечкам. По мере изменений добавляются прорези, шипы и мелкие штрихи, постепенно придающие буквам всё больше текстуры и характерной шероховатости.

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

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

В шрифте Whyte от Dinamo в процессе интерполяции компенсаторы, также известные как «ловушки для чернил, увеличиваются и становятся главными стилеобразующими элементами шрифта.

LTR Very Bauble   •   Sweet Lily   •   Seasummer   •   Whyte

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

Wind Хансье ван Халем интерполирует пиксельные элементы по полной окружности в  360°, создавая плавное круговое движение в знаках, которое реагирует на направление ветра.

Kablammo студии Vectro Type интерполирует декоративные элементы игриво и непредсказуем, отсылая к визуальной культуре 90-х и мультяшной эстетике.

Cheee от Ohno Type имеет две оси с говорящими названиями: Дрожжи и Гравитация. Гравитация перемещает «вес» букв от центра вниз, а Дрожжи раздувает очертания во все стороны.

WHOA от Vectro Type играет с масштабированием, вращением и смещением форм. Контурные очертания сохраняют видимыми все промежуточные слои, создавая иллюзию трёхмерного пространства.

Invert   •   Wind   •   Kablammo   •   Cheee   •   WHOA

Purple Haze от Font Spectrum интерполируется от читаемого спокойного начертания с мелкими пикселями к экстремально декоративным формам, создавая эффекты наложения по мере увеличения пикселей.

Gridlite от Rosetta Type интерполирует модульные элементы букв и фона по нескольким осям.  Изменяются размер и форма пикселей как внутри букв, так и в окружающем пространстве. Это позволяет буквам и фону плавно трансформироваться, сохраняя при этом чёткую сеточную структуру.

Silver Coil от Font Spectrum интерполирует сдвиг чередующихся черных и белых полос.  Сдвиг на один шаг из двух полос образует эффект петли. В закольцованной анимации этого шрифта возникает иллюзия непрерывного движения по объемной форме.

Gridlite   •   Purple Haze   •   Silver Coil

Рассмотрим подробнее, как работает интерполяция—невидимый механизм, определяющий движение точек между мастерами.

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

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

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

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

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

Для обеспечения плавной интерполяции:
• Сохраняйте одинаковое количество и тип точек.

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

• Используйте наложения и открытые углы по мере необходимости.

Первый пример: два мастера на оси ширины. Буква Z имеет по одной точке в местах присоединения диагонали. Проблема: при интерполяции диагональ становится слишком толстой.

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

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

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

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

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

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

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

Dinamo Font Gauntlet: инструмент для тестирования интерполяции
Samsa: инструмент для просмотра параметров и настроек вариативного шрифта
Доклад Лоренса Пенни на конференции ATD-3 (2025) «Математика вариативных шрифтов»

Автор текста: Анна Хораш
Редактор: Екатерина Баранникова
Иллюстрации: Егор Головырин