Введение в переменные шрифты в Интернете

Новая спецификация шрифтов, которая может значительно уменьшить размеры файлов шрифтов.

Dave Crossland

Mustafa Kurtuldu

Roel Nieskens

Thomas Steiner

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

Совместимость с браузером

По состоянию на май 2020 года переменные шрифты поддерживаются большинством браузеров. См. Могу ли я использовать переменные шрифты? и резервные варианты .

Введение

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

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

До появления переменных шрифтов каждый стиль реализовывался как отдельный файл шрифта. Благодаря переменным шрифтам все стили могут содержаться в одном файле.

Проблемы дизайнера и разработчика

Когда дизайнер создает проект печати, он сталкивается с некоторыми ограничениями, такими как физический размер макета страницы, количество цветов, которые он может использовать (которое определяется типом печатной машины, которая будет использоваться) и так далее. Но они могут использовать столько стилей шрифта, сколько захотят. Это означает, что типографика печатных СМИ часто бывает богатой и сложной, так что впечатления от чтения действительно восхитительны. Вспомните, когда вам в последний раз нравилось просматривать отличный журнал.

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

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

Анатомия переменного шрифта

Вариативные шрифты решают эти проблемы, упаковывая стили в один файл.

Это работает, начиная с центрального стиля или стиля «по умолчанию», обычно «Обычного» — вертикального латинского дизайна с наиболее типичной толщиной и шириной, который наиболее подходит для простого текста. Затем он соединяется с другими стилями в непрерывном диапазоне, называемом «осью». Наиболее распространенной осью является Weight , которая может соединять стиль по умолчанию с полужирным стилем. Любой отдельный стиль может быть расположен вдоль оси и называется «экземпляром» переменного шрифта. Некоторые экземпляры названы разработчиком шрифта, например, положение 600 по оси веса называется SemiBold.

Переменный шрифт Roboto Flex имеет три стиля для оси веса . Обычный стиль находится в центре, а на противоположных концах оси есть два стиля: один более легкий, другой более тяжелый. Между ними вы можете выбирать из 900 экземпляров:

Разработчик шрифта может предложить набор разных осей. Вы можете комбинировать их, поскольку все они имеют одинаковые стили по умолчанию. Roboto имеет три стиля по оси ширины: обычный находится в центре оси, а два стиля, более узкий и широкий, находятся на каждом конце. Они обеспечивают всю ширину обычного стиля и в сочетании с осью «Вес» обеспечивают всю ширину для каждого веса.

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

Курсив

Интересен способ обработки курсива в переменных шрифтах, поскольку существует два разных подхода. Такие гарнитуры, как Helvetica или Roboto, имеют контуры, совместимые с интерполяцией, поэтому их стили римского и курсива можно интерполировать между собой, а наклонную ось можно использовать для перехода от римского к курсиву.

Другие шрифты (например, Garamond, Baskerville или Bodoni) имеют контуры римских и курсивных глифов, которые несовместимы с интерполяцией. Например, контуры, которые обычно определяют латинскую строчную букву «n», не совпадают с контурами, используемыми для определения строчной буквы «n» курсива. Вместо интерполяции одного контура в другой ось курсива переключается с римских контуров на курсив.

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

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

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

Определения осей

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

Несмотря на то, что оси могут управлять одной и той же функцией, они могут использовать разные значения. Например, в переменных шрифтах Oswald и Hepta Slab доступна только одна ось — Weight, но диапазоны разные — Oswald имеет тот же диапазон, что и до его обновления до переменных, от 200 до 700, но Hepta Slab имеет экстремальный диапазон. вес волоска при 1, вплоть до 900.

Пять зарегистрированных осей имеют 4-значные строчные теги, которые используются для установки их значений в CSS:

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

Варианты использования и преимущества

Установка значений осей зависит от личного вкуса и применения лучших типографских практик. Опасность любой новой технологии заключается в возможном неправильном использовании, а чрезмерно художественные или исследовательские настройки также могут ухудшить разборчивость самого текста. Что касается заголовков, изучение различных осей для создания великолепных художественных проектов является захватывающим, но для основного текста это рискует сделать текст неразборчивым.

Захватывающее выражение

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

Посмотреть рабочий пример и исходный код приведенного выше образца можно здесь .

Анимация

Существует также возможность исследовать анимацию персонажей с помощью переменных шрифтов. Выше приведен пример использования различных осей с шрифтом Zycon. См . пример живой анимации на Axis Praxis .

