что такое вариативный шрифт
ABC Dinamo: вариативные шрифты как вектор будущего дизайна
Швейцарская шрифтовая студия рассказывает о новой главе в истории типографики.
ABC Dinamo в первую очередь известна как популяризатор вариативных шрифтов, которые всё чаще встречаются в диджитал-среде. Начав свою работу как небольшая студия в швейцарском городе Базеле, она развилась в крупную компанию с представительствами в разных странах.
В её портфолио более 20 уникальных шрифтов, а среди клиентов есть такие, как Nike, Bauhaus, Dazed & Confused, Harvard Graduate School of Design и многие другие. Этим летом основатели студии приехали на «Стрелку», где провели двухдневный воркшоп.
Мы поговорили с Йоханнесом Брайером и Фабианом Харбом о том, как создать свой вариативный шрифт и в чём его преимущества перед традиционными форматами типографики.
— Что такое вариативные шрифты?
— Вариативные, или переменные, шрифты — это отчасти новый, а отчасти производный формат. У такого шрифта нет отдельных файлов с жёстко заданными стилями (Regular, Regular Italic, Bold, Bold Italic и им подобными). Файл со шрифтом всего один, но он позволяет получить великое множество начертаний.
Самое крутое в вариативном шрифте — кастомизация. Вы можете очень точно настроить, насколько тонким (Narrow) или насыщенным (Bold) будет любое начертание, какой наклон будет у его курсивного варианта и так далее.
— Как эти шрифты появились и когда стали популярны?
— Вариативные шрифты — наследники шрифтов Multiple Master (шрифтов MM). Эта технология появилась ещё в девяностые, но долго буксовала — мешали медлительные компьютеры и низкая скорость интернета. Зато последние пять-шесть лет вариативные шрифты развивались весьма бурно. Этому помогают улучшения веб-дизайна и браузеров.
— А как использовать их преимущества на практике?
— Во-первых, конечные пользователи могут гибко настраивать внешний вид шрифта. Поэтому легче создать дизайн, в котором важны детальность и нюансы, получить более интересную и акцентированную типографику.
Во-вторых, дизайнеру проще «сбалансировать серые» (оттенки серого), чтобы подружить на печатной странице шрифты разных начертаний и размеров.
В-третьих, вариативный шрифт помогает повысить интерактивность сайта и доступность контента. Его вид можно изменять в зависимости от действий посетителя и других условий. Например — анимировать смену начертаний при попадании курсора на нужные элементы или менять контраст, толщину, пропорции и размер букв в зависимости от времени дня.
А всем скептикам и консерваторам скажем: вариативные шрифты умеют то же самое, что и обычные. И работать с ними можно абсолютно так же. Если вам нужен обыкновенный Bold или Regular, то просто берите стандартные начертания (их уже задал разработчик) — и ничего под себя подстраивать не придётся.
— С помощью каких инструментов создают вариативные шрифты? Есть ли какие-то тонкости?
— В Dinamo мы в основном работаем с Glyphs App и Dinamo Font Gauntlet. Чтобы использовать преимущества вариативного шрифта, нужно настроить у него оси вариативности (axis) — насыщенности, ширины, наклона и так далее. Для каждой оси задаются крайние начертания, определяющие множество промежуточных вариантов.
Ещё один нюанс: разработчику стоит тщательнее проверять готовый шрифт, испытывать его в деле. То есть смотреть, чтобы отдельно взятые начертания были читабельными, а переходы между ними красиво анимировались вдоль всей оси и не портили дизайн.
— Как думаете, какие перспективы у вариативных шрифтов?
— Мы в Dinamo искренне верим, что вариативные шрифты станут отраслевым стандартом в ближайшие годы. Ведь у них много преимуществ: от расширения дизайнерских возможностей до более лёгкого администрирования и высокой скорости загрузки. Так как файл шрифта один, то и обращение к серверу нужно всего одно.
Однако сперва предстоит подружить с ними множество отраслевых программ — возможно, даже серьёзно доработать их функциональность. Задача непростая, и быстро её решить не получится, но мы уверены, что оно того стоит. Поэтому мы ждём не дождёмся, когда вариативные шрифты завоюют доверие и поддержку. Например, у производителей софта для работы с видео и 3D.
обложка: Артём Голяков / предоставлено институтом «Стрелка»
Журналистка. Пишет про дизайн во всех его проявлениях. В свободное от работы время ведёт Telegram-канал о кино «Нарушевич смотрит».
Вариативные шрифты: что это и как использовать?
В этой статье расскажем о вариативных шрифтах — насколько это интересный, полезный инструмент, но недооцененный одновременно. О минусах и нюансах работы с ними также не забудем упомянуть.
В статье будут рассмотрены следующие вопросы:
Для начала, чтобы ввести вас в курс дела, расскажем об истории развития шрифтовых технологий.
Во второй половине 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 с одним принципиальным отличием — теперь не нужно заранее генерировать статичные начертания. Параметры можно подбирать прямо в графическом редакторе.
Вариативные шрифты: начало работы
Вариативные шрифты — это технология цифровой эпохи, позволяющая использовать все богатства типографики при меньших размерах файлов. Новые возможности — это новые вызовы и сложности. Что же особенного в этой фиче и как можно ее использовать?
Готовы к сексуальной веб-типографике? Тогда давайте погрузимся в нее.
Что такое вариативные шрифты?
Вариативный шрифт может вести себя как несколько разных шрифтов, не требуя при этом дополнительных файлов. Это хорошо объясняет Джон Хадсон. Традиционно каждый отдельный вес или стиль шрифта (курсив, полужирный, легкий расширенный) хранится в своем файле. Теперь все это можно хранить в одном OpenType-файле.
Небольшой размер файла объясняется тем, что каждый символ имеет только контур. Точки, которые создают этот контур, могут двигаться, чтобы создать, например, другой вес шрифта. Это также позволяет создавать промежуточные состояния (полужирный). Затем отдельные стили динамически интерполируются прямо в браузере.
Интерполяция может осуществляться очень маленькими шагами по осям изменений, например, по оси веса. Это создает огромное количество возможных вариаций.
Вариативные шрифты могут иметь множество осей изменений. Например, к оси веса можно добавить ось ширины и получить еще больше возможных стилей. Например, шрифт Venn от Dalton Maag, который используется в примерах, поддерживает диапазон значений веса от 300 до 800, а ширины — от 75 до 125%. То есть из одного Venn можно получить 25000 стилей, а весит он всего 112 килобайт.
Что можно делать с вариативными шрифтами?
Все зависит от дизайна. Существует 5 зарезервированных осей, которые могут динамически настраиваться:
Чаще всего используются оси веса и ширины. Также шрифт может иметь дополнительные оси вроде толщины засечек, или высоты восхождений и спусков, или чего-нибудь еще.
На изображении видно изменение вариативных шрифтов по разным осям. Ось веса — Source Serif Variable, ось ширины — Venn, ось наклона — Output Sans.
Разве растягивать шрифт не плохо?
Почему трансформация шрифтов является проблемой? Потому что дизайнеры тщательно балансируют каждую букву, чтобы она соответствовала эстетическим требованиям, а при бездумном масштабировании эти усилия теряются. Различия могут быть незначительными, но они оказывают огромное влияние на общий внешний вид шрифта. Почувствуйте разницу:
Преимущества вариативных шрифтов
Богатство типографики
Веб-дизайнеры могут использовать множество различных стилей для выделения частей сайта. Я создал демо-сайт, где попытался избавиться от количественных ограничений и использовал там 18 различных стилей шрифтов. Эта версия вышла гораздо более живой и своеобразной, чем традиционные, использующие всего 3 стиля.
Малый размер файла
Вариативные шрифты позволяют хранить множество типографских параметрах в небольших файлах. Например, Süddeutsche Zeitung Magazin загружает 236 килобайт шрифтов для своего сайта. 166 из них — это просто 4 разных веса Work Sans. Если бы они заменили их одним вариативным шрифтом, то могли бы сэкономить более 50% пропускной способности.
Тонкая настройка
Вариативные шрифты обеспечивают детальный контроль над отображением. Возможно, вес 430 будет выглядеть лучше, чем стандартный 400. При этом font-weight: bold и другие именованные значения по-прежнему будет работать.
Лучшая адаптивность
Если у переменного шрифта есть ось ширины, можно сделать текст более узким на мобильном телефоне, чтобы вместить больше слов в одну строку и обеспечить лучшую читаемость. На широком экране можно расширить гарнитуру шрифта, чтобы лучше использовать пространство.
Анимация
Все оси могут быть анимированы через CSS для создания интересных эффектов. Впечатляющий пример есть на демо-странице Microsoft Edge.
Возвращение оптического размера
Оптический размер — это дизайн-концепция, которая направлена на лучшую читаемость при небольших размерах и большую индивидуальность при больших размерах шрифта. Во времена металлического шрифта все было оптимизировано под конкретный размер. Благодаря оцифровке, где вы создаете один дизайн, который должен соответствовать всем размерам, это осталось в прошлом. Теперь вариативные шрифты снова возвращают эту концепцию. Например, при малых размерах шрифта штрихи могут быть толще, что делает текст менее контрастным и более читаемым. С другой стороны, при больших размерах может быть больше видимых деталей и, следовательно, больше контраста. Это изменение может происходить постепенно и по-прежнему требует всего одного файла.
Как использовать вариативные шрифты?
1. Подберите подходящий
Эта технология довольно новая, поэтому, прежде чем вы сможете перейти к использованию вариативного шрифта, вам сначала нужно найти его. Можно поискать на сайте v-fonts.com. Некоторые шрифты с открытым исходным кодом могут быть загружены с Github. А вот здесь большой список доступных переменных шрифтов от Indra Kupferschmid.
2. Добавьте его в таблицу стилей
Во втором квартале 2018 года браузерная поддержка вариативных шрифтов довольно хорошая (больше 65%): текущие версии Chrome и Safari (на MacOS 10.13+), все браузеры на iOS 11.2 и Chrome на Android. Firefox поддерживает их за флагом, и очень скоро Edge тоже добавить эту возможность. Это все довольно удивительно для технологии, которая была анонсирована всего полтора года назад. Есть большая статья Ричарда Раттера о том, как использовать вариативные шрифты в реальном мире, где он рассказывает, что делать с браузерами, которые их не поддерживают.
3. Определите оси и диапазоны изменения
Каждый шрифт имеет собственные оси и пределы изменения. Если вы не знаете, на что способен ваш шрифт, воспользуйтесь Wakamai Fondue. Вы даже можете сгенерировать css для дальнейшего использования.
4. Стилизуйте
Как пишет Ричард Раттер, модуль CSS4 Fonts добавит новые высокоуровневые свойства для работы с вариативными шрифтами.
Не каждый вариативный шрифт будет использовать все эти параметры. После запуска некоторых тестов я обнаружил, что Safari поддерживает font-weight и font-stretch и автоматически включает оптический размер, если он доступен. Но использование font-style: italic приводит к искажению шрифта.
На данный момент эти высокоуровневые свойства поддерживаются только частично, и то только в Safari. Поэтому рекомендуется использовать свойство низкого уровня font-variation-settings с четырехсимвольными названиями осей.
Когда высокоуровневые свойства получат полную поддержку, этот код будет аналогичен следующему:
Вот результат этого кода (я добавил анимацию, чтобы эффект был заметнее):
Подводные камни
Вариативные шрифты классные, но, разумеется, у новой технологии есть ряд опасных моментов.
Слишком много возможностей
Когда есть столько возможностей для изменения, выбрать очень трудно. Даже когда я смотрю на список именованных опций в Adobe Illustrator, голова кружится. Это Acumin Variable Concept и больше 90 вариантов от ExtraCondensed Thin до Wide UltraBlack Italic.
Требуется больше типографских знаний
Чтобы сделать правильный выбор, вы должны хорошо понимать, что именно вы хотите сделать и почему. С таким возможностями испортить дизайн стало еще проще.
Конечно, вы можете просто продолжать использовать именованные сочетания свойств как раньше и игнорировать дополнительные опции. Единственное, что изменится в вашей работе при этом, — нужен будет всего один файл шрифта вместо нескольких.
Не всегда есть прирост производительности
Если вы используете всего один стиль шрифта, то файл вариативного шрифта будет весить больше. Преимущества появляются, только когда нужно три или четыре различных веса или ширины.
Вам все равно могут понадобиться второй файл курсивного шрифта
Истинный курсив — это не просто наклонная версия вертикального шрифта, у них очень разные принципы построения и, следовательно, формы букв. Поэтому практически нет вариативных шрифтов с курсивной осью, лишь некоторые имеют ось наклона. Обычно вариативные шрифты имеют отдельный файл для курсива (см. примеры на v-fonts.com).
Все зависит от моделей лицензирования
Люди будут готовы платить за вариативный шрифт только в том случае, если необходимо сразу несколько стилей. Он не может стоить дешевле, чем целое семейство шрифтов с отдельными статическими файлами, ведь его возможности гораздо больше. К тому же, вариативный шрифт сложнее проектировать и тестировать.
На данный момент большинство вариативных шрифтов либо опенсорсные, либо являются технологическими превью. На данный момент очень мало шрифтов, которые вы можете купить самостоятельно по цене примерно 700 долларов (как за целое семейство шрифтов).
Google Fonts смогут сэкономить тонну пропускной способности, когда начнут работать с вариативными шрифтами.
Когда начинать?
В 2018 году вариативные шрифты будут поддерживаться всеми основными браузерами. Особенно быстро они внедряются на мобильных устройствах, так как могут здорово сэкономить ресурсы. Можно ожидать, что к 2019 году вариативные шрифты станут альтернативой статическим, которые, конечно, останутся доступными. Если вам нужно всего один-два стиля, выгоднее использовать стандартный вариант.
На данный момент вариативных шрифтов немного. Также требуется резервный вариант для браузеров, которые еще не поддерживают новую технологию.
Вы можете уже сейчас экспериментировать с вариативными шрифтами, возможно, на небольших проектах. Используйте системные шрифты в качестве резервных и попытайтесь создать гибкую типографику.
Вариативные шрифты еще покажут, на что способны. И дело тут не в потенциальном уменьшении размера файлов. Просто теперь наши слова обретут лучший типографский голос.
Спроси эксперта: о вариативных шрифтах в логотипах
Выясняем, зачем компании используют приём разноширинности в начертаниях одних и тех же букв.
Обложка: Dana Moskvina / Skillbox Media
Вопрос от читателя:
Откуда пошла мода на буквы разного размера в айдентике? Ozon, новые логотипы «ВкусВилл» и «Ситимобил», реклама какого-то модного ЖК. И не слишком ли скоротечен этот тренд?
На этот вопрос ответил Макс Орлов.
Арт-директор и основатель агентства ONY.
Вообще, это частый приём — выбивать одну букву в общем ряду. Я думаю, тут две истории. Одна — когда буквы служат неким маркером, элементом, который можно использовать отдельно — как иллюстративный или нарочитый. С ним взаимодействуют очень разнообразно, и он заменяет собою фирменный знак. В тех же логотипах с леттерингом если есть этот элемент, то он многое решает. Иногда это классно сделано, иногда — не очень.
Вторая история — есть вариативные шрифты, где похожие буквы можно делать разной толщины, в разных вариациях. Такие логотипы — как раз продолжение заигрывания с вариативностью в шрифте. В идеале в подобных кейсах иметь собственный шрифт, в котором не только выбранная буква будет выпадать по весу, ширине, штриху, но и другие — взаимодействовать между собой.
Мне кажется, популярность кроется в этом. И я думаю, что она и дальше будет расти, и получаться будет всё круче и круче. Ну, или хуже и хуже. Тут кому как повезет.
Введение в вариативные шрифты
Всё, что вы когда-либо знали о шрифтах, теперь изменилось (к лучшему).
Типографика всегда вызывала у меня особый интерес, еще задолго до того, как мы смогли использовать шрифты в вебе. И хотя с тех пор прошло уже около десяти лет, всё это время мы были ограничены в выборе шрифтов, так как увеличение их количества напрямую влияло на количество трафика, которое приходилось загружать пользователю. И хотя грамотное использование типографики может положительно отразиться на дизайне, лёгкости восприятия и удобстве использования в целом, но стоит вам подключить слишком большое количество шрифтов, как тут же это негативно отразится на производительности и следовательно, на удобстве для пользователей. Три года назад был представлен результат развития формата шрифтов 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 в течение последних месяцев. В основном, просто используя их вместо нескольких отдельных файлов для получения выгоды от более быстрой загрузки страниц.
Но помимо этого, что меня действительно радует, так это возможности дизайна. Когда в нашем распоряжении оказываются вариативные шрифты, мы можем подходить к вопросу типографики более творчески. Пример, приведённый ниже, не должен оставаться просто примером, а становиться частью всеобщей практики.
Надеюсь, эта статья послужила хорошим введением в тему вариативных шрифтов. Отправляйте ссылки и вопросы — я не могу дождаться, когда увижу, что у вас получилось сделать. И следите за обновлениями.