Вариативные шрифты: как один файл заменяет целое семейство и ускоряет сайт

Что такое вариативный шрифт

Вариативный шрифт (variable font) — это один файл, внутри которого хранится не отдельное начертание, а непрерывный диапазон начертаний. Вместо того чтобы держать десяток файлов вроде Light, Regular, Bold и Black, вы получаете единый контейнер, из которого браузер «вычисляет» любую промежуточную форму буквы. Технология была представлена в 2016 году как часть спецификации OpenType 1.8 совместными усилиями Adobe, Apple, Google и Microsoft.

Ключевая идея — интерполяция. Дизайнер задаёт два крайних состояния символа, например самое тонкое и самое жирное, а математика формата достраивает все промежуточные толщины. Благодаря этому вы можете задать вес не только 400 или 700, но и любое дробное значение, скажем 512, и получить корректный глиф без ступенчатых переходов.

Формат опирается на таблицу gvar внутри файла и распространяется в контейнерах TTF и WOFF2. Именно WOFF2 стал стандартом для веба: он использует сжатие Brotli и уменьшает размер файла на 20–30% по сравнению с обычным WOFF, что особенно важно для крупных вариативных семейств.

Оси вариаций и как они работают

Каждый параметр, который можно плавно менять, называется осью (axis). Оси делятся на зарегистрированные (стандартизированные консорциумом) и пользовательские, которые придумывает автор шрифта. У зарегистрированных осей есть четырёхбуквенные теги в нижнем регистре, у пользовательских — в верхнем.

Самая распространённая ось — вес (wght). За ней идут ширина (wdth), наклон (slnt), настоящий курсив (ital) и оптический размер (opsz), который подстраивает контраст и детализацию под кегль. Оптическая ось особенно ценна: мелкий текст получает более крепкие штрихи, а заголовки — тонкие изящные засечки.

• wght — насыщенность, обычно диапазон от 100 до 900;
• wdth — ширина знаков в процентах от нормальной;
• slnt — угол наклона в градусах, чаще всего от 0 до −12;
• ital — переключение на курсивные формы (0 или 1);
• opsz — оптический размер, подстройка под кегль в пунктах.

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

Подключение через CSS

Начинается всё с правила @font-face, но синтаксис немного отличается от обычного. В свойстве src указывают формат с суффиксом supports variations или современный тег woff2-variations, а диапазоны весов и растяжений задают не одним числом, а парой значений через пробел.

Далее осями управляют двумя способами. Стандартные оси имеют «высокоуровневые» CSS-свойства: font-weight, font-stretch и font-style принимают весь заявленный диапазон. Для тонкой настройки и пользовательских осей есть низкоуровневое свойство font-variation-settings, где вы напрямую перечисляете теги и их значения.

Важно помнить о приоритете: если можно задать параметр через font-weight, используйте именно его, а не font-variation-settings. Высокоуровневые свойства корректно анимируются и наследуются, тогда как прямая работа с тегами считается «последним средством» и не всегда предсказуемо взаимодействует с наследованием стилей.

Экономия трафика и производительность

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

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

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

Субсеттинг и оптимизация кириллицы

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

Инструмент pyftsubset из пакета fontTools позволяет оставить только нужные диапазоны Unicode и при этом сохранить оси вариаций. Дополнительно применяют технику unicode-range в CSS: браузер скачивает кириллический поднабор лишь тогда, когда на странице действительно встречаются символы этого диапазона.

• разбейте шрифт на латинский и кириллический субсеты;
• пропишите для каждого свой @font-face с unicode-range;
• сохраните оси через флаг, отвечающий за таблицы вариаций;
• отдавайте файлы в WOFF2 с заголовками долгого кэширования.

Такой подход сокращает первичную загрузку в разы: пользователь, читающий русский текст, не тянет вьетнамскую диакритику или полный греческий алфавит. Для крупных порталов это ощутимая экономия и заметный прирост в метриках Core Web Vitals.

Управление отрисовкой: font-display

Даже лёгкий шрифт грузится не мгновенно, и от стратегии показа зависит, увидит ли пользователь пустоту или временный системный шрифт. За это отвечает дескриптор font-display внутри @font-face. Его значение напрямую влияет на метрику сдвига макета CLS и на воспринимаемую скорость сайта.

Значение swap показывает резервный шрифт сразу и меняет его на нужный после загрузки — текст всегда виден, но возможен заметный «прыжок». Значение optional отдаёт приоритет стабильности: если шрифт не успел прийти за отведённое короткое окно, браузер оставит системный и не станет менять его на текущей загрузке страницы.

Для ускорения также используют предзагрузку: тег link с атрибутом rel="preload" и type="font/woff2" заставляет браузер запросить файл заранее. Комбинация preload плюс продуманный font-display обычно даёт наилучший баланс между скоростью и отсутствием визуальных скачков.

Поддержка браузерами и запасные варианты

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

Тем не менее хорошей практикой остаётся прогрессивное улучшение. Через CSS-правило @supports (font-variation-settings: normal) можно подать вариативную версию поддерживающим браузерам, а всем остальным — набор обычных статических начертаний. Так вы гарантируете читаемость в любом окружении.

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

Инструменты и практические шаги внедрения

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

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

• fontTools (pyftsubset) — субсеттинг и обработка таблиц вариаций;
• glyphhanger — автоматический подбор используемых символов;
• Wakamai Fondue — инспекция осей и возможностей файла;
• Lighthouse — контроль CLS и скорости загрузки шрифтов.

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

Источники

• Microsoft Typography, документация спецификации OpenType Font Variations
• MDN Web Docs (Mozilla), руководство «Variable fonts guide»
• Google Fonts Knowledge, материалы по вариативным шрифтам и веб-производительности