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

1 мая 2018 г.

Использование вариативных шрифтов в реальном мире становится все хитрее. Этот пост объясняет то, как мы разобрались с ними в нашем новом проекте для сайта Ampersand и что мы выучили в процессе обучения.

Это дополненный перевод статьи How to use variable fonts in the real world

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

Два месяца назад поддержка браузерами вариативных шрифтов была на уровне 7%, но на данный момент их поддерживает уже более 65% бразуеров. Safari 11, Chrome 62+, Firefox 57+ и Edge 17+ все они поддерживают вариативные шрифты(Firefox делает это только на маке и если то, если вы выставите нужные параметры). Это говорит о том, что вариативные шрифты это уже вполне применяемая технология на данный момент. Но как вы видите, не все её равноценно поддерживают.

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

Из этой ограниченной палитры шрифтов, мы выбрали Mutator Sans для отображаемого текста и Source Sans для основного текста в дизайне Saul Bass. Оба шрифта позволили нам воспользоваться вариативностью изменения их насыщенности. Оба выбранных шрифта привели нас к искусной, много-ступенчатой работе при применении вариативных шрифтов на сайте. Я покажу вам как мы все это сделали и применили на сайте, с использованием упрощенных примеров кода.

1. Ссылки на шрифты

Чтобы применить вариативные шрифты и заставить их работать в простом виде вам нужно сделать несколько простых манипуляций. На время написания статьи у Safari и Chrome была самая полная поддержка. Если вы сделаете так, как описано ниже, то вам понадобится последняя версия одного из этих брузеров.

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

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

Дальше мы могли бы выставить вариативный шрифт Source Sans, как основной на странице

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

2. Выставляем насыщенность шрифта

Исполнение вариативности шрифтов в CSS разработана, чтобы использовать существующие свойства для определенных предустановленных вариаций. Мы используем три варианта насыщенности в теле письма: обычный, полужирный и черный. Мы выставляем жирным шрифтам font-weight, обычным способом:

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

Тем не менее, это не работает как ожидалось без изменения правила @font-face. Когда вы применяете дескриптор font-weight в правиле @font-face, то вы говорите браузеру, что шрифт соответствует насыщенности и только этой насыщенности. Когда вы пропускаете font-weight дескриптор, браузер относится к правилу так, как если бы вы выставили font-weight: 400. В этом случае, является ли ваш шрифт вариативным с указанием насыщенности или нет, эта самая насыщенность будет сжата до 400.

Чтобы использовать параметры насыщенности и чтобы font-weight свойства работали так, как ожидалось, нам надо добавить диапазон использования font-weight в @font-face правило:

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

Диапазон использования позволяет вариативным шрифтам показывать в любой насыщенности от 1 до 999. Конечно же вы можете указать более сложный и точный радиоус, если хотите. В ближайшем будущем CSS Fonts уровня 4 в спецификациях, позволят вам пропускать дескрипторы диапазонов, так как дефолтное значение получит новое значение auto, следовательно можно будет использовать полный диапазон насыщенности в вариативных шрифтах и по-умолчанию будет normal для статичных шрифтов. Тоже самое применится и для других дискрипторов, таких как font-stretch.

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

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

3. Частичное включение в подкатегорию и создание WOFF2

Вариативный шрифт Source Sans довольно большой, файл TrueType весит 491Kb. В основном это из-за того, что он имеет большой набор символов, практически 2000 глифов, включая Greek, Cyrillic, альтернативные знаки и символы. Вашим первым шагом будет сокращение размеров файла и создание подкатегории частичного включения в шрифт, которая больше не будет включать в себя символы, которые вам вообще никогда не понадобятся.

Мы решили быть довольно консервативными в том, что нам будет нужно, так что мы решили взять простую латиницу, дополнение Latin-1 и Latin Extended-A диапазон символов. Всего около 400 символов, покрывая почти все европейские языки. В Unicode это U+0020–007F, U+00A0–00FF and U+0100–017F.

Есть множество онлайн инструментов для частичного включения шрифтов в подкатегории, например такие как Fontsquirrel. Тем не менее, все инструменты, которые я видел, вырезают разные данные. Это говорит о том, что вам нужно использовать подход командной строки. В итоге мы сделали все это, используя open source pyftsubset, компонент fonttools (Смотрите подробное руководство по этому) Если вам больше подходит Node, вы бы могли вместого этого использовать Glyphhanger.

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

Вся эта рутина с частичным включение в подкатегорию и конверсия в WOFF2 дали нам приятно маленький файл в 29kb. Соответственно мы обновили @font-face правило:

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

Итак, эта работа сделана для браузеров, которые поддерживают вариативные шрифты. Но это едва ли половина истории.

4. Задаем шрифты для неподдерживающих браузеров

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

Чтобы обойти это затруднение, вам надо предоставить невариативные шрифты для подобных браузеров. На время написания, CSS Fonts Module Level 4 указывал, что вариативные шрифты могут быть обозначены с точным fotmat() значением:

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

Это позволяет вам создать @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; 
}

Предшествующий код указывает на файлы шрифтов единого стиля с @font-face правилом включающим насыщенность шрифта, так же как и обычно. Вы затем можете повторить обращение к файлу вариативного шрифта в каждом правиле. Браузеры, которые поддерживают вариативные шрифты скачают файл отмеченный форматом (‘woff2-variations’), а бразуеры которые не поддерживают, скачают одностильные шрифт, отмеченный как (‘woff2’).

НО! Только Safari поддерживает format(‘woff2-variations’) и этот синтаксис меняется, что скорее приведет к беспорядку в действиях, если нам понадобятся другие поддерживаемые браузеры, чтобы получить вариативный шрифт. Таким образом, мы прибегли к другой, более многословной тактике. Во-первых, мы дали вариативному шрифту другое имя в первом одностилевом написании, таким образом это разделит ссылки на вариативные шрифты от одностилевых шрифтов:

@font-face {
  font-family: 'SourceSansVariable';
  src: url('source-sans-variable.woff2') format('woff2');
  font-weight: 1 999;
}

@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: normal) {
  html {
    font-family: 'SourceSansVariable', sans-serif;
  }
}

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

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

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

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

Стандарты написания гибкого, надежного и жизнеспособного HTML c CSS CSS свойство background-image как антипаттерн