Anicons — первый в мире анимированный цветной шрифт-иконка, основанный на Material Design Icons. Anicons — это эксперимент, сочетающий в себе две передовые технологии шрифтов: переменные шрифты и цветные шрифты.

Утонченность

Roboto Flex и Amstelvar предлагают набор «Параметрических осей». В этих осях буквы деконструируются на 4 фундаментальных аспекта формы: черные или позитивные формы, белые или негативные формы и размеры x и y. Точно так же, как основные цвета можно смешивать с любым другим цветом для его настройки, эти 4 аспекта можно использовать для точной настройки любой другой оси.

Ось XTRA в Амстелваре позволяет регулировать значение «белого» на тысячу, как показано выше. Используя небольшие кусочки XTRA в противоположных направлениях, ширина слов выравнивается.

Переменные шрифты в CSS

Загрузка файлов переменных шрифтов

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

@font-face {
    font-family: 'Roboto Flex';
    src: url('RobotoFlex-VF.woff2') format('woff2-variations');
    src: url('RobotoFlex-VF.woff2') format('woff2') tech('variations');
    font-weight: 100 1000;
    font-stretch: 25% 151%;
}

1. Исходные форматы. Мы не хотим, чтобы браузер загружал шрифт, если он не поддерживает переменные шрифты, поэтому мы добавляем описания format и tech : один раз в будущем синтаксис ( format('woff2') tech('variations') ), когда-то в устаревшем, но поддерживаемом синтаксисе браузеров ( format('woff2-variations') ). Если браузер поддерживает переменные шрифты и следующий синтаксис, он будет использовать первое объявление. Если он поддерживает переменные шрифты и текущий синтаксис, он будет использовать второе объявление. Оба они указывают на один и тот же файл шрифта.

2. Диапазоны стилей. Вы заметите, что мы предоставляем два значения для font-weight и font-stretch . Вместо того, чтобы сообщать браузеру, какой конкретный вес обеспечивает этот шрифт (например, font-weight: 500; ), мы теперь указываем ему диапазон весов, поддерживаемый шрифтом. В Roboto Flex ось Weight находится в диапазоне от 100 до 1000, а CSS напрямую сопоставляет диапазон оси со свойством стиля font-weight . Указав диапазон в @font-face , любое значение за пределами этого диапазона будет «ограничено» ближайшим допустимым значением. Диапазон оси ширины аналогичным образом сопоставляется со свойством font-stretch .

Если вы используете API Google Fonts, обо всем этом позаботятся. Мало того, что CSS будет содержать правильные исходные форматы и диапазоны, Google Fonts также будет отправлять статические резервные шрифты на случай, если переменные шрифты не поддерживаются.

Использование веса и ширины

В настоящее время оси, которые вы можете надежно установить с помощью CSS, — это ось wght через font-weight и ось wdth через font-stretch .

Традиционно вы задаете font-weight как ключевое слово ( light , bold ) или как числовое значение от 100 до 900 с шагом 100. С помощью переменных шрифтов вы можете установить любое значение в пределах диапазона ширины шрифта:

.kinda-light {
  font-weight: 125;
}

.super-heavy {
  font-weight: 1000;
}

Аналогично, мы можем установить font-stretch с помощью ключевых слов ( condensed , ultra-expanded ) или процентных значений:

.kinda-narrow {
  font-stretch: 33.3%;
}

.super-wide {
  font-stretch: 151%;
}

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

Ось ital предназначена для шрифтов, содержащих как обычный, так и курсив. Ось предназначена для включения/выключения: значение 0 отключено и будет отображать обычный стиль, значение 1 — курсивом. В отличие от других осей, здесь нет перехода. Значение 0.5 не даст вам «полукурсив».

slnt ось отличается от курсива тем, что это не новый стиль , а просто наклоняется к обычному начертанию. По умолчанию его значение равно 0 , что означает вертикальную форму букв по умолчанию. Roboto Flex имеет максимальный наклон -10 градусов, то есть буквы будут наклоняться вправо при переходе от 0 до -10.

Было бы интуитивно понятно задать эти оси через свойство font-style , но по состоянию на апрель 2020 года, как именно это сделать , все еще прорабатывается . Итак, на данный момент вам следует рассматривать их как пользовательские оси и устанавливать их через font-variation-settings :

i, em, .italic {
    /* Should be font-style: italic; */
    font-variation-settings: 'ital' 1;
}

.slanted {
    /* Should be font-style: oblique 10deg; */
    font-variation-settings: 'slnt' 10;
}

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

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

