Что такое вариативные шрифты
Вариативные веб шрифты
Прошла уже не одна неделя с You Gotta Love Frontend конференции, но еще не поздно пройтись по нескольким поднятым вопросам. Я думаю это будет ряд статеек на интересные мне темы, надеюсь, как и вам. Данный пост это перевод на статьи о вариативных шрифтов, используя которые Lea Verou показывала ряд трюков в цикле своих выступлений «Cекреты CSS». Учитывая, что это был первый раз когда я услышал о вариативных шрифтах, о трюках говорить пока рано 🙂
Вариативные шрифты это будущее веб типографии которые предлагают ряд возможностей управления отображением текста на экранах (размер, жирность, стиль). И все это при относительно малом размере файла. Пора сказать goodbye бесконечным дебатам на тему, сколько шрифтов вам необходимо подключить и дать возможность вашему контенту жить новой, прекрасной жизнью.
В качестве примера, в тексте (на картинках) используется Output Sans Variable вариантивный шрифт который может быть настроен по двум осям (вес и скос). В оригинальной статье используется 18 разных стилей шрифта и все это в одном файле шрифта размером в 57 KB. По факту, вариативные шрифты это новая хайповая фича для каждого любителя типографии со времен web fonts. К концу года вариативные шрифты будут поддерживаться всеми основными браузерами и в начале 2019 году, мы будем использовать такие шрифты как альтернативу статическим шрифтам. они работают, и что вы можете с ними сделать?
Введение
В рамках своего исследования, я нашел самое простое пояснение вариативным шрифтам. Один вариативный шрифт хранится в одном файле, но способен заменить собою множество различных шрифтов хранящихся в разных файлах. Традиционно под каждый вес (жирность) или стиль (italic, bold, light) шрифта вам надо загрузить несколько соответствующих шрифтов, файлов. С OpenType вариативным файлом шрифта, вы можете сгенерировать множество разных вариации шрифта причем любой градации (granular, например weight = 100 или 101 и так далее).
Вариативные шрифты могут иметь больше осей. Данный пример демонстрирует две оси — ширину и вес.
Малый размер файла достигается за счет того, что каждый символ имеет только один контур. Точки которые формируют контур, имеют ряд инструкций, которые определяют их поведение и формирование того или иного стиля. Интерполяция происходит динамически прямо в браузере. В сентябре 2016 года, OpenType Font Variations были публично анонсированы и разработаны совместными усилиями Adobe, Apple, Google, and Microsoft. Очевидно, что такая кооперация придала вариативным шрифтам некий толчок на быструю реализацию.
Возможности
Это всегда зависит от шрифта. Дизайнерам доступны те или иные оси для манипуляции шрифтом. На данный момент существует 5 зарезервированных осей которые могут быть динамически изменены: wdth — ширина, wght — вес, ital — курсив, slnt — скос, opsz — оптический размер.
Большинство шрифтов предоставляют оси веса и ширины, похоже они наиболее популярны. Но так же могут быть какие-либо кастомные оси. Например serifs (засечки) или свойства нижнего и верхнего регистра.
Действительно ли нам необходимо так много разных стилей?
Давайте остановимся и спросим себя, зачем нам нужны разные стили шрифта? Типографика придает словам смысл посредством дизайна, что означает хорошая типография может поддерживать контент, плохая (или неуместная) типография — портить. Текст может быть отформатирован различными стилями того же шрифта. Например жирный текст, выделяет, что-то важное. А что-то важное, не будет выделятся, если шрифт монотонный и все выглядит одинаково. Разумеется можно например использовать цвет, но это совсем другая история. Одаренные дизайнеры любят БОЛЬШОЙ И ЖИРНЫЙ ТЕКСТ красного цвета на билбордах.
Разумеется, что различные стили так же применяются к заголовкам, цитатам, и прочим артефактам в тексте, а не только к выделению слов.
Пример использования кастомных осей:
Как использовать вариативные шрифты?
Найдите доступный вариативный шрифт
Данная технология достаточно нова, по этому перед тем как начать использовать вариативные шрифты, вам необходимо сначала найти их 🙂 Отличным местом для поиска является v-fonts.com. Тут вы сможете найти кучу различны вариативных шрифтов, поиграться с ними и скачать. Так же список шрифтов можно найти тут
Интегрируйте шрифты в ваши стили
Поддержка браузерами уже достаточно хороша, около 65%. Все последние браузеры в принципе поддерживают вариативные шрифты. Firefox поддерживает за флагом.
Интеграция вариативного шрифта в целом очень проста. Делаете вы это используя ‘@font-face’
Узнайте какие оси поддерживает шрифт
У каждого шрифта может быть свой набор поддерживаемых осей. Если вы не знаете возможностей своего шрифта, вы можете использовать замечательный тул от Roel Nieskens. Просто перетяните туда свой шрифт. Там же вы сможете скопировать сгенеренный CSS стиля для шрифта и использовать его в своем проекте.
Стилизация вариативного шрифта
Не все шрифты будут поддерживать эти свойства, и не все браузеры поддерживают их на данный момент.
Того же самого эффекта вы можете достичь с помощью:
И разумеется шрифт может поддерживать какие-либо кастомные свойства, доступ к которым вы будете иметь через тот же font-variation-* :
П.C. Я достаточно давно не занимался переводом, думаю это дело практики. Если вы заметили какие-либо косяки или не точности, пишите мне в ЛС. Комментарии оставим, для комментирования
upd: Спасибо @gt8on, поправил пару ссылочек
upd: Спасибо MissisRol, поправил перевод 🙂
Вариативные шрифты: что это и как использовать?
В этой статье расскажем о вариативных шрифтах — насколько это интересный, полезный инструмент, но недооцененный одновременно. О минусах и нюансах работы с ними также не забудем упомянуть.
В статье будут рассмотрены следующие вопросы:
Для начала, чтобы ввести вас в курс дела, расскажем об истории развития шрифтовых технологий.
Во второй половине 80-х годов XX века были представлены форматы PostScript компанией Adobe и TrueType компанией Apple для разработки шрифтовых файлов. Оба они использовали кривые безье для построения знаков. Этими форматами в обновленном виде мы пользуемся и по сей день при работе над шрифтовыми файлами.
1980-е — PostScript (Adobe), TrueType (Apple)
В 1991 году компанией Adobe была представлена технология Multiple Master как расширение формата PostScript, которая позволяла хранить в одном шрифтовом файле несколько вариантов контура для одного глифа. Эти варианты были крайними точками на оси, между которыми можно было найти промежуточные значения, например, изменить вес или ширину.
1991 – Multiple Master (Adobe)
Чтобы пользоваться таким шрифтом, сначала нужно было сгенерировать статичное начертание с помощью специальной программы (Adobe Type Manager) и после этого загрузить его в систему, чтобы использовать в графическом редакторе. Из-за сложности использования этот формат так и не стал популярным, а шрифтовые дизайнеры продолжили выпускать статичные начертания.
В 1997 компаниями Adobe и Microsoft совместно была представлена технология OpenType. Она основывалась на формате TrueType, но включала в себя возможность внедрить заметно большее количество знаков (65000, ранее лимит был 256), а также OpenType фичи, без которых мы не представляем сейчас современный шрифт. Здесь речь идет, например, о поддержке капители, табулярных знаков, супериоров, стилистических сетов, контекстных альтернатив и т.д. OpenType формат и по сей день является самым популярным.
И, наконец, в 2016 году Adobe, Apple, Google и Microsoft анонсировали новую версию формата OpenType — OpenType Font Variables. С этого момента шрифтовые дизайнеры имеют возможность заложить информацию о нескольких начертаниях шрифтового семейства в один файл. Суть этого формата похожа на Multiple Master с одним принципиальным отличием — теперь не нужно заранее генерировать статичные начертания. Параметры можно подбирать прямо в графическом редакторе.
Вариативные шрифты
Вариативные (или настраиваемые) шрифты — это, без преувеличения, новая страница в веб-типографике. Настраиваемые шрифты стали возможны благодаря совместным усилиям компаний Microsoft, Apple, Adobe и Google. Концепция была впервые представлена в сентябре 2016 года, вместе с релизом OpenType 1.8. На самом деле, работы в этом направлении велись ещё в 90-х, но только широкое использование шрифтов в вебе дало этой идее вторую жизнь и бурное развитие.
На момент написания статьи вариативные шрифты уже достаточно хорошо поддерживаются приложениями (Photoshop, Illustrator) и браузерами (Chrome, Edge, Safari, в Firefox пока за флагом и только на MacOS), а кроме того, выложено несколько свободно распространяемых демо-версий, следовательно, уже можно заняться изучением возможностей таких шрифтов и подготовиться к их использованию в реальной жизни.
Возможности нового формата решают сразу две проблемы: во-первых, снимаются ограничения на количество доступных начертаний: они больше не требуют отдельных файлов, а количество сочетаний ограничивается только настройками шрифта и фантазией разработчика. Во-вторых, для получения любого количества разных начертаний на страницу достаточно будет подключить всего один файл, что позволит сэкономить трафик и быстрее показывать страницы пользователю.
Настройками шрифта можно управлять с помощью CSS.
Высокоуровневые и низкоуровневые CSS-свойства
Высокоуровневые свойства удобнее, но поддержка браузерами оставляет желать лучшего, в то время как низкоуровневыми уже вполне можно пользоваться.
Для каждого низкоуровневого свойства есть наборы предопределённых настроек, но при создании шрифта есть возможность добавить свои, что позволяет автору добавить в шрифт любое количество кастомных вариаций и фич.
Доступные настройки шрифта можно воспринимать как API: можно управлять только теми, которые предопределил разработчик. Если какие-то настройки не предусмотрены, ими управлять нельзя. Следовательно, чтобы полноценно пользоваться шрифтом, нужно точно знать какие возможности в нём есть. Для определения свойств шрифта удобно использовать вот эти сервисы:
Для экспериментов можно воспользоваться шрифтами, выложенными в открытый доступ:
font-variation-settings
В значении свойства через запятую перечисляются названия вариаций и значения для них. Названия вариаций в кавычках, названия кастомных вариаций пишутся капсом.
Авторы шрифтов сами определяют диапазон доступных значений. Если задать непредусмотренное значение, оно округлится до ближайшего подходящего.
Значение по умолчанию: normal (шрифт выглядит как обычно, настройки не применяются).
opsz — оптический размер.
Параметр управляет толщиной тонких линий, их отображение может быть критически важным для читабельности при малых размерах шрифта:
Здесь хорошо видно, что для обычного текста лучше задавать значение opsz поменьше, а для заголовков можно задать и побольше, потому что на крупных размерах шрифта тонкие линии будут видны в любом случае.
В отличие от простой трансформации, при изменении ширины вертикальные линии сохраняют свою толщину, соотношения линий остаются прежними, и шрифт не выглядит искажённым:
Управление шириной глифа доступно во многих шрифтах.
Ещё одна настройка, которая встречается во многих шрифтах. Она позволяет не только обойтись одним файлом для любых вариантов жирности, но также гибко управлять её значением.
Полный список предопределённых вариаций можно найти в спецификации OpenType, там же есть подробное описание каждой из них.
Как уже упоминалось выше, при разработке шрифта авторам не обязательно ограничиваться только вариациями из спецификации, они могут добавлять свои, что позволяет делать много интересного.
Например, у шрифта Decovar есть целых 15 настроек, из которых только одна стандартная — управление весом линий, в итоге из одного шрифта можно извлечь огромное количество вариантов:
В этом случае каждый отдельный стиль текста может задаваться набором значений:
Обратите внимание, что названия кастомных меток пишутся капсом.
А у Slovic — всего одна настройка, но она позволяет плавно переключаться между предустановленными стилями:
Значения вариаций можно анимировать.
font-feature-settings
Эта настройка позволяет включить или выключить некоторые возможности шрифта, например, лигатуры или отображение цифр в старом стиле:
Если фичу нужно включить, достаточно её имени, например:
Хотя запись типа «smcp» on помогает лучше понять что происходит в коде.
Если же нужно выключить, обязательно добавлять off :
Некоторые фичи включены по умолчанию, например, разные виды лигатур: clig, liga и rlig. Подробнее можно почитать в спецификации.
Здесь приведено лишь небольшое количество возможностей, полный список с подробными описаниями есть в спецификации OpenType.
Много примеров с кодом можно найти здесь: OpenType features in CSS.
Как уже говорилось выше, font-feature-settings — это низкоуровневая настройка. Спецификация рекомендует, по возможности, использовать высокоуровневые варианты, например:
Больше вариантов можно найти в разделе спецификации Font Feature Properties.
font-feature-settings может использоваться для получения более или менее радикального варианта шрифта:
Ещё интереснее распорядился фичами автор шрифта dT Jakob Variable Concept: он сделал не только вариативный шрифт, но и слоёный, и стиль для каждого из слоёв включается с помощью лигатур:
Не уверена, что это правильное использование лигатур, но вариант, безусловно, интересный.
Использование в реальной жизни
В данный момент не все браузеры поддерживают управление вариативными шрифтами, поэтому помимо настраиваемого шрифта на страницу придётся подключать обычные. Это предлагается делать следующим образом:
Затем с помощью @supports определяется поддержка настроек браузерами и задаётся нужный шрифт:
Настраиваемые шрифты — тема богатая, и заниматься ею можно до бесконечности. По моим ощущениям, описанные в статье вопросы — только верхушка айсберга.
Я совсем недавно начала погружаться в тему, так что могла допустить ошибки и неточности. Сообщите мне о них, пожалуйста, если найдутся.
«В мире шрифтов ничего подобного по масштабу не случалось с 1996 года»
Шрифтовые дизайнеры и разработчики о вариативных шрифтах и их значении для дизайна в России и мире.
28 марта графический и шрифтовой дизайнер, сооснователь дизайн-студии Moscow Design, шрифтовой студии CSTM Fonts и шрифтового магазина type.today Илья Рудерман на своей странице в Facebook посетовал на то, что в российском дизайнерском сообществе никто не уделяет внимания вопросу вариативных шрифтов. По его мнению, вариативные шрифты — это «революция», благодаря которой «скоро мир не будет прежним».
В ответ на публикацию Рудермана генеральный директор агентства «Лаборатория Артема Геллера» возразил, что его компания совместно с российским шрифтовым агентством «ПараТайп» ведет разработки в этом направлении, и опубликовал видео прототипа вариативного шрифта.
На видео изображена тестовая страница сайта axis-praxis.org, моделирующая возможность подбора насыщенности для заголовочного начертания и основного текстового начертания шрифта GOS font, разработанного «ПараТайп».
Шрифтовые дизайнеры рассказали vc.ru, что такое вариативные шрифты, что они значат для дизайна, когда и как смогут применяться и кто в России занимается их разработкой.
«Вариативные шрифты (variable fonts) — новый шрифтовой формат, который принципиально изменит будущее типографики», — объясняет в своей статье на type.today Илья Рудерман.
Это технология, благодаря которой один-единственный шрифтовой файл ведет себя как бесконечное множество начертаний. То есть файл один, а информации в нём на целое шрифтовое семейство, каким бы сложным оно ни было, — главное, чтобы всё интерполировалось. Осей интерполяции при этом может быть сколько угодно — насыщенность, пропорции, контраст, изменение размера строчных и выносных, анимация, наконец, — дизайн всего шрифта может видоизменяться бесконечно.
Возможное разнообразие вариаций фактически ограничено только воображением и работоспособностью шрифтового дизайнера, рассказывает в комментариях vc.ru технический директор «ПараТайп» Геннадий Фридман.
Вариативность возможна не только по знакомым дизайнеру параметрам: насыщенности, пропорциям, контрасту, оптическим характеристикам, высоте строчных знаков, но и просто по рисунку. В вариативном шрифтовом файле спрятаны все необходимые опорные начертания, способные к интерполяции.
К примеру, для выбора начертания по насыщенности, такими опорными будут самое тонкое и самое жирное начертания. Это — в самом простом случае, когда контуры в самом тонком и самом жирном начертаниях абсолютно совместимы между собой по количеству контуров, точек и прочему.
Более сложные варианты дизайна также можно реализовать в рамках вариативного шрифта. Подобная возможность предусмотрена в новом формате CFF2 (Compact Font Format, Version 2).
С точки зрения работы со шрифтом, после определения нужных для вариативного шрифта параметров, по словам Фридмана, вариативные шрифты не отличаются от обычных.
По словам Геннадия Фридмана, вариативный шрифт разработан прежде всего для профессионалов — людей, понимающих, какой шрифт им нужен для решения конкретных задач.
При этом, отмечает он, неважно, обычный или вариативный шрифт использует дизайнер: если у разработчика и заказчика есть конкретная задача, в рамках которой именно вариативный шрифт будет лучшим решением — важна не только вариативность и адаптивность, но и экономический аспект, — то такую возможность сегодня уже можно реализовать.
Во-первых, мечта любого дизайнера — иметь под рукой неограниченный набор начертаний шрифта. В вариативном шрифте легко и быстро подобрать нужные насыщенность шрифта или его пропорции. Во-вторых, это экономия времени и денег. В-третьих — это реальное шрифтовое многообразие. Скажем, сайты перестанут быть похожи друг на друга.
Вариативный шрифт изменит наши возможности даже больше, чем в своё время изменило появление формата OpenType. И, думаю, что это может произойти уже в этом году. Правда, всего через неделю эта оценка может измениться — так быстро сейчас происходит развитие этого направления.
В техническом смысле ничего подобного по масштабу в мире шрифтов не случалось со времён появления шрифтов OpenType в 1996 году. Напомню, до 1996 года мы все пользовались очень ограниченными по объёму файлами (до 256 знаков в файле) и полностью отсутствовала кроссплатформенность — то есть под разные операционные системы требовались отдельные файлы, что приводило к массе проблем несовместимостей.
Объявленное обновление OpenType 1.8 и проработанная новая спецификация формата лишь начало — мы сегодня представить не можем как это повлияет на окружающий нас мир, и именно это и воодушевляет. Шрифтовым дизайнерам по-прежнему придётся много рисовать, возможно даже больше, чем раньше, но использование шрифтов пользователями станет наконец-то полновесным.
Легче всего это показать на нашем шрифте BigCity Grotesque Pro — в прошлом году мы предложили нашим покупателям самостоятельно выбирать насыщенность (жирность) и оказались первыми в мире, кто сделал подобное в такой вариативности. Если раньше покупатель был ограничен выбором из предложенных 7–10 начертаний, то здесь появилась возможность выбора на шкале от 0 до 1000.
Как рассказывает Геннадий Фридман, подобные форматы уже возникали ранее, однако по разным техническим причинам не получили широкого распространения.
Самое близкое по существу и далекое по времени [совпадение] — это технология Multiple Master от Adobe. Многие ММ-шрифты Adobe построены на основе всё той же интерполяции и сегодня путём некоторых преобразований могут быть подготовлены как вариативные и построены в формате CFF2.
Среди TrueType-форматов, это формат от Apple — TrueType GX. Шрифты этого формата фактически можно назвать вариативными шрифтами. [Но] только сегодня возможности применения и поддержки [подобных шрифтов] технически реализуемы.
Новая технология способна перевернуть мир дизайна, пишет в своей статье на type.today Илья Рудерман, «но есть ряд обстоятельств, от которых это будущее зависит».
Главная проблема — поддержка нового формата операционными системами, браузерами и программным обеспечением. «Поводом для оптимизма может служить то, что OpenType 1.8 стал результатом сотрудничества Apple, Microsoft, Adobe и Google, которые пообещали уже в начале 2018 года внедрить техническую поддержку формата в свои продукты», — пишет автор.
Тем не менее, по словам Рудермана, шрифты можно использовать уже сейчас, но «пока мало кто об этом знает».
Самое главное — уже есть спецификация на шрифтовой формат и драфт новой спецификации CSS. Это позволит приложениям и браузерам понимать и пользоваться возможностями вариативных шрифтов.
Думаю, что пионерами в предоставлении услуги пользования вариативными шрифтами будут Adobe (сервис TypeKit) и Monotype — компании, имеющие необходимую технологическую базу и собственные сервисы работы со шрифтами. Сейчас тестирование возможно на специально подготовленных сайтах в Safari Technology Preview и в десктоп-приложении FontView от Google.
Как отмечают шрифтовые дизайнеры, в мировом профессиональном сообществе тема вариативных шрифтов освещается широко. Тема была основной на ежегодной типографической конференции AtypI, прошедшей в Варшаве в сентябре 2016 года и, по словам Фридмана, уже на ближайшую технологическую шрифтовую конференцию вновь собираются все основные игроки рынка — «уведомить, что нового удалось сделать за последнее полугодие».
Как отмечает Фридман, эксперименты касаются не только подготовки, но и продажи шрифтов: вместе со своим вариативным шрифтом компания Underware распространяет специальный плагин, позволяющий InDesign понимать шрифт.
Илья Рудерман подчеркивает, что на Западе новыми возможностями увлечены все — и веб-дизайнеры, и шрифтовые, и графические, и программисты-разработчики софта.
Масса экспериментов, много проектов, начали выпускаться шрифты. [Что касается России], за прошедшие с анонса (сентябрь — прим.ред.) месяцы я не видел реакции ни от одной графической или веб-студии. Только шрифтовые дизайнеры оказались в теме.
Геннадий Фридман говорит, что при подготовке шрифтов инструмент интерполяции используют большинство дизайнеров, и предполагает, что вариативные шрифты «пробуют делать все».
Пока нет возможности использовать их широко, но это, как минимум, интересно, а как максимум [дает] возможность предложить рынку любое промежуточное начертание.
В формате TrueType GX шрифт построить несложно. Есть шрифтовые редакторы, в которых достаточно открыть опорные начертания и в несколько кликов построить TTF GX. А вот построение шрифта в формате CFF2 — пока ещё сложная задача. У нас в стране пока не знаю никого, кроме «ПараТайп», кто умеет работать с этим форматом.
«ПараТайп» уже использует вариативные шрифты в ряде новых проектов. К примеру, создание шрифта для интерфейсов совместно с AIC и лабораторией Артема Геллера. Пока шрифт помог при выборе необходимой насыщенности. Как только появится поддержка браузеров, шрифт будет работать, используя свои более широкие возможности.
Знаю, что российские шрифтовые дизайнеры в большинстве своём в курсе. Однако интересных экспериментов от коллег я пока не видел. [Разработку Геллера и «ПараТайп»] могу лишь поддержать и пожелать удачи — я всегда поддерживаю любую активность в мире шрифта. Работу пока не могу прокомментировать никак — по обрывкам сведений общей картины пока не складывается.
Мы [в type.today] протестировали вариативные шрифты и работаем над тем, как научится их не только создавать, но и распространять, удобным и доступным для пользователей способом.
Однако многое ещё впереди, поэтому сложно сказать, когда все шрифтовые магазины включат вариативные шрифты в свои коллекции. Многое ещё предстоит индустрии преодолеть.