Что такое переменный шрифт
Переменный шрифт (variable font) — это файл формата OpenType версии 1.8, содержащий не одно фиксированное начертание, а математически описанное пространство дизайна, внутри которого возможно плавное перемещение по заданным осям. Вместо того чтобы загружать несколько отдельных файлов — Regular, Bold, Light, Italic — вы загружаете один, который содержит весь диапазон значений между крайними точками.
Технология была представлена совместно Microsoft, Google, Apple и Adobe в 2016 году в рамках спецификации OpenType 1.8. К 2025 году поддержка браузеров достигла 97%+ для основных осей.
Зарегистрированные оси
Спецификация OpenType определяет пять зарегистрированных осей с короткими четырёхбуквенными идентификаторами:
| Ось | Тег | Диапазон | CSS-свойство |
|---|---|---|---|
| Weight (насыщенность) | wght | 1–1000 | font-weight |
| Width (ширина) | wdth | 25–200% | font-stretch |
| Italic (курсив) | ital | 0 или 1 | font-style: italic |
| Slant (наклон) | slnt | -90°–90° | font-style: oblique |
| Optical size (оптический размер) | opsz | зависит от шрифта | font-optical-sizing |
Оптический размер — недооценённая ось
Ось opsz заслуживает отдельного внимания. Она автоматизирует то, что типографы делали вручную столетиями: у гарнитур существовали специальные варианты для малых кеглей — с более широкими штрихами, увеличенным счётчиком (counter) и упрощёнными засечками — и отдельные версии для заголовочного набора.
В CSS достаточно добавить: font-optical-sizing: auto; — браузер сам выберет подходящее значение оси на основе font-size.
Кастомные оси
Помимо зарегистрированных осей, дизайнер шрифта может создать произвольные оси с четырёхбуквенными идентификаторами в верхнем регистре. Они управляются через свойство font-variation-settings:
font-variation-settings: 'wght' 700, 'wdth' 85, 'GRAD' 50;
}
Примеры распространённых кастомных осей:
- GRAD (Grade) — изменяет видимую насыщенность без влияния на метрики символов (полезно для тёмного/светлого режимов)
- XOPQ, YOPQ — прозрачность штрихов (используется в гарнитурах Google)
- WONK — переключение между «стандартными» и «нестандартными» формами некоторых символов (Roboto Flex)
Производительность
Один из главных аргументов в пользу переменных шрифтов — оптимизация загрузки. Вместо загрузки четырёх файлов (Regular + Bold + Light + Italic) загружается один. На практике картина сложнее:
- Файл переменного шрифта, как правило, крупнее одного статичного начертания, но меньше суммы всех начертаний, которые он заменяет.
- Для проекта, использующего только Regular и Bold, переход на переменный шрифт может не дать выигрыша в размере.
- Формат woff2 обязателен для веба — он обеспечивает 30–50% сжатие по сравнению с OpenType/TTF.
Работа в CSS: практические паттерны
Правильная декларация переменного шрифта через @font-face:
font-family: 'Inter';
src: url('fonts/Inter-Variable.woff2') format('woff2-variations');
font-weight: 100 900; /* диапазон */
font-display: swap;
}
Использование CSS Custom Properties для создания гибкой типографической системы:
--font-weight-body: 400;
--font-weight-heading: 650;
}
@media (prefers-color-scheme: dark) {
:root {
--font-weight-body: 375; /* GRAD для тёмного фона */
}
}
Свойство font-variation-settings переопределяет font-weight, font-stretch и другие высокоуровневые свойства. Используйте его только тогда, когда нужен доступ к осям, не имеющим CSS-эквивалента.
Какие переменные шрифты использовать в 2025
Рекомендованные гарнитуры с богатым набором осей:
- Inter Variable — оси wght, wdth, opsz; отличная кириллица; идеален для интерфейсов
- Roboto Flex — 12 осей; Google Fonts; широкие кастомные возможности
- Fraunces — display-антиква с осями WONK и SOFT; для заголовков
- Source Serif 4 — Adobe; оси wght и opsz; для длинных текстов
- Recursive — экспериментальная; оси от моноширинной до пропорциональной; CASL (casual)