Знакомьтесь, вариативные шрифты (variable fonts)!

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

28 марта 2017 г.

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


В сентябре 2016 года на конференции ATypI была представлена новая версия формата OpenType под названием «ОпенТайп Вариативность» (OpenType Font Variables, или OT1.8), открывающая новую эпоху цифрового шрифта. Если вкратце, это технология, благодаря которой один-единственный шрифтовой файл ведет себя как бесконечное множество начертаний. То есть файл один, а информации в нём на целое шрифтовое семейство, каким бы сложным оно ни было, — главное, чтобы всё интерполировалось. Осей интерполяции при этом может быть сколько угодно — насыщенность, пропорции, контраст, изменение размера строчных/выносных, анимация, наконец, — дизайн всего шрифта может видоизменяться бесконечно.

Axis-Praxis это онлайн визуализатор возможностей вариативных шрифтов. Проект Лоренса Пиннея (Laurence Penney)

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

Zeitung — проект голландской студии Underware, предоставляющей своим покупателям специальный экстеншн к программам Адобе, позволяющий управлять вариативностью шрифта Zeitung

Огромная вариативность одного-единственного шрифтового файла — это не только удобство, но и экономия — размеров и времени. Допустим, ваш сайт использовал три начертания шрифта — теперь вам понадобится всего один файл. На уровне запросов к серверу это тоже приводит к экономии — всего один запрос там, где раньше было три. Шрифтовые дизайнеры, знакомые с интерполяцией давно, понимают, что две оси интерполяции — это 1000 на 1000 вариантов, то есть миллион вариантов, к примеру, насыщенности и пропорции. Дополнительная ось превращает миллион в миллиарды и так далее. И всё в одном файле. Раньше шрифтовым дизайнерам приходилось строить файлы для десятков начертаний, теперь будет один файл. В этом бесконечном пространстве интерполяционных возможностей шрифтовой дизайнер сможет указать, какие позиции (named instances) какими начертаниями считать.

В спецификации «ОпенТайп-вариативностей» пять самых распространённых осей заложены в четырёхбуквенные тэги (следующие примеры взяты из статьи Ричарда Руттера (Richard Rutter) «Get started with variable fonts»): насыщенность — wght, пропорция — wdth, курсивность — ital, наклон — slnt и оптические размеры — opsz. Эти шрифтовые вариативности могут быть включены с помощью font-weight-, font-stretch- и font-style-свойств. CSS4 также обновился с новыми значениями для поддержки «ОпенТайп-вариативности»:

font-weight — это любое целое число в диапазоне от 1 до 999 (вместо 100 в стандарте CSS3).

font-stretch использует процент, где 100% — это нормальная пропорция, 50% — узкие начертания, а 200% — сверхширокие.

font-style использует угол наклона между oblique –90deg и oblique 90deg.

font-optical-sizing — новая опция, с синтаксисом либо auto, либо none,включающая ось оптических компенсаций, если она заложена в шрифте.

Шрифтовые дизайнеры могут использовать и свои собственные четырёхбуквенные тэги — это позволяет им закладывать в шрифт бесконечную вариативность: контраст, размер строчных и выносных элементов, форму засечек, фактуры, небольшие детали, росчерки. Используя синтакс, подобный font-feature-settings, кастомизированные оси, так же как и созданные заранее, доступные через font-variation-settings-свойства. Вот пример того, как это выглядело бы в случае очень широкого начертания, лёгкого по насыщенности и оптимизированного под 48-й кегль:

h2 { font-variation-settings: “wdth” 600, “wght” 200, “opsz” 48; }

Как и обычный OpenType-шрифт, новый вариативный шрифт может быть использован как веб-шрифт (ttf) или компактный веб-шрифт (woff). Так же как и с обычными веб-шрифтами, тут вам потребуется конструкция @font-face,в которой вы зададите format или woff-variations или ttf-variations. Для браузеров, которые не поддерживают вариативные шрифты, вы можете прописать вот такие инструкции:

@font-face { font-family: ‘Nicefont’; src: url(‘nicefont_var.woff2’) format(‘woff-variations’); src: url(‘nicefont_regular.woff2’) format(‘woff2’); font-weight: normal; font-style: normal; } @font-face { font-family: ‘Nicefont’; src: url(‘nicefont_var.woff2’) format(‘woff-variations’); src: url(‘nicefont_black.woff2’) format(‘woff2’); font-weight: 800; font-style: normal; }

Эта новая технология теоретически способна перевернуть мир дизайна. Но есть ряд обстоятельств, от которых это будущее зависит. Самая главная проблема — поддержка нового формата операционными системами, браузерами и софтом. Поводом для оптимизма может служить то, что OT1.8 стал результатом сотрудничества Apple, Microsoft, Adobe и Google, которые пообещали уже в начале 2018 года внедрить техническую поддержку формата в свои продукты. С другой стороны, неясно, насколько эта технология заинтересует графических и веб-дизайнеров. Всё же управление вариативным шрифтом требует чуть больших знаний в области шрифтового дизайна, да и многотысячная вариативность, возможно, не каждому дизайнеру понравится — количество последователей Массимо Виньелли и его принципиального самоограничения в шрифтовой палитре достаточно велико.

Красивая визуализация принципов Массимо Виньелли с беханс-страницы Каран Патель (Karan Patel)

Но и с точки зрения шрифтовой индустрии предстоит продумать многое: от инструментария до ценовой политики. До сих пор на рынке присутствовали два вида шрифтовых продуктов: отдельные начертания (в среднем по 50–150 долларов) и полные шрифтовые семейства (в среднем 500–750 долларов за семью). И по какой цене теперь продавать вариативный шрифт? По цене семейства или по цене самостоятельного начертания? Многое ещё неясно, но можно с уверенностью сказать, что так или иначе шрифтовая революция случилась, готовы мы к ней или нет.

Так выглядит вариативная покупка, созданная нами для шрифта BigCity Grotesque Pro

Для тех, кто хотел бы узнать больше:

OpenType 1.8.1 Announcement — статья Джона Хадсона (John Hudson, дизайнер шрифта, Tiro Typeworks),

— вот здесь полная спецификация OpenType 1.8.1 Specification,

— а это полный рассказ Тома Рикнера (Tom Rickner, супервайзер появления формата TrueType в компании Apple) о том, какой путь технология проделала от TrueType GX до Variable Fonts:

Part 1: from TrueType GX to Variable Fonts by Tom Rickner

Part 2: from TrueType GX to Variable Fonts by Tom Rickner

— Вот тут недавний рассказ технического директора Monotype Боба Тейлора (Bob Taylor).

— Вот здесь в твиттере известный веб-дизайнер Ник Шерман (Nick Sherman) собирает все упоминания и новости о формате.

Пошаговая инструкция для шрифтовых дизайнеров по созданию вариативных шрифтов.

Упомянутые шрифты