Что такое вариативный шрифт — один файл вместо восьми

Открой любой сайт и попробуй поставить font-weight: 437. Если шрифт обычный — ничего не произойдёт, браузер округлит до ближайшего из тех начертаний, что у него есть. Если шрифт вариативный — ты получишь ровно 437. Не «почти жирный», а конкретную точку между.

Вот в этом вся идея: жирность перестала быть выбором из двух файлов и стала ползунком.

Раньше: отдельный файл на каждое начертание

Классический шрифт устроен так: один файл — одно сочетание «ширина + насыщенность + наклон». Regular — файл. Bold — второй файл. Bold Italic — третий.

Для нормального текста на сайте это минимум четыре файла: обычный, курсив, жирный, жирный курсив. Захотел светлое начертание для подписей и очень жирное для акцента — плюс ещё несколько. MDN оценивает полную гарнитуру в 20–30 файлов, а каждый файл — это ещё и отдельный сетевой запрос, обычно килобайт на 20 и больше.

И браузер их не выдумывает: у настоящего курсива буквы часто нарисованы заново (строчные «a» и «g» в курсиве выглядят иначе). Поэтому подделывать начертания наклоном — плохая идея, нужны честные файлы.

Ось вариации — главная идея

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

В спецификации есть пять «зарегистрированных» осей, у каждой свой четырёхбуквенный тег:

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

Кроме них дизайнер шрифта может завести любые свои оси — например, GRAD для «жирности без изменения ширины». Тут есть милая деталь из спецификации: имена осей чувствительны к регистру, зарегистрированные пишутся строчными, а собственные — ЗАГЛАВНЫМИ. Перепутал регистр — ось молча не сработает.

Что меняется в твоём CSS

Приятное: почти ничего. Пять зарегистрированных осей привязаны к обычным свойствам, и в большинстве случаев ты пишешь то же, что писал всегда, — font-weight, font-style, font-stretch.

Меняется диапазон. У обычного шрифта font-weight — это 100, 200, ... 900, ступеньками по сотне. У вариативного, как пишет MDN, валидно любое число от 1 до 1000. Отсюда и font-weight: 437.

Для нестандартных осей есть низкоуровневое свойство font-variation-settings. У него одна неприятная особенность: если ты задал несколько осей и хочешь поменять одну, придётся перечислить заново все — иначе остальные сбросятся. Обходят это CSS-переменными: в font-variation-settings подставляешь var(--wght), а меняешь потом только саму переменную. Это же делает шрифт анимируемым: переменную можно крутить из JavaScript или по наведению.

И чего в вариативных шрифтах пока нет: в @font-face нельзя сказать «вот эта точка на оси и есть мой bold». Если нужен нестандартный жирный — задавай его явно в правилах.

Как подключить: деталь, без которой не заработает

Подключается вариативный шрифт тем же @font-face, что и обычный, — но с одной обязательной правкой. Браузеру нужно сообщить, какой диапазон весов умеет файл:

@font-face {
  font-family: "MyFont";
  src: url("/fonts/myfont.woff2") format("woff2");
  font-weight: 100 900; /* два значения через пробел — это диапазон */
}

Два значения через пробел — и есть диапазон. Забудешь — браузер решит, что в файле один вес, и начнёт подделывать остальные сам: нарисует псевдожирный поверх обычного вместо честной оси wght. Выглядит почти правильно, поэтому ошибку легко пропустить. Для шрифта с полным диапазоном можно написать и 1 1000.

Оптическую ось при этом трогать обычно не нужно: свойство font-optical-sizing по умолчанию стоит в auto, и браузер сам подбирает начертание под текущий кегль — мелкий текст получает буквы пошире и пооткрытее, крупный — более тонкие детали.

Стоит ли оно того

Честный ответ: считай файлы.

Один вариативный файл тяжелее одного статического — в него упакованы все промежуточные состояния. Но MDN отмечает: обычно он меньше или примерно равен тем четырём файлам, которые ты и так грузишь для основного текста. А взамен ты получаешь весь диапазон, а не четыре точки.

Так что выигрыш появляется, когда начертаний у тебя много: заголовок пожирнее, подпись потоньше, узкий вариант для мобильного. Если на сайте живёт ровно один regular — вариативный шрифт только добавит вес. Как и любая история про загрузку ресурсов, это часть общей картины: что ещё замедляет сайт и в каком порядке это чинить.

Вариативный шрифт всегда легче обычного?

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

Нужно ли писать font-variation-settings?

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

Где взять вариативный шрифт?

В каталогах бесплатных шрифтов у них обычно есть отдельный фильтр, а в названии файла встречается пометка VF или Variable. Подключается такой файл через @font-face ровно так же, как обычный, — только один раз вместо четырёх. Размер строк при этом всё равно задаёшь ты: как работает line-height.