Что такое вариативный шрифт
Вариативные веб шрифты
Прошла уже не одна неделя с 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, поправил перевод 🙂
Вариативные шрифты
Вариативные (или настраиваемые) шрифты — это, без преувеличения, новая страница в веб-типографике. Настраиваемые шрифты стали возможны благодаря совместным усилиям компаний 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 определяется поддержка настроек браузерами и задаётся нужный шрифт:
Настраиваемые шрифты — тема богатая, и заниматься ею можно до бесконечности. По моим ощущениям, описанные в статье вопросы — только верхушка айсберга.
Я совсем недавно начала погружаться в тему, так что могла допустить ошибки и неточности. Сообщите мне о них, пожалуйста, если найдутся.
Вариативные шрифты: что это и как использовать?
В этой статье расскажем о вариативных шрифтах — насколько это интересный, полезный инструмент, но недооцененный одновременно. О минусах и нюансах работы с ними также не забудем упомянуть.
В статье будут рассмотрены следующие вопросы:
Для начала, чтобы ввести вас в курс дела, расскажем об истории развития шрифтовых технологий.
Во второй половине 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 с одним принципиальным отличием — теперь не нужно заранее генерировать статичные начертания. Параметры можно подбирать прямо в графическом редакторе.
Вариативные шрифты: прошлое, настоящее и будущее
Бьянка Бёрнинг, креативный директор дизайнерского бюро Dalton Maag, объясняет откуда пришло самое захватывающее нововведение в типографике, рассказывает об его устройстве, ключевых создателях и перспективах.
Когда появились вариативные шрифты и почему они стали так популярны только недавно?
Технология вариативных шрифтов на самом деле не так уж нова. Adobe и Apple независимо друг от друга разработали мастер-шрифты Multiple Master и вариации GX-шрифтов ещё в начале 1990-х годов. Обе разработки представляли собой технологии управления осями, сродни современным вариативным шрифтам. К 2000 году Adobe отказалась от шрифтов Multiple Master, а поддержка технологии GX изначально была минимальной. Всё изменилось, когда Apple, Adobe, Microsoft, Google и несколько независимых бюро и студий шрифтового дизайна, включая Dalton Maag, собрались вместе и анонсировали, что OpenType Font Variations (более известные как вариативные шрифты) будут добавлены в спецификацию OpenType в середине 2016 года.
С тех пор были созданы сотни вариативных шрифтов: некоторые экспериментальные, дабы понять, на что способны технологии, а другие — высокофункциональные, с целью повысить веб- производительность. Поддержка вариативных шрифтов за последние пару лет улучшилась: теперь они работают во всех основных веб-браузерах, операционных системах и приложениях: в Adobe InDesign, Illustrator, Photoshop и Sketch. У Figma и Quark Xpress поддержка в ближайших планах. Эти обновления сделали вариативные шрифты доступнее для дизайнеров.
Что касается Dalton Maag, мы экспериментировали с вариативными шрифтами с самого их появления. Наша первая библиотека вариативных шрифтов Venn вышла в 2018 году. С тех пор мы выпустили ещё три семейства: Objektiv, Mokoko и Aktiv Grotesk, а в следующем месяце увидит свет ещё одно. Вариативная типографика расширяет возможности наших клиентов — пользователей и дизайнеров — и позволяют им добиться своих целей, будь то очень выразительные и броские шрифты или простые и функциональные. Это привело к повышенному интересу к нашим библиотекам вариативных шрифтов, да и в общем, к большему числу разговоров о кастомных вариативных шрифтах.
Каких дизайнерских решений требует создание вариативных шрифтов?
Как и в случае со статическими шрифтами, два вариативных шрифта не могут быть идентичными — поэтому мы начинаем с определения требований. Анализируем цель, выразительность, доступность, функциональность, языки и многое другое. Отталкиваясь от этого, можно с уверенностью составить творческое тз. С вариативным шрифтом речь идёт не только о стиле и характеристиках, но и о параметрах дизайн-пространства и осей (вес, ширина, оптический размер, курсив или наклон).
Если краткое описание довольно простое — например, акцидентный шрифт, который подстраивается под размеры упаковки — мы будем работать с осью ширины. Шрифт сможет вытягиваться от самого узкого до самого широкого значения (включая любые значения в промежутке). При другом тз может быть важнее другая ось. Например, если вы разрабатываете один вариативный шрифт для поддержки и заголовков, и основного текста в вебе, то работать нужно с осью оптического размера (она регулирует пропорции, контраст, вес штрихов и т. д.).
Разрабатывать целое семейство вариативных шрифтов с нуля проще, потому что работа начинается с одной общей канвы. И возможностей больше, потому что можно выжимать максимум из доступных технологий.
Мы сделали Aktiv Grotesk вариативным, потому что он прагматичный и рациональный, с небольшим намёком на тепло — такую комбинацию трудно найти в гротескных шрифтах. Мы хотели повысить его практичность за счёт вариативности: это позволило дизайнерам максимально эффективно использовать огромный диапазон весов, стилей и начертаний данного семейства. Например, в вебе можно использовать больше комбинаций весов и стилей, при этом не уменьшая скорость загрузки: у вариативных шрифтов информация, нужная для определения всего семейства, хранится в одном файле. Такой файл весит меньше, чем несколько файлов с отдельными шрифтами вместе взятые.
Будучи нашим самым большим семейством шрифтов с точки зрения поддержки начертаний, Aktiv Grotesk (кстати, скачать его бесплатную пробную версию можно здесь) станет нашим первым вариативным шрифтом, поддерживающим несколько мировых начертаний и алфавитов. Поначалу Aktiv Grotesk VF будет поддерживать только латиницу, но вскоре мы выпустим обновление для арабского алфавита, а затем — для тайского, греческого, иврита и кириллицы в течение 2020 года.
Как, по вашему мнению, это поменяет работу шрифтового дизайнера?
Вариативные шрифты дают больше пространства для принятия решений тем, кто с этими шрифтами работает.
Шрифтовые дизайнеры получили больше контроля над большим числом ситуаций. Раньше, если шрифт не подходил, его растягивали и сжимали, или даже обводили, если вес был не тот, что нужно. При создании вариативных шрифтов мы закладываем для этого возможности, нотеперь уже на наших условиях и с гораздо большей утончённостью, чем если бы вы вручную правили шрифты в специальном программном обеспечении.
Но я не думаю, что роль шрифтового дизайнера претерпевает серьёзные изменения. Мы по-прежнему предоставляем необходимый строительный материал для визуальной коммуникации и будем продолжать это делать, просто в другом формате.
Как вы думаете, это изменит то, как шрифты используются в дизайн-проектах?
Я думаю, что это даст дизайнерам больше возможности поставить типографику на первое место в брифах и при помощи вариативных шрифтов создавать новые визуальные вариации, не полагаясь на другие визуальные элементы. Также это должно дать людям больше свободы для экспериментов со шрифтами в цифровой среде, не беспокоясь об увеличении времени загрузки страницы. Надеемся, что это приведет к более интересным (с точки зрения типографики) дизайнам и более комфортному процессу чтения для пользователя.
Помимо этого, у вариативных шрифтов есть перспектива стать гораздо более интерактивными, когда есть связь с реальными данными. Или шрифты можно будет проектировать так, чтобы они адаптировались к освещению в комнате, шуму, температуре, погоде, статистике и т. п., и изменяли свой стиль для более эффективной коммуникации.
Чьи ещё успехи в области вариативных шрифтов заслуживают внимания?
Гарнитура Cheee от OHNO, описанная как «высококонтрастная капля» — отличный пример того, что можно сделать с вариативными шрифтами за пределами использования пяти официальных осей, внесённых в спецификацию OpenType.
Ещё Дэвид Джонатан Росс свободно экспериментирует с вариативными шрифтами в рамках своего клуба «Шрифт месяца» (the Font of the Month Club). Вышедшая в январе 2020 года гарнитура Gimlet X-ray представляет собой экспериментальный шрифт, демонстрирующий внутреннюю механику вариативных шрифтов.
Кэсси Эванс из Clearleft — интересный человек, за чьим творчеством стоит следить, поскольку она комбинирует веб-анимацию с технологией вариативных шрифтов, исследуя её практичность и выразительность. Посмотрите, что она сделала с вариативным шрифтом Marvin от Матьё Триэя (Mathieu Triay).
Можете привести пример проектов, раскрывающих потенциал вариативных шрифтов?
За прошедший год вышло немало шрифтов, некоторые более сфокусированы на выразительности, другие — на функциональности. Кампания студии Dumbar «Города в движении» — отличный пример того, как вариативные шрифты выходят на первый план, вводят что-то неожиданное, и как они рушат ритм рекламы и интригуют прохожих.
Ещё новый сайт Its Nice That демонстрирует вариативные шрифты; название каждой статьи задаётся в LabilVariable, что в разной степени добавляет искажения для соответствия стилю контента.
Интересные примеры функциональных приложений есть и среди наших клиентов. Например, у REDspace — канадской компании по разработке программного обеспечения, которая создаёт крупномасштабные, гибкие и настраиваемые платформы для глобальных медиа-сетей (вроде WarnerMedia и ViacomCBS). Недавно они использовали вариативную версию нашего шрифта Objektiv на веб-сайте своего клиента. Целью было сократить время загрузки, количество HTTP-запросов и количество строк CSS без потери поддержки старых браузеров.
Каково, по вашему мнению, будущее этой индустрии?
Поскольку всё больше и больше людей знакомятся с этой технологией и её преимуществами, я думаю, что будет гораздо больше практических применений. Например, единый файл шрифтов для упрощения иерархии при существенном сокращении времени загрузки страницы. Или создадут шрифт, который будет менять свой размер в зависимости от возраста читателя или его удаленности от экрана.
Я думаю, что по мере роста популярности вариативных шрифтов, появится больше официальных вариантов осей в спецификациях OpenType (и они будут полностью поддерживаться основными платформами). Это, в свою очередь, должно будет повысить уверенность в этой технологии и привести к дальнейшим экспериментам.
Мы пока увидели лишь малую часть того потенциала, на который способны вариативные шрифты в более интерактивных и захватывающих пространствах. Я думаю, что со временем мы увидим гораздо больший прогресс и больше экспериментов.
Введение в вариативные шрифты
Всё, что вы когда-либо знали о шрифтах, теперь изменилось (к лучшему).
Типографика всегда вызывала у меня особый интерес, еще задолго до того, как мы смогли использовать шрифты в вебе. И хотя с тех пор прошло уже около десяти лет, всё это время мы были ограничены в выборе шрифтов, так как увеличение их количества напрямую влияло на количество трафика, которое приходилось загружать пользователю. И хотя грамотное использование типографики может положительно отразиться на дизайне, лёгкости восприятия и удобстве использования в целом, но стоит вам подключить слишком большое количество шрифтов, как тут же это негативно отразится на производительности и следовательно, на удобстве для пользователей. Три года назад был представлен результат развития формата шрифтов OpenType, который вносит удивительные изменения в работу со шрифтами.
Представляем OpenType Font Variations или «вариативные шрифты»
На протяжении всего времени использования шрифтов, мне приходилось устанавливать отдельные файлы для каждой ширины, веса (жирности) или варианта начертания, который хотел использовать. Жирный (bold) в одном файле, светлый (light) в другом, курсив в третьем. Формат вариативных шрифтов является развитием OpenType (формата, используемого нами в течение многих лет), который позволяет содержать в одном файле в оптимизированном виде всё то, что ранее было разделено на отдельные файлы. Дизайнер может решить, какие оси включать, а также определить минимальные и максимальные значения
Если говорить о вебе, это значит, что мы можем загрузить единственный файл и использовать CSS для установки параметров его осей в любое значение из всего допустимого диапазона, без каких-либо искусственных искажений силами браузера. Некоторые шрифты могут иметь только одну ось (weight является наиболее распространённой), а у некоторых можно задавать сразу несколько. Несколько осей являются «зарегистрированными», так как наиболее распространены: width (ширина), weight (вес), slant (наклон), italic (курсив) и optical size (оптический размер) — но формат является расширяемым, так что дизайнеры могут определить собственные оси и позволить вносить необходимые изменения. Давайте рассмотрим, как это работает
Прямо как раньше, но по-другому
Один из способов, с помощью которого новый формат сохраняет обратную совместимость с другими приложениями, которые еще не поддерживают вариативные шрифты, это так называемые «именованные экземпляры» (named instances) — которые по сути являются псевдонимами для настройки данных, которые раньше помещались в отдельные файлы. Таким образом, независимо от того, что имел в виду дизайнер шрифта, называя его «плотным жирным», эти значения просто будут отражены на соответствующих точках вариативных осей веса и ширины. Если шрифт был создан корректно, его настройки позволят установить и использовать его в последних версиях Windows и macOS, будто они были изначально встроены в систему.
Если приложение полностью поддерживает вариативные шрифты, появится возможность манипулировать настройками отдельных осей так, как посчитаете нужным. В настоящее время к таким программам относятся последние версии Adobe Illustrator, Photoshop, InDesign, а также Sketch.
Открытие секретов шрифтов
Чтобы узнать о всех возможностях работы с вариативными шрифтами, необходимо либо воспользоваться упомянутым ниже сайтом, либо загрузить Firefox (или, ещё лучше, сделать и то, и другое).
Если у вас есть файл шрифтов и доступ к интернету, можете воспользоваться сайтом Wakamai Fondue Роель Нискенс, что расшифровывается как «What Can My Font Do» (англ. «На что способен мой шрифт», прим. переводчика). Просто перетащите файл шрифта и получите отчёт, показывающий, какие у шрифта есть особенности, размер файла, количество глифов, а также поддерживаемые языки и вариативные оси. Вы получите даже тестировщик типа и несколько ползунков, которые позволят поиграть с изменением разных осей. Обратите внимание на оси, значения и настройки по умолчанию. Эта информация понадобится, когда мы начнём писать CSS.
Если же у вас нет доступа к файлу шрифта, всё еще можно получить необходимую информацию, просто используя инструменты разработчика браузера Firefox. По ним есть много обучающих видео, например это или это.
Благодаря Джен Симмонс и команде Firefox Devtools, у нас есть несколько потрясающих инструментов для работы с веб-шрифтами прямо в браузере. В инструментах разработчика выберите текстовый элемент, использующий нужный шрифт, а затем перейдите в закладку «Fonts», расположенную справа. Вы попадёте на панель, содержащую в одном месте всю информацию о шрифте, размере, стиле и вариативных осях. Можно изменить любое из представленных значений и сразу увидеть результат в браузере, а перейдя на вкладку «Changes», легко скопировать изменённый CSS-код для переноса к себе.
Weight (вес)
Почему вам это понравится
Позволяет использовать более широкий диапазон значений. Например, для таких ситуаций, как большие кавычки с очень тонким весом (жирностью). Определение значения «чуть тоньше, чем жирное» для отдельных слов внутри жирного текста может повысить читаемость. Чем текст жирнее, тем более закрытыми выглядят символы, но стоит сделать их немного тоньше, как они станут более открытыми, но всё ещё будут придавать акцент (попробуйте установить font-weight где-то между 500 и 600 вместо 700 ).
Width (ширина)
Почему вам это понравится
Italic (курсив)
Почему вам это понравится
Наличие курсива, вертикального начертания, а также веса и других доступных для настройки осей означает, что у вас появляется возможность использовать только один файл шрифта вместо четырёх. Ведь при наличии широкого диапазона доступных осей, вам может больше ничего и не понадобиться
Slant (наклон)
Почему вам это понравится
Ось наклона ( slant ) позволяет задавать любое значение в пределах всего допустимого диапазона, поэтому становится возможным небольшое изменение угла наклона текста. Например, можно добавить анимацию, при которой текст после загрузки страницы постепенно становится курсивным. Это хороший способ привлечь внимание к текстовому элемент на экране таким изящным образом
Optical Size (оптический размер)
Это настоящая жемчужина вариативных шрифтов. Данная практика существует более 400 лет. При её использовании физически меньший шрифт вырезался с немного более толстой обводкой и немного меньшим контрастом, чтобы обеспечить качественную печать и сохранить текст разборчивым даже при мелких размерах. Другие аспекты также могут быть адаптированы. Например, апертуры (отверстия) в буквах могут быть шире, более угловатые выступы или увеличенные скругления. И наоборот, крупные точки будут вырезаны более аккуратно, что позволит добиться большей контрастности и лучше детализации. Хотя этот подход использовался во многом из-за недостаточно качественных чернил, бумаги и шрифта — он всё же позволял использовать один эскиз шрифта в широком диапазоне физических размеров символов. Однако, эта технология перестала использоваться с переходом к цифровым фрифтам.
Почему вам это понравится
Правильный оптический размер делает шрифт более разборчивым при меньших размерах. Повышенная контрастность обводки (и всего остального, что решил изменить дизайнер шрифта) может означать, что один и тот же шрифт может существенно отличаться при его использовании в заголовке или теле статьи. Убедиться в этом можно на примере шрифта Roslindale от Дэвида Джонатана Росса, который используется на моём сайте. Я использую один шрифт и для заголовков и для остального текста.
Slant и Italic (наклон и курсив)
Почему вам это понравится
Наличие отдельной оси под каждый тип изменения шрифта может дать больше гибкости при создании системы типографики проекта. В одном случае вы можете выбрать только наклон, в другом — и наклон и замену глифов. Может это и не самая важная функция, но всё же она добавляет дополнительное измерение, в котором можно настраивать шрифт.
Кастомные оси
Пока что существует только пять зарегистрированных осей, но дизайнеры могут также создавать собственные. Любая составляющая шрифта потенциально может стать осью. Есть вполне привычные, такие как форма засечек или высота строчных (x-height), так и достаточно изобретательные. Более подробный их разбор я оставлю кому-нибудь другому, но продемонстрирую один, использование которого, как я надеюсь, станет более распространённым в текстовом и UI-дизайне — это Grade.
Grade
Понятие «grade» в типографике впервые было введено для регулирования толщины шрифта на разных типах бумаги и печатных станках. Концепция заключается в изменении веса (жирности) шрифта без изменения межбуквенного интервала и пространства, занимаемого одним символом. Наличие его в качестве переменной оси может быть полезно в нескольких отношениях. Создание участка текста с большей контрастностью, при котором символы становятся немного более жирными без переформатирования, может сделать текст более разборчивым при слабом освещении или при разработке тёмной темы. Либо при наведении на элемент, анимировать его с помощью плавного утолщения шрифта и изменения фона. Обратите внимание, что кастомные оси должны указываться заглавными буквами.
Почему вам это понравится
Я думаю, что чаще всего ось GRADE будет использоваться при разработке функционала, связанного с доступностью: тёмными темами или режимом высокой контрастности. Но никто не запрещает её применения при анимировании кнопок или навигации путём утолщения текста без изменения количества пространства, которое он занимает.
Поддержка
К счастью, поддержка вариативных шрифтов достаточно хорошая: последние версии macOS и Windows предлагают поддержку на уровне операционной системы, делая возможной их установку в вашу систему и отображение параметров в меню настройки шрифтов в любом приложении, как если бы это были отдельные шрифты. Если вы используете последние версии приложения Adobe CC такие как Illustrator, Photoshop или InDesign — или последние версии Sketch, вы можете изменять все доступные оси. Согласно Can I use, поддержка находится на уровне 87%, включая наиболее популярные мобильные платформы и браузеры.
Поскольку CSS всегда полностью анализируется перед выполнением любого другого действия, вы можете быть уверены, что браузеры никогда не загрузят оба шрифта сразу
Добавление шрифтов в проект
Вероятней всего, многим из вас пока что потребуется хранить вариативные шрифты у себя на сервере, так как на данный момент только Google предлагает их через собственные API и то в бета-версии. Существует несколько ключевых отличий в составлении @font-face объявления, давайте рассмотрим их:
Google Fonts тоже подходит
В сентябре 2019 команда Google Fonts анонсировала бета-версию своего API, который поддерживает некоторые вариативные шрифты. Поддержка растёт и впереди еще больше шрифтов. Если вы хотите опробовать это уже сейчас, можете ознакомиться с моей статьей о том, как это сделать и проверить CodePen, в создании которого я применил упомянутый способ.
Где их найти
Место, с которого следует начинать поиски вариативных шрифтов, — v-fonts.com Ника Шермана, который является каталогом, содержащим почти все доступные на данный момент вариативные шрифты. Также загляните на GitHub, где дополнительно сможете найти проекты на разных стадиях завершённости. Ник также ведёт Твиттер, где публикует анонсы и ссылки, а я добавляю новости по веб-типографике.
Вы также можете посетить сайт Axis-Praxis Лоуренса Пенни, необычный каталог вариативных шрифтов, который позволяет добавить шрифт на специальную тестовую площадку, которая может сообщить вам дополнительную информацию о возможностях и особенностях выбранного шрифта.
Почему всё это важно
Хотя всё это может быть интересно чисто с академической точки зрения, существуют некоторые значительные преимущества и возможности от использования вариативных шрифтов. С точки зрения производительности, хотя вариативные шрифты могут иметь больший размер, чем отдельные файлы каждого начертания обычных шрифтов, они всё равно намного меньше совокупного размера этих файлов. Что значит, что время загрузки страницы может значительно улучшиться. Это именно та причина, по которой Nielson/Norman Group использует шрифт Source Sans Variable на своём сайте в течение последнего года, а Google тестирует шрифт Oswald Variable в течение последних месяцев. В основном, просто используя их вместо нескольких отдельных файлов для получения выгоды от более быстрой загрузки страниц.
Но помимо этого, что меня действительно радует, так это возможности дизайна. Когда в нашем распоряжении оказываются вариативные шрифты, мы можем подходить к вопросу типографики более творчески. Пример, приведённый ниже, не должен оставаться просто примером, а становиться частью всеобщей практики.
Надеюсь, эта статья послужила хорошим введением в тему вариативных шрифтов. Отправляйте ссылки и вопросы — я не могу дождаться, когда увижу, что у вас получилось сделать. И следите за обновлениями.