Как использовать вариативные шрифты в реальном мире

Перевод статьи How to use variable fonts in the real world с сайта clearleft.com для CSS-live.ru, с разрешения автора — Ричарда Раттера

Использовать вариативные шрифты в реальном мире не так-то легко, как оказалось. Эта статья поясняет, как мы справились с этим на новом сайте Ampersand и что мы узнали за это время.

Вариативный шрифт — один файл шрифта, который умеет вести себя, как много разных (более развёрнуто об этом можете прочитать в отрывке моей книги «Веб-типографика»). Уже немало сайтов продемонстрировали возможности вариативных шрифтов и самой технологии управления шрифтом в их основе, но для нового сайта конференции Ampersand я хотел показать, как вариативные шрифты используются на реальном сайте. Возможно, это будет первый коммерческий сайт, который когда-либо сделал это.

Вариативные шрифты в действии на сайте Ampersand

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

Софта с поддержкой вариативных шрифтов уже на удивление много. К примеру, последние версии Photoshop и Illustrator поддерживают вариативность шрифта, и если у вас  macOS 10.13+ или iOS 11+, то системный шрифт San Francisco широко использует управление шрифтом. Тем не менее, доступных шрифтов для использования крайне мало. Коммерческих вариативных шрифтов пока что крайне мало (Dunbar and Fit — яркие исключения) , но есть растущее число бесплатных и экспериментальных вариативных шрифтов, они представлены в интерактивной песочнице Axis Praxis.

Из этой ограниченной палитры шрифтов мы (точнее, дизайнер Clearleft Джеймс Гилиед) выбрали Mutator Sans для декоративного текста и Source Sans для основного текста, чтобы получился дизайн в манере Сола Басса. В обоих шрифтах нам доступна шкала изменения жирности. Шрифты выбраны, теперь пошёл сложный, многоэтапный процесс реализации их вариативности на сайте. Я покажу вам весь путь, который нам (точнее, разработчику Clearleft Марк Перкинс) пришлось пройти, используя упрощённые фрагменты кода.

1. Подключаем шрифты

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

Мы скачали вариативный шрифт Source Sans с его домашней страницы на Github и использовали @font-face с форматом truetype-variations, чтобы его подключить:

@font-face {
  font-family: 'SourceSans';
  src: url('source-sans-variable.ttf') format('truetype-variations');
}

Затем мы могли бы установить вариативный шрифт Source Sans в качестве основного шрифта для страницы обычным способом:

html {
  font-family: 'SourceSans', sans-serif;
}

2. Установка жирности

Вариативные шрифты в CSS реализованы так, чтобы использовать существующие свойства для определенных зарегистрированных изменяемых параметров. Для основного текста этого дизайна используется три варианта жирности: regular, semibold и black. Мы установили жирные шрифты с помощью обычного font-weight.

.hero { font-weight: 900; }
.blurb { font-weight: 600; }

С вариативными шрифтами жирность больше не ограничена интервалом 100. Теперь можно брать любое целое число в диапазоне 1-999. Для главного заголовка набранного Mutator Sans мы использовали тонкие различия в жирности для каждой буквы, чтобы дизайн сильнее производил впечатление нарисованного от руки.

b:nth-child(1) { font-weight: 300; }
b:nth-child(2) { font-weight: 250; }
b:nth-child(3) { font-weight: 275; }

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

3. Чиним браузеры кроме Safari

Кода выше достаточно, чтобы Safari работал как надо. Он показывает, как правильно делать (и как это будет делаться в будущем).

Chrome 62+, Firefox 57+ и Edge 17+ уже поддерживают вариативные шрифты (Firefox только на Mac, и если установить правильный флаг). Однако, ни один из предыдущих примеров кода в них не работает.

Начнём с того, что ни один из трёх браузеров не понимает format('truetype-variations'), и шрифт в них вовсе игнорируется. Решение — добавить другое свойство в правило @font-face. Оно ссылается на тот же самый файл шрифта, но с обычным format:

@font-face {
  font-family: 'SourceSans';
  src: url('source-sans-variable.ttf') format('truetype-variations'),
       url('source-sans-variable.ttf') format('truetype');
}

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

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

.hero {
    font-weight: 900;
    font-variation-settings: "wght" 900;
}

Это привело к другой проблеме. Поскольку font-variation-settings — «низкоуровневое» свойство, на него влияет font-weight, в результате к шрифту с уже увеличенной жирностью применяется еще и «ложная жирность». Поэтому пока уберём font-weight.

.hero {
    font-variation-settings: "wght" 900;
}

4. Вырезаем подмножество и создаем WOFF2

Вариативный шрифт Source Sans довольно большой: файл TrueType весит аж 491 кБ. В основном из-за того, что он содержит около 2000 знаков, включая греческий алфавит, кириллицу, разные варианты букв и символы. Первым делом, чтобы уменьшить размер файла, нужно создать подмножество и избавить шрифт от заведомо не нужных нам символов.

