Переменные шрифты: революция в веб-типографике

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

Переменный шрифт (variable font) — это шрифтовой файл формата OpenType/TrueType, содержащий не одно фиксированное начертание, а непрерывный диапазон вариаций по одной или нескольким осям. Технология основана на математической интерполяции: дизайнер шрифта создаёт «мастеры» (крайние точки) на каждой оси, а алгоритм рассчитывает промежуточные состояния.

До появления переменных шрифтов каждое начертание гарнитуры хранилось в отдельном файле. Семья из 9 начертаний (Thin, Light, Regular, Medium, SemiBold, Bold, ExtraBold, Black + Italic) требовала 9 файлов. Это создавало серьёзную проблему для веб-производительности: каждый файл — это отдельный HTTP-запрос и дополнительные килобайты.

Переменный шрифт заменяет всю семью одним файлом. При этом браузер может отображать любое промежуточное значение — например, font-weight: 453 — с точностью до единицы.

Оси вариации: зарегистрированные и кастомные

Спецификация OpenType определяет пять зарегистрированных осей с стандартными именами (четырёхбуквенные теги в нижнем регистре):

Кроме стандартных, шрифт может содержать кастомные оси — теги в верхнем регистре, придуманные дизайнером. Примеры: GRAD (Grade, изменение оптической тёмности без изменения ширины), CASL (Casual в Recursive — переход от геометрического к неформальному стилю), XOPQ (плотность обводки).

CSS-синтаксис переменных шрифтов

Подключение

Переменный шрифт подключается через стандартный @font-face. Ключевое отличие — диапазон вместо конкретного значения:

@font-face {
  font-family: 'Inter';
  src: url('Inter-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

Использование зарегистрированных осей

Для зарегистрированных осей (weight, stretch, style) используются стандартные CSS-свойства. Переменные шрифты позволяют задавать любое значение в диапазоне:

h1 {
  font-family: 'Inter', sans-serif;
  font-weight: 750; /* нестандартное значение — доступно в VF */
}

.subheading {
  font-weight: 350; /* между Light и Regular */
}

Использование кастомных осей

Кастомные оси и низкоуровневый доступ к стандартным — через свойство font-variation-settings:

.display-heading {
  font-variation-settings:
    'wght' 800,
    'wdth' 110,
    'GRAD' 50;
}

/* Анимация жирности при наведении */
.animated-text {
  transition: font-variation-settings 0.3s ease;
}

.animated-text:hover {
  font-variation-settings: 'wght' 700;
}

Оптический размер: автоматическая адаптация

Ось оптического размера (opsz) — одна из наиболее значимых с точки зрения читаемости. Исторически металлические шрифты создавались в разных размерах с разной геометрией: для 8-пунктовой версии делались более широкие засечки и открытые апертуры, для 72-пунктовой — более тонкие и элегантные.

Переменные шрифты с осью opsz воссоздают эту логику: при установке font-optical-sizing: auto браузер автоматически подбирает оптимальные параметры для текущего кегля. Гарнитуры с этой возможностью: Source Serif 4, Amstelvar, Spectral.

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

Экономия на размере файла

Переменный шрифт, как правило, крупнее одного начертания, но значительно меньше полной семьи. Сравнение для Inter:

• Inter Regular (WOFF2) — около 90 Кб
• 9 начертаний Inter по отдельности — около 680 Кб суммарно
• Inter Variable (все начертания) — около 295 Кб

При использовании более 2–3 начертаний переменный шрифт становится выгоднее по размеру и по количеству запросов.

Стратегия внедрения

Рекомендуемый порядок работы с переменными шрифтами в проекте:

1. Проверьте, поддерживает ли выбранный шрифт нужные оси (через wakamai.fondue.com).
2. Подключите через @font-face с диапазоном font-weight.
3. Используйте стандартные свойства (font-weight, font-stretch) для основных вариаций.
4. Применяйте font-variation-settings только для кастомных осей.
5. Проверьте поддержку с помощью CSS @supports (font-variation-settings: normal) и задайте фолбек.

Примечательные переменные шрифты

Несколько гарнитур, демонстрирующих возможности технологии с разных сторон:

• Inter Variable — UI-гротеск, разработанный Расмусом Андерссоном. Оси: wght, slnt. Широко используется в интерфейсах.
• Recursive — экспериментальный шрифт с осями MONO (моноширинность), CASL (casual/formal), wght, slnt, ital. Уникальная возможность переключаться между засечками и гротеском.
• Source Serif 4 — антиква Adobe с осями wght, wdth, opsz, ital. Отличный пример оптической оси в действии.
• Fraunces — дисплейная антиква с осями wght, opsz, SOFT, WONK. Пример творческого использования кастомных осей.
• Amstelvar — исследовательский шрифт Google Fonts с широким набором параметрических осей.