Шрифты иллюстратор: Поиск шрифтов на сайте Adobe Fonts

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

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

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

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

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

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

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

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

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

Обрисуйте свои шрифты в Adobe Illustrator для своих проектов перед печатью для достижения наилучших результатов

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

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

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

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

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

Шаг 1. Откройте файл и приступайте к работе

Откройте файл со шрифтами, которые необходимо обвести, в Adobe Illustrator. Затем используйте инструмент выделения, чтобы обвести обозначенный шрифт. Быстрый совет: если вам нравятся сочетания клавиш, буква «v» на клавиатуре также быстро активирует этот инструмент.

Шаг 2. Обведите текст

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

Шаг 3. Время проверки

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

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

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

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

Зачем и как встраивать шрифты в Adobe Illustrator

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

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

Зачем встраивать шрифты в Illustrator?

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

Если вы не встроите свои шрифты в PDF, человек, который откроет файл после вас на другом устройстве без установленных шрифтов, увидит что-то вроде этого:

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

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

Как встроить шрифты в Adobe Illustrator

Чтобы встроить шрифты в Adobe Illustrator, выполните следующие действия при экспорте файла.

1. Перейдите в «Файл» и нажмите «Сохранить копию».
   
2. Выберите «Adobe PDF (pdf) в качестве формата, нажмите «Сохранить».
   
3. В диалоговом окне «Сохранить Adobe PDF» перейдите к параметру «Предустановка Adobe PDF» и выберите «PDF / X-1a; 2001».
   
4. На панели «Дополнительно» вы увидите сообщение «Все шрифты с соответствующими битами разрешений будут встроены». Это еще одно указание для вас на
   
5. Установите остальные предпочтительные настройки, такие как Метки, Выпуск за обрез и Преобразование цвета.
   
6. Нажмите «Сохранить PDF».
   

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

Лицензирование шрифта

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

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

Только для предварительного просмотра

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

May embed

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

Нельзя встраивать

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

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