Для этой оси было введено новое свойство CSS: font-optical-sizing . По умолчанию для него установлено auto , что заставляет браузер устанавливать значение оси на основе font-size . Это означает, что браузер автоматически выберет лучший оптический размер, но если вы хотите отключить это, вы можете установить font-optical-sizing значение none .

Вы также можете установить собственное значение для оси opsz , если вам намеренно нужен оптический размер, не соответствующий размеру шрифта. Следующий CSS приведет к отображению текста большого размера, но с оптическим размером, как если бы он был напечатан с 8pt :

.small-yet-large {
  font-size: 100px;
  font-variation-settings: 'opsz' 8;
}

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

В отличие от зарегистрированных осей, пользовательские оси не будут сопоставлены с существующим свойством CSS, поэтому вам всегда придется устанавливать их через font-variation-settings . Теги пользовательских осей всегда пишутся заглавными буквами, чтобы отличать их от зарегистрированных осей.

Roboto Flex предлагает несколько пользовательских осей, наиболее важной из которых является Grade ( GRAD ). Ось оценок интересна тем, что она меняет вес шрифта без изменения ширины, поэтому разрывы строк не изменяются. Играя с осью уклона, вы можете избежать необходимости возиться с изменениями оси веса, которые влияют на общую ширину, а затем с изменениями оси ширины, которые влияют на общий вес.

Поскольку GRAD — это настраиваемая ось с диапазоном от -200 до 150 в Roboto Flex. Нам нужно решить эту проблему с помощью font-variation-settings :

.grade-light {
    font-variation-settings: `GRAD` -200;
}

.grade-normal {
    font-variation-settings: `GRAD` 0;
}

.grade-heavy {
    font-variation-settings: `GRAD` 150;
}

Вариативные шрифты в Google Fonts

Google Fonts расширила свой каталог за счет переменных шрифтов и регулярно добавляет новые. В настоящее время интерфейс предназначен для выбора отдельных экземпляров шрифта: вы выбираете нужный вариант, нажимаете «Выбрать этот стиль», и он будет добавлен в элемент <link> , который извлекает CSS и шрифты из Google Fonts.

Чтобы использовать все доступные оси или диапазоны значений, вам придется вручную составить URL-адрес API Google Fonts. В обзоре переменных шрифтов перечислены все оси и значения.

Инструмент Google Variable Fonts Links также может предоставить вам последние URL-адреса полных переменных шрифтов.

Наследование настроек варианта шрифта

Хотя все зарегистрированные оси вскоре будут поддерживаться через существующие свойства CSS, на данный момент вам, возможно, придется полагаться на font-variation-settings в качестве запасного варианта. А если у вашего шрифта есть пользовательские оси, вам также понадобятся font-variation-settings .

Однако вот небольшая проблема с font-variation-settings . Каждое свойство, которое вы не установили явно, будет автоматически сброшено до значения по умолчанию. Ранее установленные значения не наследуются! Это означает, что следующее не будет работать должным образом:

<span class="slanted grade-light">
    I should be slanted and have a light grade
</span>

Сначала браузер применит font-variation-settings: 'slnt' 10 из класса .slanted . Затем он применит font-variation-settings: 'GRAD' -200 из класса .grade-light . Но это вернет slnt к значению по умолчанию, равному 0! Результатом будет текст с легким шрифтом, но без наклона.

К счастью, мы можем обойти это, используя переменные CSS:

/* Set the default values */
:root {
    --slnt: 0;
    --GRAD: 0;
}

/* Change value for these elements and their children */
.slanted {
    --slnt: 10;
}

.grade-light {
    --grad: -200;
}

.grade-normal {
    --grad: 0;
}

.grade-heavy {
    --grad: 150;
}

/* Apply whatever value is kept in the CSS variables */
.slanted,
.grade-light,
.grade-normal,
.grade-heavy {
    font-variation-settings: 'slnt' var(--slnt), 'GRAD' var(--GRAD);
}

Переменные CSS будут каскадными, поэтому, если элемент (или один из его родителей) установит slnt равным 10 , он сохранит это значение, даже если вы установите GRAD на что-то другое. Подробное объяснение этого метода см. в разделе Исправление наследования переменных шрифтов .

Обратите внимание, что анимация переменных CSS не работает (по замыслу), поэтому что-то вроде этого не работает:

@keyframes width-animation {
   from { --wdth: 25; }
   to   { --wdth: 151; }
}

