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

Для лучшего понимания отличий шрифтов переменной ширины стоит рассмотреть, какими являются непеременные шрифты и как они сравниваются.

В прошлом шрифт создавался в виде нескольких отдельных шрифтов, и каждый шрифт представлял одну конкретную комбинацию ширины/веса/стиля. Таким образом, у вас были отдельные файлы для 'Roboto Regular', 'Roboto Bold' и 'Roboto Bold Italic' — что означало, что у вас могло получиться 20 или 30 разных файлов шрифтов для представления целого шрифта (для большого шрифта с различными ширинами это может быть в несколько раз больше).

В такой ситуации для использования шрифта для стандартного использования на сайте для основного текста вам потребуется как минимум четыре файла: обычный, курсивный, жирный и жирный курсив. Если вы захотите добавить больше весов, например, более светлый для заголовков или более тяжелый для акцента, это означало бы еще несколько файлов. Это приводит к большему количеству HTTP-запросов и большему объёму загружаемых данных (обычно около 20 Кб или более на файл).

С шрифтом переменной ширины все эти перестановки могут быть заключены в один файл. Этот файл будет больше, чем один шрифт, но в большинстве случаев меньше или примерно такого же размера, как 4 файла, которые вы можете загрузить для основного текста. Преимущество выбора шрифта переменной ширины заключается в том, что у вас есть доступ ко всему диапазону весов, ширин и стилей, а не только к небольшому количеству, которые вы загружали ранее.

Это позволяет использовать такие типографические приемы, как настройка заголовков разного размера в разных весах для лучшей читаемости каждого размера или использование немного более узкой ширины для плотных данных. Для сравнения, в типографической системе для журнала обычно используются 10–15 или более различных комбинаций весов и ширин на протяжении всего издания — предоставляя гораздо более широкий диапазон стилей, чем обычно в веб-дизайне (или, действительно, практически по причинам производительности).

Примечание о наборах шрифтов, весах и вариантах

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

Вы также можете обнаружить, что некоторые шрифты переменной ширины поделены на два файла: один для прямых шрифтов и всех их вариаций, и один для курсивных вариаций. Это иногда делается для уменьшения общего размера файла в тех случаях, когда курсив не нужен или не используется. Во всех случаях их все еще можно связать общим именем font-family так, чтобы вы могли вызывать их с помощью того же font-family и соответствующего font-style.

Сердце нового формата шрифтов переменной ширины — это понятие оси вариации, описывающей допустимый диапазон конкретной особенности дизайна шрифта. Таким образом, «ось веса» описывает, насколько легкими или жирными могут быть литеры; «ось ширины» описывает, насколько узкими или широкими они могут быть; «ось курсива» описывает, имеются ли курсивные литеры, и их можно включить или выключить соответственно и т. д. Обратите внимание, что ось может быть диапазоном или двоичным выбором. Вес может изменяться от 1 до 999, в то время как курсив может быть 0 или 1 (выключено или включено).

Как определено в спецификации, существуют два вида осей: зарегистрированные и пользовательские:

• Зарегистрированные оси — это те, с которыми чаще всего встречаются, и достаточно распространены для того, чтобы авторы спецификации посчитали необходимым их стандартизировать. Пять текущих зарегистрированных осей — это вес, ширина, наклон, курсив и оптический размер. W3C взялись за их сопоставление с существующими атрибутами CSS, и в одном случае ввели новый, о котором вы узнаете ниже.
• Пользовательские оси безграничны: дизайнер шрифтов может определить и очертить любую ось, которая ему нужна, и ему просто нужно дать ей четырёхбуквенный тег для идентификации в формате файла шрифта. Вы можете использовать эти четырёхбуквенные теги в CSS для указания точки вдоль этой оси вариации, как будет показано в примерах кода ниже.

В этом разделе мы продемонстрируем пять зарегистрированных осей с примерами и соответствующим CSS. Где это возможно, включены как стандартный, так и низкоуровневый синтаксис. Низкоуровневый синтаксис (font-variation-settings) был первым механизмом, реализованным для тестирования ранних реализаций поддержки шрифтов переменной ширины и необходим для использования новых или пользовательских осей помимо пяти зарегистрированных. Однако целью W3C было то, чтобы этот синтаксис не использовался, когда доступны другие атрибуты. Поэтому, где это возможно, следует использовать соответствующее свойство, а низкоуровневый синтаксис font-variation-settings используется только для задания значений или осей, которые недоступны другим способом.

Примечания

