Сайт подключает четыре файла шрифта, чтобы получить обычное начертание, курсив, полужирное и жирное с курсивом. Вместе они весят около семисот килобайт, и браузер тянет их при первом открытии. Есть способ уложиться в один файл и при этом получить не четыре варианта, а любое значение между ними. Технология появилась в 2016 году и с тех пор заметно упростила жизнь тем, кто занимается типографикой.
Идея технологии выросла из экспериментов девяностых годов
Возможность хранить в одном файле целый диапазон начертаний появилась не сразу. Ранние попытки делались ещё в девяностые, но требовали от пользователя вручную собрать нужный вариант из исходных файлов.
Современный подход отличается тем, что вариант выбирается на лету. Дизайнер создаёт один файл с описанием диапазонов, а конкретные значения подставляются в момент отображения.
Технологию представили в сентябре 2016 года четыре крупные компании, работающие с графикой и операционными системами. Она вошла в спецификацию шрифтового формата и постепенно получила поддержку в системах и браузерах. В 2017 году поддержка появилась в одной из массовых операционных систем вместе с первым системным вариативным шрифтом.
Полезно сразу развести два похожих понятия. Вариативный шрифт и шрифт переменной ширины это разные вещи. Первый может быть как моноширинным, так и пропорциональным. Речь идёт о возможности менять параметры начертания, а не о ширине знаков сама по себе.
Обычные шрифты требуют отдельного файла на каждое начертание
Понять выгоду проще через сравнение.
Раньше семейство выпускалось набором отдельных файлов. Обычное начертание, курсив, полужирное, жирное, жирное с курсивом. Для крупного семейства с несколькими ширинами число файлов вырастало до двадцати и более.
Для обычного сайта требовалось минимум четыре файла. Каждый весит от ста до двухсот килобайт, и в сумме набегает заметный объём. На медленном соединении загрузка шрифтов задерживает появление текста, и это заметно на скорости отрисовки страницы.
Второе неудобство касается начертаний между стандартными. Если дизайнер хочет использовать вес четыреста пятьдесят, придётся либо округлить до четырёхсот или пятисот, либо собрать дополнительный файл. Библиотека начертаний оказывается дискретной.
Третье неудобство связано с шириной. Изменение ширины текста под узкий экран требует отдельного файла, потому что растягивать обычный шрифт нельзя: знаки деформируются.
Четвёртое неудобство это кэш. Каждое начертание запрашивается и хранится отдельно, что увеличивает число обращений к серверу.
Вариативный файл описывает диапазоны значений по осям
Теперь о том, как устроен сам файл. Внутри описаны оси, по каждой задан минимум, максимум и значение по умолчанию.
Стандартные оси имеют общепринятые обозначения из четырёх букв. Это важно, потому что одинаковые метки означают одно и то же в разных шрифтах.
Первая ось отвечает за насыщенность. Значения идут от единицы до тысячи, где четыреста соответствует обычному начертанию.
Вторая ось описывает ширину в процентах от нормальной. Сто означает обычную ширину.
Третья ось управляет оптическим размером и измеряется в типографских пунктах. Смысл в том, что шрифт подстраивает детали под размер текста: мелкий кегль получает более крупные засечки и разреженные знаки, крупный наоборот.
Четвёртая ось задаёт наклон в градусах против часовой стрелки, то есть наклон вправо выражается отрицательным числом.
Пятая ось различает прямое и курсивное начертание на шкале от нуля до единицы. Она не совпадает с осью наклона: курсив это отдельный рисунок знаков, а не механический наклон.
Помимо стандартных, шрифт может определять собственные оси. Например, высоту строчных знаков или степень округлости. Такие оси описываются своими метками.
Подключение выполняется обычным правилом и указанием диапазона
Технически подключение почти не отличается от привычного. Разница только в описании диапазона.
@font-face {
font-family: "Основной";
src: url("/fonts/main-variable.woff2") format("woff2-variations");
font-weight: 100 900;
font-stretch: 75% 125%;
font-style: normal;
}Указание диапазона в описании критично. Без него браузер будет считать файл обычным и подставлять только одно значение.
Дальше в стилях используются привычные свойства, и браузер сам выбирает нужную точку на оси:
h1 {
font-family: "Основной", sans-serif;
font-weight: 700;
}
.note {
font-family: "Основной", sans-serif;
font-weight: 350;
font-stretch: 90%;
}Второй способ предполагает прямое указание осей. Он даёт доступ к нестандартным параметрам, но требует осторожности.
.special {
font-variation-settings: "wght" 450, "wdth" 85, "opsz" 24;
}Здесь стоит предупредить о ловушке. Свойство с прямыми значениями осей перекрывает обычные свойства. Если задать насыщенность напрямую, а потом попытаться изменить её через стандартное свойство, ничего не получится.
/* так нельзя: второе правило не сработает */
.title {
font-variation-settings: "wght" 500;
font-weight: 700;
}/* так правильно */
.title {
font-weight: 700;
}
.title-accent {
/* прямое указание только для нестандартной оси */
font-variation-settings: "GRAD" 40;
}Практический вывод: стандартные оси задаются стандартными свойствами, прямое указание остаётся для нестандартных осей.
Насыщенность меняется при наведении и в анимации
Вариативные шрифты открывают возможность плавно менять начертание. Раньше такой эффект требовал подмены файла и потому выглядел рывком.
.button {
font-weight: 400;
transition: font-weight 180ms ease-out;
}
.button:hover {
font-weight: 650;
}Плавность обеспечивается тем, что меняется не файл, а точка на оси. Браузер пересчитывает контуры знаков на каждом кадре.
Второй приём это адаптация к размеру экрана. На узком экране текст делают немного уже и плотнее, чтобы в строку помещалось больше слов без потери читаемости.
@media (max-width: 640px) {
body {
font-stretch: 92%;
font-weight: 420;
}
}Третий приём это оптический размер. Для крупных заголовков он задаётся большим, для основного текста меньшим. Шрифт, поддерживающий эту ось, сам подстроит детали.
h1 {
font-size: 3rem;
font-optical-sizing: auto;
}
p {
font-size: 1rem;
font-optical-sizing: auto;
}Автоматический режим избавляет от ручного подбора. Если ось не поддерживается, свойство просто игнорируется.
Экономия на загрузке зависит от числа начертаний
Теперь посчитаем выгоду. Возьмём семейство из четырёх начертаний.
Каждый обычный файл в сжатом формате весит около ста пятидесяти килобайт. Четыре файла дают шестьсот килобайт. Вариативный файл с полным диапазоном весит примерно двести пятьдесят килобайт, потому что внутри хранятся крайние точки и правила интерполяции.
Экономия составляет более половины объёма. Если начертаний восемь или двенадцать, разрыв увеличивается ещё сильнее.
Второй выигрыш это число запросов. Вместо четырёх обращений к серверу выполняется одно, и на медленном соединении это заметно.
Третий выигрыш это гибкость. Доступны любые промежуточные значения, а не только те, что были собраны.
Обратная сторона тоже есть. Если сайту нужно всего одно начертание, вариативный файл окажется тяжелее обычного, потому что содержит описание всего диапазона. Для такого случая экономии не будет.
Второй минус это требования к обработке. Пересчёт контуров на лету немного нагружает устройство. При анимации насыщенности на слабом телефоне возможны пропуски кадров.
Третий минус это поддержка. Старые браузеры не понимают вариативные файлы и могут показать текст системным шрифтом. Запасной вариант обязателен.
Подмножество знаков сокращает объём заметнее всего
Отдельная тема, которая даёт наибольший выигрыш, это удаление ненужных знаков из файла.
Полный шрифт содержит сотни символов: латиница, кириллица, греческий, математические знаки, стрелки, редкие лигатуры. Сайту на русском языке нужна кириллица, латиница для технических терминов и базовые знаки препинания.
pyftsubset main-variable.ttf \
--output-file=main-cyr.woff2 \
--flavor=woff2 \
--unicodes="U+0400-045F,U+0490-0491,U+2116" \
--layout-features="kern,liga"Разбиение на подмножества уменьшает файл в разы. Полный вариативный шрифт на триста килобайт легко укладывается в сто после удаления лишних знаков.
Второй приём это разбивка по языкам. Отдельные файлы для кириллицы и латиницы позволяют браузеру загружать только нужный. Правило описания диапазона знаков делает эту разбивку автоматической.
Третий приём это отказ от лишних возможностей. Декоративные альтернативы и редкие исторические формы можно исключить, если они не используются.
Четвёртый приём это правильный формат. Сжатый формат даёт выигрыш около тридцати процентов по сравнению с предыдущим поколением.
Практические ограничения и проверка качества
Работа с вариативными шрифтами имеет несколько подводных камней.
Первый это подмена начертаний. Если браузер не находит нужного веса, он может искусственно утолщить знаки. Синтетическое утолщение выглядит хуже настоящего и портит вёрстку. Защита состоит в том, чтобы указать в описании полный диапазон.
Второй это встраивание в анимацию без запаса. Плавное изменение насыщенности на длинном абзаце заставляет пересчитывать тысячи знаков. Анимировать стоит короткие элементы.
Третий это проверка на реальных устройствах. Разные системы по-разному округляют значения и по-разному интерпретируют оптический размер.
Четвёртый это читаемость. Слишком светлое начертание при малом размере выглядит бледным, слишком плотное сливается. Промежуточные значения стоит подбирать на экране, а не по числу.
Пятый это запасной шрифт. Если вариативный файл не загрузился, подставляется системный, и метрики отличаются. Это приводит к сдвигу вёрстки. Правильно подобранный запасной вариант с близкими пропорциями смягчает разницу.
Отдельный разбор касается читаемости и подбора значений
Выбор промежуточных значений это работа не на глаз, а по нескольким правилам.
Первое правило: основной текст редко выигрывает от нестандартного веса. Значения около четырёхсот проверены десятилетиями, и отклонение в сторону облегчения или утолщения делается осознанно.
Второе правило: для мелкого текста выбирают чуть более плотное начертание. Тонкие штрихи на малом размере теряются при отрисовке.
Третье правило: для крупных заголовков подходит более тонкое начертание. На большом размере тонкие линии выглядят изящно, а не бледно.
Четвёртое правило: контраст между заголовком и текстом создаётся не только размером, но и весом. Разница в двести единиц читается отчётливо, разница в сто почти незаметна.
Пятое правило: проверять надо на разных экранах. На качественном мониторе тонкое начертание выглядит хорошо, на дешёвом планшете расплывается.
Сочетание с системными шрифтами требует осторожности
Вариативный шрифт часто соседствует с системным, например в полях ввода или системных сообщениях.
Первое замечание: метрики у них разные. Высота строки, ширина знаков и положение базовой линии отличаются, и переход между шрифтами заметен.
Второе замечание: подбирайте запасной вариант с близкими пропорциями. Если основной шрифт узкий, а запасной широкий, вёрстка поедет при отказе загрузки.
Третье замечание: описание диапазона знаков помогает браузеру понять, какие символы брать из какого файла.
Четвёртое замечание: не смешивайте больше двух семейств в одном макете. Разнообразие шрифтов редко улучшает читаемость.
Итоговая проверка перед выпуском
Первое: убедитесь, что в описании указан полный диапазон весов и ширин.
Второе: проверьте, что стандартные оси задаются стандартными свойствами, а прямые указания остались только для нестандартных.
Третье: посмотрите, как выглядит текст при отказе загрузки шрифта.
Четвёртое: замерьте объём и сравните с прежним набором файлов.
Пятое: проверьте страницу на медленном соединении и на слабом устройстве.
Шестое: оцените читаемость основного текста на маленьком экране.
Семь проверок занимают час, а предотвращают разочарование от того, что текст выглядит не так, как в макете.
Вариативные шрифты получились решением, которое экономит ресурсы и расширяет возможности одновременно. Вместо набора файлов приходит один с диапазоном значений, вместо фиксированных начертаний появляется непрерывная шкала. Ограничения тоже понятны: выгода зависит от числа используемых начертаний, а поддержка требует запасного варианта. Там, где эти условия учтены, типографика становится и легче, и выразительнее.