Эти анимации должны происходить непосредственно в font-variation-settings .

Повышение производительности

Переменные шрифты OpenType позволяют нам хранить несколько вариантов семейства шрифтов в одном файле шрифта. Monotype провела эксперимент, объединив 12 входных шрифтов для создания восьми насыщенностей трех значений ширины, как для курсива, так и для римского стиля. Хранение 48 отдельных шрифтов в одном файле переменных шрифтов означало сокращение размера файла на 88% .

Однако, если вы используете один шрифт, такой как Roboto Regular, и ничего больше, вы можете не увидеть чистого увеличения размера шрифта, если переключитесь на переменный шрифт со многими осями. Как всегда, это зависит от вашего варианта использования.

С другой стороны, анимация шрифта между настройками может вызвать проблемы с производительностью. Хотя ситуация улучшится, когда поддержка переменных шрифтов в браузерах станет более зрелой, проблему можно несколько уменьшить, если анимировать только те шрифты, которые в данный момент отображаются на экране. Этот удобный фрагмент от Dinamo приостанавливает анимацию в элементах с классом vf-animation , когда их нет на экране:

var observer = new IntersectionObserver(function(entries, observer) {
  entries.forEach(function(entry) {
    // Pause/Play the animation
    if (entry.isIntersecting) entry.target.style.animationPlayState = "running"
    else entry.target.style.animationPlayState = "paused"
  });
});

var variableTexts = document.querySelectorAll(".vf-animation");
variableTexts.forEach(function(el) { observer.observe(el); });

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

Если вы используете шрифты Google, рекомендуется предварительно подключиться к https://fonts.gstatic.com — домену, на котором размещены шрифты Google. Это позволит браузеру заранее узнать, где взять шрифты, когда они встречаются в CSS:

<link rel="preconnect" href="https://fonts.gstatic.com" />

Этот совет работает и для других CDN: чем раньше вы позволите браузеру настроить сетевое соединение, тем скорее он сможет загрузить ваши шрифты.

Дополнительные советы по повышению производительности при загрузке шрифтов Google см. в разделе «Самые быстрые шрифты Google» .

Резервные варианты и поддержка браузеров

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

/* Set up Roboto for old browsers, only regular + bold */
@supports not (font-variation-settings: normal) {
  @font-face {
    font-family: Roboto;
    src: url('Roboto-Regular.woff2');
    font-weight: normal;
  }

  @font-face {
    font-family: Roboto;
    src: url('Roboto-Bold.woff2');
    font-weight: bold;
  }

  body {
    font-family: Roboto;
  }

  .super-bold {
    font-weight: bold;
  }
}

/* Set up Roboto for modern browsers, all weights */
@supports (font-variation-settings: normal) {
  @font-face {
    font-family: 'Roboto';
    src: url('RobotoFlex-VF.woff2') format('woff2 supports variations'),
         url('RobotoFlex-VF.woff2') format('woff2-variations');
    font-weight: 100 1000;
    font-stretch: 25% 151%;
  }

  .super-bold {
    font-weight: 1000;
  }
}

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

Правило @supports не поддерживается Internet Explorer, поэтому в этом браузере не будут отображаться никакие стили. Если это проблема, вы всегда можете использовать один из олдскульных хаков, чтобы настроить таргетинг на соответствующие старые браузеры.

Если вы используете API Google Fonts, он позаботится о загрузке шрифтов, подходящих для браузеров ваших посетителей. Допустим, вы запрашиваете шрифт Oswald в диапазоне насыщенности от 200 до 700, например:

<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap" rel="stylesheet">

Современные браузеры, которые могут обрабатывать переменные шрифты, получат переменный шрифт и будут иметь каждый вес от 200 до 700. Старые браузеры будут получать отдельные статические шрифты для каждого веса. В данном случае это означает, что они загрузят 6 файлов шрифтов: один с весом 200, один с весом 300 и так далее.

Спасибо

Эта статья стала возможной только благодаря помощи следующих людей:

• Мустафа Куртулду , UX-дизайнер и защитник дизайна в Google
• Роэл Нискенс , UX-дизайнер/разработчик и эксперт по типографике в Kabisa.
• Дэйв Кроссленд , руководитель программы, Google Fonts
• Дэвид Берлоу , шрифтовой дизайнер и типограф в Font Bureau
• Лоуренс Пенни , разработчик axis-praxis.org
• Мэнди Майкл , разработчик Variablefonts.dev

Изображение героя, созданное Бруно Мартинсом на Unsplash .