Переменный шрифт, или variable font, - это не просто ещё один формат рядом с TTF, OTF и WOFF2. Это способ хранить в одном OpenType-файле диапазон начертаний: вес, ширину, наклон, optical size и другие параметры. Вместо отдельных файлов Regular, Medium, Bold и Condensed семейство может иметь один файл с осями вариации.
Техническая модель описана в OpenType Font Variations Overview. Важно понимать: variable font остаётся частью OpenType-экосистемы. Для веба его обычно доставляют как WOFF2, а для архива или установки можно встретить TTF/OTF-форму.
Зачем это нужно
Классическое семейство хранит каждое начертание отдельным файлом. Если сайт использует Regular, Medium, Bold и Italic, браузер скачивает несколько ресурсов. Переменный шрифт может заменить часть этого набора одним файлом. Но выгода появляется только если вы реально используете диапазон или несколько начертаний. Если на сайте нужен один Regular, variable font может оказаться тяжелее статического subset.
| Сценарий | Статические файлы | Variable font |
|---|---|---|
| Один вес Regular | Обычно проще и легче | Может быть лишним |
| Regular + Bold + Medium | Несколько файлов | Один файл может быть выгоднее |
| Адаптивная типографика | Нужно заранее выбрать веса | Вес и ширину можно менять плавно |
| Большое семейство | Много запросов и кэша | Один диапазон вместо набора файлов |
| Старые приложения | Часто стабильнее | Поддержка зависит от среды |
Главное правило: сравнивайте не идею, а реальные файлы. Иногда variable WOFF2 меньше набора статических WOFF2. Иногда нет.
Оси: зарегистрированные и пользовательские
Ось вариации - это параметр, который меняет форму глифов или метрики. OpenType хранит диапазон значений, а приложение выбирает конкретную точку. Зарегистрированные оси перечислены в OpenType Design-Variation Axis Tag Registry.
| Ось | Что меняет | Типичный смысл |
|---|---|---|
| `wght` | Weight | Толщина штриха: от тонкого к жирному |
| `wdth` | Width | Ширина знаков: condensed, normal, expanded |
| `opsz` | Optical size | Оптическая подстройка под мелкий или крупный кегль |
| `slnt` | Slant | Наклон без отдельной курсивной конструкции |
| `ital` | Italic | Переключение курсивного дизайна, если он заложен |
Кроме зарегистрированных осей бывают custom axes. Они полезны для экспериментальных гарнитур, но хуже переносятся между инструментами: не каждый редактор покажет понятный контрол.
`wght`: не просто Bold
Ось `wght` позволяет выбрать значение внутри диапазона, например 350, 480 или 720. Для интерфейса это полезно: можно точнее настроить иерархию, не ограничиваясь Regular и Bold.
Но есть риск. Если дизайн использует слишком много близких значений веса, система становится хаотичной: заголовки почти не отличаются от подписи, а CSS превращается в набор случайных чисел. Лучше заранее определить шкалу: например 400 для текста, 520 для акцентов, 700 для заголовков.
`wdth`: адаптивная ширина
Ось `wdth` помогает там, где текст должен помещаться в плотный интерфейс: таблицы, навигация, кнопки, карточки. Вместо уменьшения font-size можно слегка сузить шрифт. Это часто выглядит аккуратнее, чем заставлять текст переноситься или обрезаться.
Но `wdth` не должна становиться способом втиснуть любую надпись в любой контейнер. Если русская кнопка не помещается, иногда правильнее изменить текст, сетку или размер кнопки.
`opsz`: optical size
Ось `opsz` меняет дизайн под размер текста. Мелкий кегль обычно требует более открытых форм, большего контраста с осторожностью и устойчивых деталей. Крупный заголовок может позволить более тонкие формы и плотную композицию.
В CSS есть `font-optical-sizing`, а подробное поведение variable fonts описывает MDN Variable fonts guide. Если у шрифта есть `opsz`, браузер может использовать его автоматически, но это нужно проверять на реальном файле.
Как подключать в CSS
Лучше начинать с обычных высокоуровневых свойств: `font-weight`, `font-stretch`, `font-style`, `font-optical-sizing`. Низкоуровневое `font-variation-settings` описано на MDN: font-variation-settings. Его стоит использовать, когда обычных свойств недостаточно или нужна custom axis.
```css @font-face { font-family: "Site Variable"; src: url("/fonts/site-variable.woff2") format("woff2"); font-weight: 300 800; font-stretch: 75% 110%; font-display: fallback; }
.article-title { font-family: "Site Variable", system-ui, sans-serif; font-weight: 720; font-stretch: 96%; font-optical-sizing: auto; } ```
Для custom axis пример будет таким:
```css .logo { font-variation-settings: "GRAD" 80; } ```
Если ось зарегистрирована, предпочтительнее использовать нормальное CSS-свойство. Оно понятнее, лучше наследуется и чаще корректно обрабатывается браузером.
Что проверять
| Проверка | Зачем |
|---|---|
| Диапазон осей | CSS не должен запрашивать значение за пределами файла |
| Размер WOFF2 | Variable должен выигрывать у набора статических файлов или давать реальную гибкость |
| Кириллица | Оси должны хорошо выглядеть не только на латинице |
| Метрики | Вес и ширина не должны ломать высоту строк и кнопки |
| Fallback | До загрузки webfont текст должен оставаться читаемым |
| Print/export | Не все среды одинаково хорошо работают с вариациями |
| Дизайн-шкала | В проекте должны быть правила, какие значения веса и ширины использовать |
Особенно важно тестировать кириллицу. В некоторых гарнитурах латинская часть проработана лучше, а кириллица на крайних значениях `wght` или `wdth` выглядит хуже.
Когда лучше не использовать variable font
Переменный шрифт не обязателен для каждого сайта. Если проект использует один вес, не анимирует типографику и не нуждается в адаптивной ширине, статический WOFF2 subset может быть быстрее и проще.
Также variable font не должен быть оправданием для бесконтрольной типографики. Если каждый блок получает уникальный `font-weight: 537`, интерфейс теряет систему. Переменность полезна, когда она подчинена дизайн-правилам.
Итог
Variable fonts дают шрифту диапазон, а не один заранее нарезанный набор файлов. Они особенно полезны для больших семейств, адаптивных интерфейсов, точной настройки веса и optical size. Но решение должно быть проверено на реальном WOFF2, кириллице, fallback и метриках. Хороший variable font ускоряет и упрощает систему; плохое подключение просто добавляет ещё один тяжелый файл.