Variable fonts: полное руководство по переменным шрифтам

Variable fonts (переменные шрифты) — одна из самых глубоких перемен в веб-типографике за последние десять лет. Вместо десятка отдельных файлов для каждого веса (Thin, Light, Regular, Medium, Bold) вы грузите один файл и получаете доступ к непрерывной оси вариаций. Хотите вес 432 — пожалуйста. Хотите слегка сжатый шрифт для узких колонок — пожалуйста. И всё это в одном файле размером с обычный Regular. По факту это означает: меньше трафика, тоньше контроль над иерархией и принципиально новые приёмы в анимации.

Формат специфицирован W3C в 2017 году, и сегодня variable fonts поддерживаются во всех современных браузерах — Chrome, Firefox, Safari, Edge. В каталоге FontHub несколько переменных шрифтов, включая Inter и Roboto. Подключить их через наш CDN можно одной строкой CSS, без необходимости вручную генерировать подмножества.

Переменный шрифт построен на понятии «оси» (axis) — непрерывного параметра, вдоль которого меняется форма букв. У каждой оси есть четырёхбуквенный тег, стандартизированный спецификацией OpenType. Самые распространённые: wght (вес от 100 до 900), wdth (ширина от 50% до 200% — узкое к расширенному), opsz (оптический размер — оптимизация под конкретный кегль), slnt (наклон от −20° до 0°), ital (полужирный флаг курсивы: 0 или 1).

Помимо стандартных осей, у шрифта могут быть кастомные, авторские оси. Например, у Decovar — экспериментального шрифта от Дэвида Джонатана Росса — есть оси inline (контурность букв) и shadow (теневая заливка). У Roboto Flex — десяток осей, включая Grade (плотность), YOPQ (толщина горизонтальных штрихов) и XTRA. Эти оси можно анимировать через CSS transitions, что открывает новые приёмы в продуктовом дизайне — от hover-эффектов на кнопках до анимации текста на лендингах.

Синтаксис @font-face для переменного шрифта практически идентичен обычному. Главное отличие — нужно явно указать диапазоны осей через дескриптор font-variation-settings в правиле @font-face. Современные браузеры читают этот дескриптор и подхватывают доступные оси автоматически. Пример:

@font-face { font-family: 'Inter Variable'; src: url('inter.woff2') format('woff2-variations'); font-weight: 100 900; }

Обратите внимание на запись font-weight: 100 900 — это означает, что шрифт поддерживает весь диапазон весов от 100 до 900. Старые браузеры, не понимающие этот синтаксис, возьмут только 100. Для надёжности можно подключить и статические начертания как fallback, особенно если у вас значительная доля трафика со старых устройств.

Самый распространённый вопрос при работе с variable fonts: использовать font-variation-settings или ограничиться стандартным font-weight? Ответ зависит от задачи. Если вам нужен просто другой вес — используйте font-weight. Он работает везде, в том числе в IE11 (софт-фоллбэк), и не ломает наследование. font-variation-settings же нужен, когда вы хотите выйти за пределы стандартных 100–900 или анимировать ось.

Пример: для hover-эффекта на кнопке, где вес плавно меняется с 400 на 600, font-variation-settings подходит идеально. CSS transition работает с этим свойством без артефактов, и браузер плавно интерполирует форму букв. Для обычного weight-change в иерархии заголовков лучше держаться font-weight — он короче в записи и не «затирает» другие оси, если вы их используете где-то ещё.

Особый случай — анимация по нестандартным осям. Например, у шрифта с осью wdth можно сделать «дыхание» текста, меняя ширину от 75 до 100 по таймеру. font-variation-settings: 'wdth' 90; transition: font-variation-settings 0.3s ease. Подобные эффекты невозможно воспроизвести статическими шрифтами без JS-переключения файлов.

Variable fonts экономят трафик, но не всегда экономят память. Один переменный файл может весить 200 КБ вместо 11 файлов по 40 КБ (440 КБ). На первый взгляд — выигрыш очевиден. Но если вы используете только 3 начертания из 9, экономии нет: вы всё равно грузите все 9. Решение — subsetting через pyftsubset или fonttools: можно вырезать неиспользуемые оси и оставить только нужный диапазон.

Второй подводный камень — рендер на старых версиях Safari. До Safari 11 variable fonts не поддерживались вообще, до Safari 13 — были проблемы с font-variation-settings в transition. Если у вас значимая доля iOS-трафика, всегда тестируйте на реальных устройствах, а не только в симуляторе. И держите статический fallback.

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

Variable fonts — мощный инструмент, но не серебряная пуля. Если ваш проект использует два-три веса и не планирует расширяться, статические шрифты будут проще: меньше сценариев для тестирования, меньше вероятность нарваться на рендер-баги. Если же у вас продуктовый интерфейс с тонкой иерархией (10+ уровней веса), лендинги с типографическими акцентами или анимациями — variable fonts окупят себя с первого релиза. Выбирайте осознанно, и этот формат раскроет свои сильные стороны.