Что такое переменные шрифты
Технология OpenType variable fonts, представленная в 2016 году совместными усилиями Adobe, Apple, Google и Microsoft, кардинально изменила возможности работы со шрифтами в цифровой среде. Вместо того чтобы загружать несколько статичных начертаний (Regular, Bold, Italic, Condensed), дизайнер получает единый файл, внутри которого закодированы бесконечные промежуточные состояния между полярными значениями осей.
Принципиальное отличие от традиционного подхода состоит в математической интерполяции: шрифтовой движок вычисляет форму глифа для любого произвольного значения параметра в реальном времени. Это стало возможным благодаря хранению контрольных точек кривых Безье не как абсолютных координат, а как дельт — отклонений от мастерного начертания.
Один файл формата .woff2 с переменным шрифтом может заменить 10–15 статичных начертаний, при этом суммарный размер загружаемых данных снижается на 30–60% в зависимости от семейства.
Оси вариации: стандартные и кастомные
OpenType спецификация определяет пять зарегистрированных осей, идентифицируемых четырёхсимвольными кодами в нижнем регистре. Кастомные оси используют теги в верхнем регистре и могут кодировать любой параметр, предусмотренный шрифтовым дизайнером.
Насыщенность штриха. Диапазон обычно от 100 (Thin) до 900 (Black). Наиболее распространённая ось, поддерживается свойством font-weight.
Ширина глифа. Значение 100% соответствует нормальной ширине, значения ниже дают конденсированное начертание, выше — расширенное.
Переключение между прямым и курсивным начертаниями. Дискретная ось: 0 — прямой, 1 — курсив. Не путать с осью наклона slnt.
Оптический размер. Позволяет автоматически адаптировать детализацию глифов под конкретный кегль: мелкий текст получает увеличенные контрформы.
Угол наклона знаков без изменения формы глифов (в отличие от курсива). Отрицательные значения наклоняют вправо, что соответствует типографической традиции.
Нестандартные оси задаются производителем шрифта и расширяют возможности до градации контраста штрихов, изменения высоты строчных и других параметров.
CSS-реализация и синтаксис
Современный CSS предоставляет два уровня управления переменными шрифтами: высокоуровневые свойства (font-weight, font-style, font-stretch) и низкоуровневое свойство font-variation-settings, дающее прямой доступ к осям по их четырёхсимвольным тегам.
Важная особенность: свойство font-variation-settings не наследуется инкрементально. Если вы задаёте несколько осей и в дочернем элементе переопределяете одну из них, остальные сбрасываются в значения по умолчанию. Рекомендуется использовать CSS-переменные для хранения значений осей и переопределять только нужные.
Производительность и оптимизация
Переменные шрифты однозначно выигрывают у наборов статичных начертаний при использовании более двух-трёх вариантов. Браузер выполняет одну сетевую транзакцию против нескольких, что особенно критично для HTTP/1.1-соединений и мобильных сетей с высокой латентностью.
Вместе с тем у больших переменных шрифтов (таблицы Hinting для нескольких осей) размер файла может превышать суммарный размер 2–3 статичных начертаний. В этом случае рекомендуется:
- Применять Unicode-range subsetting — исключать символы, отсутствующие в целевых языках
- Ограничивать диапазон загружаемых осей через font-weight: 300 600 вместо 100 900
- Использовать инструмент pyftsubset из пакета fonttools для точечного субсеттинга
- Задавать font-display: optional для некритичных декоративных шрифтов
Рендеринг переменных шрифтов в браузерах не вызывает заметных потерь производительности: вычисление промежуточных значений выполняется на GPU и занимает единицы микросекунд. Исключение — анимации по осям с одновременным применением к большим текстовым блокам, где возможны перерисовки слоёв.
Практические кейсы
Технология открывает несколько принципиально новых паттернов в типографическом дизайне, недоступных со статичными шрифтами:
Адаптивная оптическая компенсация
Ось opsz позволяет автоматически применять особые версии глифов при использовании мелких кеглей: увеличиваются апертуры, поднимается высота строчных, облегчаются тонкие элементы. Всё это — без ручного переключения начертаний.
Контент-чувствительная типографика
JavaScript-хук на ширину контейнера динамически меняет значение оси wdth, заставляя текст точно вписываться в блок без переносов. Актуально для заголовков с переменным числом символов.
Кинетическая типографика
CSS-анимации по осям wght и slnt создают органичное «дыхание» текста. Переход от светлого к жирному начертанию плавен, поскольку интерполируются контрольные точки, а не пиксели растровых битмапов.
Выводы
Переменные шрифты перестали быть экспериментальной технологией: поддержка в браузерах достигла 97%, все ведущие шрифтовые платформы предлагают переменные версии своих каталогов. Дизайнер, игнорирующий эту технологию сегодня, лишает себя инструмента тонкой настройки типографической системы, недостижимой при работе со статичными начертаниями.
Ключевой вывод прост: переменные шрифты — это не тренд, а новый базовый стандарт работы с типографикой в веб. Их освоение должно входить в профессиональный минимум любого дизайнера интерфейсов.