1. При использовании font-variation-settings важно помнить, что имена осей чувствительны к регистру. Имена зарегистрированных осей должны быть в нижнем регистре, а пользовательские оси — в верхнем. Например:

   font-variation-settings:
     "wght" 375,
     "GRAD" 88;
   

   wght (вес) — это зарегистрированная ось, а GRAD (сорт) — пользовательская.

2. Если вы задали значения с помощью font-variation-settings и хотите изменить одно из этих значений, вы должны переопределить все из них (так же, как и при установке функций шрифтов OpenType с помощью font-feature-settings). Вы можете обойти это ограничение, используя пользовательские свойства CSS (переменные CSS) для отдельных значений и изменяя значение отдельного пользовательского свойства. Пример кода приведен в конце руководства.

Вес (представленный тегом wght ) определяет ось дизайна, описывающую, насколько тонкие или толстые (легкие или тяжелые, в типографских терминах) могут быть штрихи литер. Долгое время в CSS была возможность указать это через свойство font-weight, которое принимает числовые значения от 100 до 900 с шагом 100 и ключевые слова, такие как normal или bold, которые являются псевдонимами для их соответствующих числовых значений (400 и 700 в данном случае). Они по-прежнему применяются при работе с непеременными или переменными шрифтами, но с переменными шрифтами теперь любое число от 1 до 1000 является допустимым.

Следует отметить, что в данный момент нет способа в декларации @font-face «отобразить» конкретную точку на оси вариации шрифта переменной ширины ключевому слову bold (или любому другому ключевому слову). Это можно обычно решить довольно легко, но это требует дополнительного шага при написании вашего CSS:

font-weight: 375;

font-variation-settings: "wght" 375;

Нажмите «Запуск» в блоках кода ниже, чтобы отредактировать пример в MDN Playground. Отредактируйте код CSS, чтобы поэкспериментировать со значениями font-weight.

/* weight range is 300 to 900 */
.p1 {
  font-weight: 625;
}

/* weight range is 300 to 900 */
.p2 {
  font-variation-settings: "wght" 625;
}

/* Adjust with slider & custom property */
.p3 {
  font-variation-settings: "wght" var(--text-axis);
}

Ширина (представленная тегом wdth ) определяет ось дизайна, описывающую, насколько узкими или широкими (конденсированными или расширенными, в типографских терминах) могут быть литеры. Обычно это устанавливается в CSS с помощью свойства font-stretch со значениями, выраженными в процентах выше или ниже «нормального» (100 %), любое число больше 0 технически допустимо — хотя гораздо вероятнее, что диапазон будет ближе к отметке 100 %, например, 75 %—125 %. Если введённое числовое значение выходит за пределы диапазона, закодированного в шрифте, браузер должен отображать шрифт в ближайшем допустимом значении.

font-stretch: 115%;

font-variation-settings: "wdth" 115;

Нажмите «Запуск» в блоках кода ниже, чтобы отредактировать пример в MDN Playground. Отредактируйте код CSS, чтобы поэкспериментировать со значениями font-width.

/* width range is 55% to 100% */
.p1 {
  font-stretch: 60%;
}

/* width range is an integer from 55 to 100 */
.p2 {
  font-variation-settings: "wdth" 60;
}

/* Adjust with slider & custom property */
.p3 {
  font-variation-settings: "wdth" var(--text-axis);
}

Ось Курсив (ital) может быть установлена в диапазоне [0-1], где 0 указывает «не курсив», 0.5 указывает «полукурсив», а 1 указывает «полный курсив». Дизайны курсивом часто включают значительно отличающиеся формы букв от прямых аналогов, поэтому при переходе от прямого к курсивному шрифту обычно происходят несколько подстановок глифов (или символов). Курсив и наклон часто используются взаимозаменяемо, но на самом деле они довольно разные. Наклон в данном контексте определяется термином slant (см. раздел ниже), и шрифт, как правило, будет иметь один или другой, но не оба.

В CSS и курсив, и наклон применяются к тексту с помощью свойства font-style. Также обратите внимание на введение font-synthesis: none; — это предотвратит случайное применение браузером оси вариации и синтезированного курсива. Это можно использовать для предотвращения подделки полужирного шрифта.

font-style: italic;

font-variation-settings: "ital" 1;

font-synthesis: none;

Нажмите «Воспроизвести» в блоках кода ниже, чтобы изменить пример в MDN Playground. Измените код CSS, чтобы поэкспериментировать с font-italics.

/* italic range is 0 or 1 */
.p1 {
  font-synthesis: none;
  font-style: italic;
}

/* italic range is 0 or 1 */
.p2 {
  font-synthesis: none;
  font-variation-settings: "ital" 1;
}

