что это и как использовать? — Дизайн на vc.ru

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

12 730
просмотров

В статье будут рассмотрены следующие вопросы:

• история возникновения;
• технические особенности;
• преимущества и недостатки;
• особенности использования;
• примеры креативного использования.

Немного истории

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

Во второй половине 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 с одним принципиальным отличием — теперь не нужно заранее генерировать статичные начертания. Параметры можно подбирать прямо в графическом редакторе.

2016 — OpenType Font Variables

Технические особенности

Давайте остановимся подробнее на том, чем же этот формат отличается от классического OpenType.

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

TT Norms Pro

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

TT Norms Pro Variable

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

Опорные начертания

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

Ползунок в графическом редакторе

Примеры осей вариативности

Первый вариант — это уже описанная ось толщины. В большинстве шрифтовых семейств есть несколько начертаний по толщине и в теории они все могли бы быть вариативными.

Weight axis

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

Поиск оптимальной толщины шрифта

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

Width axis

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

Поиск оптимальной ширины шрифта

Третья ось — это ось наклона. Она применима в тех случаях, когда буквы в наклонном начертании имеют такую же конструкцию, как и в прямом. Чаще всего такой вариант можно найти в гротесках.

Slant axis

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

Поиск оптимального наклона шрифта

И, наконец, еще одна менее распространенная, но тоже заложенная в формат OTF Var — ось оптического размера.

TT Fors Display

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

TT Fors Display

Подсемейство Text, наоборот, менее контрастно, имеет более грубые детали. Оно отличается большей читабельностью в маленьких размерах и больших блоках текста.

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

TT Fors Text

Мы рассказали об осях, которые уже были заложены разработчиками формата. Для них есть специальные буквенные обозначения:

wght – вес

wdth – ширина

slnt – угол наклона

ital – курсивность

opsz – оптический размер

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

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

Ресурс: axis-praxis.org

И конечно, шрифт может изменяться и декоративно. Тут все ограничивается только фантазией автора.

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

TT Alientz

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

Преимущества и недостатки вариативных шрифтов

Теперь расскажем о некоторых проблемах, с которыми мы встречаемся при использовании вариативных шрифтов и интересных способах применения вариативных шрифтов

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

Ресурс: v-fonts.com

Ресурс: v-fonts.com

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

Пример низкого качества вариативного шрфита

Еще один пример. Если у вас сайт, у которого 1000000 загрузок в день и используется полное семейство Norms Pro, то со всеми начертаниями на сайте они занимают 5306 килобайт. Если вы используете вариативный шрифт от этого семейства — только 1875 . Обратите внимание на таблицу ниже. Мы видим, что при таком огромном количестве загрузок можно получить разницу в 3272 ГБ, которые должны быть отгружены с сервера. Очевидно, что для каждой конкретной загрузки сайта это не существенная разница, но в сумме она уже играет роль.

Разница между статическим и вариативным начертаниями

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

Как использовать вариативные шрифты

Теперь расскажем о том, как пользоваться вариативными шрифтами в работе.

Давайте для начала возьмем Adobe Illustrator. Например, вы напечатали какой-то текст и хотите выбрать для него вариативный шрифт, который уже установлен. В общем списке у таких шрифтов есть специальная пометка «var». Кстати говоря, у Adobe есть свои собственные вариативные шрифты, которые идут в комплекте с последними версиями программ, так что можете для начала поэкспериментировать с ними.

Выбор вариативного шрифта в Adobe Illustrator

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

Оси вариативности в панели Character

Вы также можете выбрать из списка одно из начертаний и использовать это семейство как статичное.

Вариативный шрифт как статичное начертание

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

Выбор вариативного шрифта в Sketch

Вариативные шрифты можно внедрить и в WEB с помощью CSS. Мы не будем останавливаться на этом подробно. Но можно посмотреть пример того, как вариативные шрифты интегрируются в WEB.

Ресурс: CSS Transitions

Ресурс: CSS Animation

Ресурс: CSS Animation каждой буквы отдельно

Подробнее об использовании вариативных шрифтов в WEB можно прочитать в статьях Richard Rutter на Medium:

Get started with variable fonts — быстрое, но содержательное введение.

How to use variable fonts in the real world — описание проблем, с которыми можно столкнуться и способы их решения.

Креативные примеры использования

Предлагаем посмотреть, креативные примеры — как можно использовать вариативные шрифты, если приложить фантазию.

Примеры того, как растягивать текст в зависимости от границ контейнера.

Ресурс

Пример использования вариативных шрифтов в AR.

Ресурс: Variable fonts in AR

