Переменные шрифты: революция в веб-типографике
Когда в сентябре 2016 года консорциум OpenType представил спецификацию OpenType 1.8 с поддержкой variable fonts, отраслевые наблюдатели охарактеризовали это как наиболее значимое изменение в шрифтовых технологиях со времен появления PostScript в 1985 году. Прошло несколько лет — и эта оценка подтвердилась на практике.
Переменный шрифт (variable font) — это единый файл, содержащий целый диапазон начертаний, которые ранее требовали отдельных файлов для каждого варианта: Regular, Bold, Italic, Light, Condensed и так далее. Технологически это достигается за счет описания не конкретных контуров букв, а математических функций интерполяции между крайними точками оси изменений.
Что такое оси вариации
Ключевое понятие переменных шрифтов — ось вариации (variation axis). Ось определяет параметр, который может изменяться непрерывно в заданном диапазоне. OpenType 1.8 зарегистрировал четыре стандартных оси:
| Тег оси | Параметр | Диапазон | CSS-свойство |
|---|---|---|---|
| wght | Насыщенность (Weight) | 1–1000 | font-weight |
| wdth | Ширина (Width) | 1–1000 | font-stretch |
| ital | Курсив (Italic) | 0–1 | font-style |
| slnt | Наклон (Slant) | -90 – 90 | font-style: oblique |
Помимо зарегистрированных стандартных осей, дизайнеры шрифтов могут создавать произвольные (custom) оси с четырехбуквенным тегом в нижнем регистре. Примеры: оптический размер (opsz), «расплавленность» форм, степень засечек, контрастность штрихов.
Преимущества для веб-производительности
До появления переменных шрифтов типичный веб-проект, использующий шрифт в четырех начертаниях (Regular 400, Italic 400i, Bold 700, Bold Italic 700i), загружал четыре отдельных WOFF2-файла. Суммарный объем мог достигать 200–400 КБ. Переменный шрифт, покрывающий весь диапазон начертаний, часто весит меньше двух традиционных файлов вместе взятых.
Данные W3C (2024): Использование переменных шрифтов вместо статических комплектов из 4+ начертаний снижает объем загружаемых шрифтовых данных в среднем на 42–67%, в зависимости от гарнитуры и количества требуемых начертаний.
CSS и font-variation-settings
В CSS доступ к осям вариации осуществляется через свойство font-variation-settings. Для стандартных осей лучше использовать высокоуровневые свойства — font-weight, font-stretch — они правильно наследуются и работают с переходами CSS. Для пользовательских осей применяется низкоуровневый синтаксис.
Поддержка браузерами
По данным Can I Use на начало 2025 года, переменные шрифты поддерживаются браузерами, охватывающими более 97% пользователей глобальной веб-аудитории. Chrome поддерживает переменные шрифты с версии 66 (апрель 2018), Firefox — с версии 62, Safari — с версии 11, Edge — с версии 17. Единственное исключение — Internet Explorer 11, официальная поддержка которого прекращена Microsoft в 2022 году.
Практические рекомендации
При внедрении переменных шрифтов в веб-проект следует придерживаться нескольких ключевых принципов:
- Использовать формат WOFF2 как основной (максимальное сжатие, поддержка всеми современными браузерами)
- Указывать диапазон поддерживаемых значений в
@font-faceчерез дескрипторыfont-weight: 100 900 - Добавлять
font-display: swapдля предотвращения FOIT (Flash of Invisible Text) - Применять
unicode-rangeдля загрузки только необходимых глифов - Тестировать отображение на Windows с ClearType — рендеринг отличается от macOS
"Переменные шрифты — это не просто технический прогресс в плане экономии данных. Это инструмент, дающий типографу непрерывный контроль над формой, который был невозможен в эпоху цифровых статических шрифтов."
— Тим Браун, руководитель типографики Adobe, 2022Текущий ландшафт переменных шрифтов
К 2025 году ведущие шрифтовые компании — Adobe Fonts, Google Fonts, Monotype — выпустили переменные версии большинства своих флагманских гарнитур. Особого внимания заслуживает обновление библиотеки Google Fonts: переменные версии Inter, Roboto Flex, Source Serif 4 и Nunito охватывают расширенные диапазоны осей, недоступные в статических комплектах.
Для экспериментального и editorial-дизайна активно используются шрифты с нестандартными осями: Decovar (декоративные трансформации), Amstelvar (оптические корректировки), Recursive (многоосевой переключатель между монострочным и пропорциональным). Их применение в заголовочных элементах с CSS-анимацией оси вариации открывает возможности, ранее доступные только средствами Flash или SVG.