/* Adjust with slider & custom property */
.p3 {
  font-synthesis: none;
  font-variation-settings: "ital" var(--text-axis);
}

Наклон (представленный тегом slnt), или как его часто называют, «наклон» — отличается от истинного курсива тем, что изменяет угол букв, но не выполняет никаких подстановок символов. Он также является переменным, так как выражается в виде числового диапазона. Это позволяет шрифту изменяться в любом месте вдоль оси наклона. Разрешённый диапазон составляет от -90 до 90 градусов.

Два свойства, которые могут контролировать наклон, это font-style и font-variation-settings. Следующие два объявления свойств одинаковы:

font-style: oblique 14deg;

font-variation-settings: "slnt" -14;

Предпочитайте свойство font-style свойству font-variation-settings. Ключевое слово deg не используется при использовании свойства font-variation-settings. Кроме того, в случае с свойством font-variation-settings, положительный угол означает наклон против часовой стрелки.

В следующем примере вы можете отрегулировать наклон.

.font-style {
  font-style: oblique 5deg;
}

.font-variation {
  font-variation-settings: "slnt" -5;
}

.adjustable {
  font-variation-settings: "slnt" var(--slant-angle);
}

Это нечто новое для цифровых шрифтов и CSS, но это вековая техника в дизайне и создании металлических шрифтов. Оптический размер относится к практике изменения общей толщины штрихов букв в зависимости от физического размера. Если размер был очень маленьким (например, эквивалент 10 или 12 px), символы имели бы более толстый общий штрих, а возможно, и другие небольшие изменения, чтобы гарантировать, что он будет воспроизводиться и читаться при физически меньшем размере. Напротив, при использовании гораздо большего размера (например, 48 или 60 px) может быть значительно больше вариаций толщины и тонкости штрихов, демонстрируя дизайн шрифта более соответствующим первоначальному замыслу.

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

Значения оптического размера, как правило, предназначены для автоматического применения соответствующим font-size, но также могут быть изменены с помощью синтаксиса более низкого уровня font-variation-settings.

Создано новое атрибут, font-optical-sizing, для поддержки переменных шрифтов в CSS. При использовании font-optical-sizing, единственно допустимые значения — auto или none — поэтому этот атрибут позволяет только включать или отключать оптический размер. Однако при использовании font-variation-settings: 'opsz' <num>, вы можете указать числовое значение. В большинстве случаев вы хотите сопоставить font-size (физический размер, для которого рендерится текст) со значением opsz (так оптический размер предполагается применять при использовании auto). Возможность указать конкретное значение предоставляется для случаев, когда необходимо переопределить значение по умолчанию — для повышения читабельности, эстетики или по какой-либо другой причине — можно применить конкретное значение.

font-optical-sizing: auto;

font-variation-settings: "opsz" 36;

Нажмите «Воспроизвести» в блоках кода ниже, чтобы изменить пример в MDN Playground. Измените код CSS, чтобы поэкспериментировать со значениями оптического размера.

.p1 {
  font-optical-sizing: none;
}
/* font-optical-sizing can be auto or none */
.p2 {
  font-optical-sizing: auto;
}

/* optical range is from 8 to 144 */
.p3 {
  font-variation-settings: "opsz" 64;
}

/* Adjust with slider & custom property */
.p4 {
  font-variation-settings: "opsz" var(--text-axis);
}

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

Класс может стать одной из наиболее распространённых пользовательских осей, так как у него есть известная история в дизайне шрифтов. Практика разработки разных классов шрифта часто выполнялась в ответ на предполагаемое использование и технику печати. Термин «класс» относится к относительному весу или плотности дизайна шрифта, но отличается от традиционного «веса» тем, что физическое пространство, занимаемое текстом, не изменяется, поэтому изменение класса текста не изменяет общий макет текста или элементов вокруг него. Это делает класс полезной осью вариации, так как его можно изменять или анимировать, не вызывая переформатирования самого текста.

font-variation-settings: "GRAD" 88;

Нажмите «Воспроизвести» в блоках кода ниже, чтобы изменить пример в MDN Playground. Измените код CSS, чтобы поэкспериментировать со значениями font-grade.

/* grade range is 88 to 150 */
.p1 {
  font-size: 64px;
  font-variation-settings: "GRAD" 88;
}

/* Adjust with slider & custom property */
.p2 {
  font-size: 64px;
  font-variation-settings: "GRAD" var(--text-axis);
}

Синтаксис загрузки переменных шрифтов очень похож на любой другой веб-шрифт, с некоторыми заметными отличиями, которые обеспечиваются за счёт улучшений традиционного синтаксиса @font-face, доступного в современных браузерах.