Мы тщательно подошли к выбору того, что оставить в шрифте, и в итоге ограничились диапазонами символов «Базовая латиница», «Дополнение латиницы — 1» и «Расширенная латиница — A»: в общем, около 400 знаков, покрывающих большинство европейских языков и пунктуацию. В терминах юникода это U+0020–007F, U+00A0–00FF и U+0100–017F.

Есть множество онлайн-инструментов для вырезания подмножества из шрифтов. К примеру, Fontsquirrel. Однако, все инструменты, которые я пробовал, удаляли данные вариативности. А значит, командная строка нам в помощь. Мы вырезали подмножество из этого шрифта с помощью опенсорсной программы pyftsubset, компонента fonttools (смотрите руководство Майкла Херолда). Если ваш выбор — Node, то тогда лучше использовать Glyphhanger.

Как Glyphhanger, так и fonttools (если у вас также установлено сжатие Brotli) вернут файл с вырезанным подмножеством формата WOFF2. Нам не нужен обычный WOFF, поскольку все браузеры с поддержкой вариативных шрифтов также поддерживают превосходный WOFF2.

После вырезания подмножества и конвертации в WOFF2 у нас получился на удивление крошечный файл в 29 кБ. Мы поправили @font-face соответственно:

@font-face {
  font-family: 'SourceSans';
  src: url('source-sans-variable.woff2') format('woff2-variations'),
       url('source-sans-variable.woff2') format('woff2');
}

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

5. Шрифты для несовместимых браузеров

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

Для решения этой проблемы нужно использовать невариативные (одностилевые) шрифты для этих браузеров. Это будет работать, если сначала указать ссылку на одностилевые файлы шрифта в @font-face (как обычно), содержащий жирность шрифта, а после добавить в это же правило ссылку на вариативный.

@font-face {
  font-family: 'SourceSans';
  src: url('source-sans-variable.woff2') format('woff2-variations'),
       url('source-sans-regular.woff2') format('woff2');
  font-weight: 400;
}
@font-face {
  font-family: 'SourceSans';
  src: url('source-sans-variable.woff2') format('woff2-variations'),
       url('source-sans-black.woff2') format('woff2');
  font-weight: 900;
}

Браузеры с поддержкой вариативных шрифтов скачают (единожды) файл, помеченный как format(‘woff2-variations’), а остальные браузеры получат одностилевые шрифты помеченные как» format('woff2').

Три одностилевых текстовых шрифта весят 47 кб, что на 62% больше одного файла с вариативным шрифтом.

Ранее я упоминал, что только Safari поддерживает format('woff2-variations'). Так что, если мы хотим отдать вариативный шрифт другим браузерам с его поддержкой, предыдущий код спутает нам все карты. Поэтому мы прибегли к другой тактике, ради которой кода понадобилось побольше. Во-первых, мы дали вариативному и одностилевому шрифту разные имена файлов, отделив таким образом ссылки на них.

@font-face {
  font-family: 'SourceSansVariable';
  src: url('source-sans-variable.woff2') format('woff2-variations'),
       url('source-sans-variable.woff2') format('woff2');
}
@font-face {
  font-family: 'SourceSans';
  src: url('source-sans-black.woff2') format('woff2'),
       url('source-sans-black.woff') format('woff');
  font-weight: 900; 
}
@font-face {
  font-family: 'SourceSans';
  src: url('source-sans-semibold.woff2') format('woff2'),
       url('source-sans-semibold.woff') format('woff');
  font-weight: 600; 
}

Затем нам понадобилось правило @supports, чтобы гарантировать, что нужный шрифт попал нужному браузеру:

html {
  font-family: 'SourceSans' sans-serif;
}
@supports (font-variation-settings: "wght" 400) {
  html {
    font-family: 'SourceSansVariable', sans-serif;
  }
}

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

Здесь мы возвращаемся к самым жирным вариантам. Если вы помните, мы заменили font-weight на font-variation-settings, чтобы во всех браузерах кроме Safari можно было выбирать жирность. Как можно заметить, из-за такой замены в браузерах без поддержки вариативных шрифтов правильная жирность также не отобразится. Поэтому нам нужно вернуть обратно font-weight в другом правиле @supports:

.hero {
  font-weight: 900;
}
@supports (font-variation-settings: "wght" 900;)
 {
  .hero {
    font-variation-settings: "wght" 900;
    font-weight: normal;
  }
}

И последнее. Ради перестраховки, каждый раз при использовании вариативных шрифтов вам следует явно устанавливать жирность шрифта, если вам нужна жирность 400 или normal. Каждый браузер отображает внешний вид вариативного шрифта по умолчанию слегка по-своему. Во время нашего тестирования Firefox отображал текст по умолчанию значительно светлее чем Safari и Chrome, пока мы не сделали это:

html {
  font-family: 'SourceSans' sans-serif;
  font-weight: 400;
}
@supports (font-variation-settings: "wght" 400)
 {
  html {
    font-family: 'SourceSansVariable', sans-serif;
    font-variation-settings: "wght" 400;
  }
}

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

P.S. Это тоже может быть интересно:

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Ваш E-mail не будет опубликован

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