Пример того, как шрифт может изменяться в зависимости от удаления, с которого мы на него смотрим.

Ресурс: Distance Based Interpolation

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

Ресурс: Variable font in different reading conditions

Можно пойти еще дальше и сделать из шрифта движущиеся изображения, как нам предлагает сайт axis-praxis.org. Даже можно сделать их цветными путем наложения нескольких букв друг на друга, как можно увидеть в экспериментах Toshi Omagari. Хотя это, конечно, не совсем целевое использование шрифта.

Движущиеся изображения

Полезные ресурсы

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

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

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

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

Вместо заключения

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

Вариативные шрифты — Оди. О дизайне

29 Июл 2022

2654

0

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

Дарья Райт

Редактор, переводчик. Пишу о дизайне

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

Представьте ось, на которой расположен ползунок. На одном конце задано значение самого легкого начертания — Thin, посередине — Regular, а на другом конце оси — самый тяжелый вес — Black. Двигая ползунок по оси, дизайнер может остановить его в любом месте, которое ему нравится, чтобы задать шрифту определенное начертание.

Static — это статичный шрифт, Variable — вариативный. Источник: Figma

В этом заключается принцип работы вариативных шрифтов.

Чем технически статичный шрифт отличается от вариативного?

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

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

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

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

Ось — это выражение одного аспекта вариативного шрифта. Существует пять зарегистрированных осей, которые управляют характеристиками шрифта: шириной, весом (начертанием), курсивом, наклоном и оптическим размером.

1. Ширина (Width) определяет, насколько узким или широким может быть символ.

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

2. Вес (Weight) задаёт то, насколько легким или жирным будет шрифт.

Ось веса можно использовать для заголовков и цитат, чтобы выбрать идеальное начертание. Небольшие корректировки могут иметь большое значение. Например, не слишком жирное начертание для подзаголовка позволяет с одной стороны выделить его, а с другой — оставить разборчивыми.

Тонкая настройка начертания помогает создать идеальную визуальную иерархию.

Flexible — это пример настройки ширины вариативного шрифта, а Details — пример калибровки веса/начертания. Источник: Figma

3. Курсив (Italic) предназначен для шрифтов, которые содержат стили: нормальный и курсивный. В отличие от других осей возможность плавного перехода отсутствует. Есть только два значения: нормальный и курсив.

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

4. Наклон (Slant) похож на курсив, но он предлагает диапазон градусов для наклона текста.

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

Слева представлен пример настройки курсива вариативного шрифта, а справа — пример регулировки угла наклона. Источник: Figma

5. Оптический размер (Optical size) — уровень детализации символа меняется в зависимости от размера.

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

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

Кастомные оси

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

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

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

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

Источник

Ось Grade также можно применять в интерактивных анимация. Например, сделать текст немного более жирным при наведении.

Преимущества вариативных шрифтов

Быстрая загрузка

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

Обеспечение максимального уровня удобства восприятия текста

При проектировании макета толщина основного текста должна быть такой, чтобы пользователю было комфортно его читать.

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

Безграничные возможности использования шрифта

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

Поддержка вариативного шрифта большинством браузеров и графических редакторов

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

В графических редакторах (Illustrator, Photoshop, InDesign, Sketch, Figma) можно менять все доступные оси вариативных шрифтов.

Согласно Can I use, поддержка браузерами находится на уровне 95%, включая наиболее популярные мобильные платформы.

Возможность применения вариативных шрифтов в анимации, как в роликах, так и для создания анимированных интерактивных элементов на сайтах

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

Примеры:

Недостатки вариативных шрифтов

Риск неправильного использования

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

Неполная поддержка всех значений браузерами

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

Как использовать вариативные шрифты

Теперь рассмотрим то, как пользоваться вариативными шрифтами.

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

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

В разделе свойств текста есть два варианта определения того, является ли выбранный шрифт вариативным:

1. Если в нижней части списка стилей есть опция «Variable font axes…»
2. При нажатии на «Настройки шрифта» справа появляется новая вкладка «Variable»

Источник: Figma

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

Источник: Figma

Любые стили, созданные в процессе работы с переменными осями, можно добавить в меню стилей.

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

Источник: Figma

В остальных графических редакторах (Adobe Illustrator, Sketch, Photoshop и др.) принцип настройки вариативных шрифтов абсолютно такой же.

Подборка вариативных шрифтов для вдохновения

Mayes

Mayes. Image Credit: Envato Elements

Интересный и элегантный шрифт Mayes от Envato отличается наличием более чем 300 тщательно обработанных глифов, разбросанных по оси от Regular до Black.

Shifter Font

Shifter Font. Image Credit: Envato Elements

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