Основной синтаксис тот же, но можно указать технологию шрифта и предоставить допустимые диапазоны для описателей, таких как font-weight и font-stretch, вместо именования согласно загружаемому файлу шрифта.

Пример стандартного прямого (римского) шрифта

@font-face {
  font-family: "MyVariableFontName";
  src: url("path/to/font/file/my-variable-font.woff2")
    format("woff2-variations");
  font-weight: 125 950;
  font-stretch: 75% 125%;
  font-style: normal;
}

В этом случае значение normal указывает, что этот файл шрифта должен использоваться, когда в правиле стиля свойство font-family имеет значение MyVariableFontName, а свойство font-style — normal. Значения oblique 0deg и oblique 0deg 20deg, благодаря 0deg, также указывают, что шрифт имеет нормальные прямые глифы.

Пример шрифта, содержащего только курсив и отсутствие прямых символов

@font-face {
  font-family: "MyVariableFontName";
  src: url("path/to/font/file/my-variable-font.woff2")
    format("woff2-variations");
  font-weight: 125 950;
  font-stretch: 75% 125%;
  font-style: italic;
}

В этом случае значение italic указывает, что этот файл шрифта должен использоваться, когда в правиле стиля свойство font-family имеет значение MyVariableFontName, а свойство font-style — italic. Значение oblique 14deg также указывает, что шрифт имеет глифы курсивом.

Пример шрифта, содержащего ось наклона (наклона)

@font-face {
  font-family: "MyVariableFontName";
  src: url("path/to/font/file/my-variable-font.woff2")
    format("woff2-variations");
  font-weight: 125 950;
  font-stretch: 75% 125%;
  font-style: oblique 0deg 12deg;
}

В этом случае значение oblique 0deg 12deg указывает, что этот файл шрифта должен использоваться, когда в правиле стиля свойство font-family имеет значение MyVariableFontName, а свойство font-style — наклон с углом от нуля до 12 градусов включительно.

Поддержка переменных шрифтов может быть проверена с помощью запросов на функции CSS (см. @supports), поэтому использование переменных шрифтов в производстве и ограничение вызова CSS переменных шрифтов внутри блока запроса на функцию возможно.

h1 {
  font-family: some-non-variable-font-family;
}

@supports (font-variation-settings: "wdth" 115) {
  h1 {
    font-family: some-variable-font-family;
  }
}

Следующие примеры страниц демонстрируют два способа структурирования CSS. Первый использует стандартные атрибуты по возможности. Второй пример использует пользовательские свойства CSS для установки значений для строки font-variation-settings, и показывает, как вы можете более легко обновлять отдельные значения переменных, перезаписывая одну переменную вместо переписывания всей строки. Обратите внимание на эффект наведения на h2, который изменяет только значение пользовательского свойства оси наклона.

.container1 h1 {
  font-optical-sizing: auto;
  font-size: 5rem;
  font-stretch: 85%;
  font-weight: 450;
}
.container1 h2 {
  font-optical-sizing: auto;
  font-size: 2.25rem;
  font-stretch: 90%;
  font-weight: 575;
}
.container1 p {
  font-optical-sizing: auto;
  font-size: 1rem;
  font-stretch: 100%;
  font-weight: 375;
}
.demo2 {
  --text-wght: 375;
  --text-wdth: 100;
  --text-opsz: 16;
  --text-GRAD: 88;
}
.container2 > * {
  font-size: 5rem;
  font-variation-settings:
    "wght" var(--text-wght),
    "wdth" var(--text-wdth),
    "opsz" var(--text-opsz),
    "GRAD" var(--text-GRAD);
}
.container2 h1 {
  --text-wght: 450;
  --text-wdth: 85;
  --text-opsz: 80;
  font-size: 5rem;
}
.container2 h2 {
  --text-wght: 575;
  --text-wdth: 95;
  --text-opsz: 36;
  font-size: 2.25rem;
}
.container2 h2:hover {
  --text-GRAD: 130;
}
.container2 p {
  font-size: 1rem;
}

• Спецификация модуля CSS Fonts 4 W3C (проект редактора)
• Список проблем GitHub W3C
• Введение в Microsoft OpenType Variations
• Регистр меток осей вариаций OpenType Microsoft
• Wakamai Fondue (сайт, который покажет, что может сделать ваш шрифт, с помощью простого интерфейса инспекции с перетаскиванием)
• Axis Praxis (оригинальный сайт для работы со шрифтами с переменными)
• V-Fonts.com (каталог шрифтов с переменными и где их получить)
• Font Playground (ещё одна площадка для шрифтов с переменными с очень уникальными подходами к пользовательскому интерфейсу)