Всё о вариативных шрифтах

Вариативный шрифт — это файл, в который включен целый диапазон стилей для конкретного шрифта.

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

В 2016 году группа компаний Adobe, Apple, Google и Microsoft анонсировали новую версию формата OpenType — OpenType Font Variables. Начиная с этого момента, дизайнеры шрифтов получают возможность заложить в один файл всю информацию о нескольких вариантах начертания шрифтового семейства. Суть этого формата в том, что не нужно заранее генерировать статичные начертания, чтобы заложить их параметры (теперь все можно подбирать прямо в графическом редакторе, благодаря функции предпросмотра).

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

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

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

Разброс между двумя крайними начертаниями символа шрифта называется осью.

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

Существует пять основных осей вариативности:

1. Ось толщины (wght — вес), с которой связано понятие font-weight — это любое целое число в диапазоне от 1 до 999 (вместо 100 в стандарте CSS3). В статичных шрифтах используют, например, Regular, SemiBold, Bold и другие.

2. Ось ширины (wdth — ширина). С ней связано понятие font-stretch, которое использует процент, где 100% — это нормальная пропорция, 50% — узкие начертания, а 200% — сверхширокие. В статичных семействах обычно несколько вариантов ширин, например Normal, Condensed или Extended. В вариативном шрифте есть возможность вручную подобрать ширину между самым узким и самым широким начертаниями.

3. Ось наклона (slnt — угол наклона), с которой связано понятие font-style — это любой угол наклона между oblique –90deg и oblique 90deg. Она применима в тех случаях, когда буквы в наклонном начертании имеют такую же конструкцию, как и в прямом. Чаще всего такой вариант можно найти в гротесках.

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

5. Ось оптического размера (opsz — оптический размер). Она менее распространенная, но тоже заложенная в формат OTF Var. С этой осью связано понятие font-optical-sizing — новая опция, с синтаксисом либо auto, либо none, включающая ось оптических компенсаций, в случае, если она предусмотрена изначально. Обычно с уменьшением размера сокращается контраст между широкими и узкими элементами букв, увеличивается высота строчных букв и расстояние между ними. Все это способствует повышению читабельности.

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

В первую очередь дизайнер создает центральный стиль (или стиль «по умолчанию»), обычно это Regular — вертикальный римский стиль с наиболее типичным весом и шириной. Затем этот стиль дополняется и соединяется с другими стилями в непрерывном диапазоне, называемом «осью». Самая распространенная ось — это Weight (Вес). Двигая центральный стиль по оси веса, можно получать промежуточные состояния (стили), например, стиль Bold для жирного шрифта. Любой отдельный стиль вдоль оси называется «экземпляром» вариативного шрифта. Некоторые экземпляры названы разработчиком шрифта, например, положение 600 по оси веса называется SemiBold.

Способ обработки курсива в вариативных шрифтах существует в двух разных подходах:

1. Гарнитуры, такие как Helvetica или Roboto, имеют совместимые с интерполяцией контуры, поэтому их стили Roman и Italic могут быть интерполированы между собой, а ось Slant (Наклон) может использоваться для перехода от Roman к Italic.

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

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

Несмотря на то, что оси могут управлять одним и тем же элементом, они могут использовать разные значения.

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

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

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

Если вам понравилось какое-то определенное начертание, то можно его выбрать и использовать в дальнейшем это семейство как статичное.

1. Source Sans font

2. ABC Whyte и Whyte Inktrap от Dinamo

ABC Whyte имеет плавные и резкие переходы, а Inktrap — грубоватые изогнутые стыки внутри букв.

3. GT Ultra от Grillitype

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

4. Cheee от OH no Type Co

Название этого шрифта — детское произношение слова “cheese” (сыр). Он выглядит странно, но восхитительно.

5. Fraunces от Undercase Type

Fraunces — шрифт в «псевдо старом стиле». В рамках этого стиля первостепенное значение имеет индивидуальность, а не правильное строгое построение букв.

6. Roboto Flex от Google Fonts

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

7. Noto Sans Display от Google Fonts

Шрифт с поддержкой латиницы, кириллицы и греческого языка, который составит идеальную пару другим шрифтам Noto Sans.

8. Anicons от Wenting Zhang и Hua Shu

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

9. WT Zaft² от WiseType

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

10. Amstelvar

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

Если у вас сайт с высокой посещаемостью (около 1 млн. загрузок в день), на котором вы используете полное семейство какого-либо статичного шрифта, то со всеми начертаниями на сайте они занимают места в три (!) раза больше, чем займет вариативный шрифт этого семейства. Соответственно, вариативный шрифт использовать практичнее, поскольку скорость загрузки сайта при этом будет выше.

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

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

‍

1. axis-praxis.org, где собрано большое количество вариативных шрифтов. Шрифты с этой библиотеки можно использовать и также загружать свои.

2. v-fonts.com, где тоже можно попробовать различные шрифты в упрощенном виде.

3. dinamodarkroom.com от студии Dinamo. На сайте можно протестировать оси вариативности шрифтов, также свойства OpenType и выгрузить статичные шрифты с заданными параметрами.

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