BASE&BLOOM

BASE&BLOOM. Image Credit: Creative Market

Экспериментальное сочетание геометрической монолинии и высококонтрастного росчерка делает шрифт нестандартным и противоречивым.

Nagaiya – Font Family With Variable

Nagaiya. Image Credit: Creative Market

Стильный и великолепный Nagaiya — шрифт, который идеально подходит для элегантных дизайнерских проектов.

Extenda

Extenda. Image Credit: Creative Market

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

Лучшие бесплатные вариативные шрифты

• Inter
• Heebo
• Mulish
• Jost
• Acumin
• Epilogue
• Raleway
• Anybody
• Work Sans
• Libre Franklin

Где найти вариативные шрифты

Variable Fonts — каталог Ника Шермана, который содержит почти все доступные на данный момент вариативные шрифты

Axis-Praxis — необычный каталог вариативных шрифтов Лоуренса Пенни, который позволяет добавить шрифт на специальную тестовую площадку и узнать дополнительную информацию о его возможностях и особенностях

Dinamo Font Gauntlet — сервис позволяет протестировать вариативный шрифт или использовать предложенный на сайте и поиграть с его настройками

Wakamai Fondue — инструмент, который помогает узнать все параметры шрифта

enFont Terrible — сервис предоставляет возможность в считанные секунды создать собственный шрифт

Underware — шрифтовая студия, которая создает в том числе и вариативные шрифты

DSType Foundry — независимая компания, которая создает шрифты с 1994 года

Paratype — независимая шрифтовая студия из Санкт-Петербурга

Parachute Type Foundry — шрифтовая компания

type. today — коллекция шрифтов с качественной кириллицей, которые лучше всего отображают визуальный язык настоящего и недалёкого будущего

Google fonts — надежный каталог бесплатных шрифтов с открытым исходным кодом

Future Fonts — шрифтовой магазин, который предлагает покупку рабочих версий шрифтов по низким ценам

Заключение

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

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

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

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

Вариативные шрифты | Монотипия.

Экспертиза

Почему согласованность шрифтов имеет решающее значение для хорошего брендинга.

Шрифты часто являются первым элементом брендинга, который видят ваши клиенты. Они придают форму вашему сообщению и общаются с вашими клиентами 24/7/365. Итак, когда вы в последний раз задавались вопросом, какое впечатление производят ваши шрифты? Посмотрите это видео, чтобы узнать, на что следует обратить внимание.

Эври

Живой логотип для каждой посылки, человека и места: Monotype и Superunion помогают Hermes провести ребрендинг в Evri.

Тематические исследования

Живой логотип для каждой посылки, человека и места: Monotype и Superunion помогают Hermes провести ребрендинг в Evri.

Evri — это новое имя и бренд Hermes, крупнейшей в Великобритании специализированной компании по доставке посылок. Команда дизайнеров Monotype Studio во главе со старшим креативным директором по шрифтам Филом Гарнэмом тесно сотрудничала с Superunion, чтобы создать живой логотип с использованием технологии вариативных шрифтов, чтобы помочь бренду реализовать свою миссию по созданию позитивного и надежного опыта доставки для всех и везде.

Электронная книга: Тенденции шрифтов 2022 г.

Отчет Monotype «Тенденции шрифтов 2022 года» исследует, как несколько социально-экономических, политических и культурных событий продолжают формировать наш подход к творческой работе и то, как они взаимодействуют друг с другом в Интернете и офлайн.

Вебинары

Почему тип? Роль шрифта в брендинге.

Узнайте, от стратегии бренда до звукового брендинга, почему типографика играет важную роль в развитии вашего бренда. Старший бренд-директор Monotype Джеймс Фукс-Бейл и креативный директор по шрифтам Том Фоули расскажут вам, что нужно брендам для работы в современном цифровом мире и в будущем.

Истории шрифтов

Больше всего, для всех. Представляем Helvetica Now Variable.

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

Видео

Веб-семинар Shutterstock × Monotype: Визуальные тенденции в 2021 году.

Присоединяйтесь к Monotype и Shutterstock на этом веб-семинаре в прямом эфире и узнайте о тенденциях, определяющих брендинг и дизайн сегодня, а также о том, что нас ждет в 2021 году и далее.

Вебинары

Перспективы шрифтового будущего — ADC Festival.

На этой панели фестиваля ADC 2021 к креативному шрифтовому директору Monotype Филу Гарнэму присоединились Джессика Криер из KMS и журналист Юрген Зиберт. Группа обсуждает будущее шрифтов с вариативными шрифтами и то, как они открывают безграничные возможности для творчества. Они также поднимают вопросы о долговечности бренда и расширении, которое могут обеспечить вариативные шрифты, а также об упрощении его технической сложности.

