Плавное изменение веса вариативного шрифта. Один файл — бесконечное число начертаний.
Что такое вариативные шрифты
Традиционный шрифт существует как набор отдельных файлов: Regular, Bold, Italic, Light, Medium — каждое начертание отдельный файл. Для типичного проекта веб-дизайнер загружает 4–8 таких файлов, каждый весом 50–200 KB. Это создаёт нагрузку на производительность и ограничивает гибкость типографики.
Вариативные шрифты (Variable Fonts), стандартизированные в рамках OpenType 1.8 в сентябре 2016 года совместными усилиями Apple, Google, Microsoft и Adobe, решают эту проблему радикально. Один файл вариативного шрифта содержит полный диапазон допустимых состояний шрифта — от ультратонкого до сверхжирного, от узкого до широкого — а интерполяция между крайними точками выполняется математически на уровне рендерера.
Архитектура формата: как это работает
Вариативный шрифт строится вокруг концепции «осей вариации» (variation axes). Ось — это числовой параметр, определяющий один аспект внешнего вида шрифта. Для каждой оси шрифтовой дизайнер задаёт минимальное значение, максимальное значение и значение по умолчанию.
В файле хранятся «мастера» — полностью описанные начертания в ключевых точках оси. Промежуточные состояния рассчитываются как линейная интерполяция между мастерами. Например, для оси веса мастерами могут быть Thin (100) и Black (900) — всё остальное рассчитывается автоматически.
Поддержка браузерами
Вариативные шрифты поддерживаются всеми современными браузерами с 2018 года: Chrome 66+, Firefox 62+, Safari 11+, Edge 17+. Глобальное покрытие составляет более 97% пользователей по данным Can I Use (2024).
Пять зарегистрированных осей OpenType
Консорциум OpenType зарегистрировал пять «официальных» осей с фиксированными четырёхбуквенными тегами. Дополнительные оси могут определять сами дизайнеры шрифтов (нестандартные оси обозначаются заглавными тегами).
| Ось | CSS-тег | Диапазон | Описание |
|---|---|---|---|
| Weight | wght |
1–1000 | Жирность штриха. Заменяет font-weight. |
| Width | wdth |
75–125% | Ширина символов. Заменяет font-stretch. |
| Italic | ital |
0–1 | Переключение между прямым и курсивным. |
| Slant | slnt |
-90–90° | Наклон букв без изменения их формы. |
| Optical size | opsz |
Зависит от шрифта | Оптимизация для конкретного размера набора. |
CSS-синтаксис: два способа управления
В CSS вариативные оси управляются двумя способами: через стандартные свойства и через низкоуровневое свойство font-variation-settings.
Преимущества для производительности
Одно из ключевых практических преимуществ вариативных шрифтов — сокращение размера загружаемых ресурсов. Типичная семья из 4 начертаний (Regular, Bold, Italic, Bold Italic) в формате WOFF2 занимает порядка 200–320 KB суммарно. Вариативный аналог той же семьи в WOFF2 — 60–140 KB, при этом предоставляя доступ к полному диапазону начертаний.
- Сокращение HTTP-запросов (1 вместо 4–8)
- Уменьшение суммарного веса шрифтовых ресурсов на 30–60%
- Улучшение показателя Cumulative Layout Shift (CLS) — меньше перерисовок при загрузке
- Возможность адаптивной типографики без загрузки дополнительных ресурсов
Возможности для дизайна и доступности
Вариативные шрифты открывают ранее недоступные дизайнерские возможности. Ось optical size (opsz) позволяет автоматически оптимизировать шрифт для конкретного размера набора — мелкий текст получает более открытые пропорции и больший x-height, крупный — более изящные контрасты штрихов. Это имитирует традицию «оптических размеров» в металлической типографике.
В плане доступности вариативные шрифты позволяют пользователям настраивать типографику под свои потребности. Например, система может плавно увеличивать вес шрифта для пользователей с нарушениями зрения без потери эстетики, поскольку доступно любое промежуточное значение жирности.
Рекомендуемые вариативные гарнитуры
Следующие вариативные шрифты предоставляются бесплатно через Google Fonts и хорошо подходят для большинства проектов:
- Inter — универсальный гротеск, оптимизированный для экранного чтения, оси: wght, slnt
- Recursive — необычная семья с осями MONO, CASL, wght, slnt, CRSV
- Fraunces — выразительный засечковый шрифт с осями opsz, wght, SOFT, WONK
- Roboto Flex — расширенная версия Roboto с 12 осями вариации
- Source Sans 3 — надёжный рабочий гротеск с осью wght
- Crimson Pro — элегантная антиква для длинных текстов с осями wght и ital
Важное предостережение
Свойство font-variation-settings является низкоуровневым и не наследуется через каскад CSS так же, как font-weight. Если вы устанавливаете font-variation-settings на родительском элементе, дочерние элементы не автоматически наследуют конкретные значения осей. Предпочтительнее использовать высокоуровневые свойства (font-weight, font-stretch) всюду, где это возможно.
Будущее: Beyond Variable Fonts
Технология продолжает развиваться. В разработке находятся спецификации, позволяющие создавать вариативные цветные шрифты, а также расширенные возможности для кириллических и других нелатинских письменных систем. Такие проекты, как Fraunces и Recursive, демонстрируют, что вариативные шрифты могут быть не просто инструментом экономии ресурсов, но и средством выразительности, недостижимой в традиционных форматах.
Автор: Диана Сорокина