Вебинары

Вебинар: Как шрифт адаптируется к новым нормам.

Присоединяйтесь к нам, чтобы узнать о развивающемся мире шрифтов от нашего старшего директора по бренду Джеймса Фукса-Бейла. Мы обсудим четыре основные области изменений, которые следует ожидать в индустрии шрифтов, и то, как шрифтовой дизайн может помочь вашему бренду отразить его основные ценности.

Видео

Вариативные шрифты на Adobe MAX 2020.

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

Вебинары

Вебинар: Вариативные шрифты, возможности бренда.

Поскольку компании продолжают наращивать свои цифровые предложения в условиях Covid-19пандемии многие дизайнеры, бренды и агентства обращают внимание на вариативные шрифты. Но для многих остается вопрос: что такое вариативные шрифты и каков потенциал вариативных шрифтов в изменении того, как мы общаемся в сети?

Тематические исследования

Первый в мире логотип с переменным шрифтом.

Используя инновационный и динамичный подход к новому формату шрифта Variable, компания Fontsmith (теперь часть Monotype Studio) и голландское брендинговое агентство VBAT создали адаптивный шрифт логотипа для нового кампуса WPP в Амстердаме — логотип, который меняется в зависимости от взаимодействия и времени. как люди перемещаются по пространству, так и его формы букв.

Видео

Вариативные шрифты в The One Club для творчества.

Том Рикнер представляет презентацию о настоящем и будущем вариативных шрифтов.

Экспертиза

Что бренды должны знать о вариативных шрифтах?

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

Экспертиза

Часть 2: от TrueType GX к вариативным шрифтам

Том Рикнер представляет первый вариативный шрифт Monotype, доступный бесплатно на GitHub, и делится своим исследованием потенциальных вариантов использования вариативных шрифтов.

Экспертиза

Переменные шрифты 101.

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

Экспертиза

Часть 1: от TrueType GX к вариативным шрифтам.

Том Рикнер, опытный дизайнер шрифтов, рассказывает о своей личной роли в самом захватывающем развитии шрифта за последние десятилетия.

Опыт

Вариативные шрифты: воплощение обещаний в реальность.

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

Вариативные шрифты | TypeType

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

В настоящее время диапазон вариативности шрифта практически безграничен и ограничивается только вашим воображением. Важно отметить, что в настоящее время не все операционные системы, программное обеспечение и браузеры поддерживают вариативные технологии, и мы настоятельно рекомендуем перед покупкой проверить, поддерживает ли ваше программное обеспечение вариативные шрифты opentype. Если у вас есть какие-либо вопросы по вариативным шрифтам, вы можете отправить их нам по адресу[email protected].

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

Первая группа состоит из TT Commons™ Pro, TT Lakes Neue, TT Octosquares, TT Supermolot Neue. Эти шрифты имеют три оси вариативности (толщина, ширина и наклон), благодаря чему пользователь получает доступ к действительно широкому набору вариантов и может настроить ползунки для создания абсолютно уникальной комбинации.

Во вторую группу входят шрифты с двумя осями вариативности, такие как TT Hoves, TT Fors, TT Autonomous. В отличие от первой группы шрифтов, они не позволяют работать с осью ширины, так как имеют ширину по умолчанию, но предоставляют неограниченную свободу (в крайних пределах) в выборе веса шрифта, его наклона или комбинации того и другого.

Третья группа содержит шрифты, которые имеют только одну ось вариативности, и каждая из осей имеет отдельный файл шрифта. Эти шрифты: TT Globs, TT Autonomous Mono, TT Ramillas, TT Runs, TT Interphases, TT Interphases Mono, TT Trailers, TT Norms ^® Pro, TT Firs Neue. Работая со шрифтами из этой группы, вы имеете некоторую свободу свободно выбирать определенный формат шрифта или параметр (либо толщину, либо ширину), что позволяет подстроить шрифт под вашу задачу.

Самой необычной является четвертая группа шрифтов TypeType, в которую входят TT Alientz, TT Frantz и TT Geekette. Основное различие между этой и другими группами заключается в том, что вариативность этих шрифтов напрямую влияет на стиль шрифта и его визуальное оформление. Например, в TT Frantz вы можете использовать ползунок, чтобы изменить среднюю линию шрифта с очень высокого в стиле ар-нуво на очень короткий, несколько авангардный вид. Вариативность TT Alientz позволяет стилистически трансформировать от яркого акцидентного гротеска до очень колючей и энергичной антиквы.