Шрифты в эпоху облаков

История и модель работы Typekit

Сервис Typekit был создан в 2009 г. и первым предложил готовое решение для фантастической по тем временам задачи — реализации типографики на веб-сайтах в качестве, не уступающем «бумажному» дизайну. Да ещё с полностью индексируемым (с возможностью поиска) текстом и без необходимости представлять любой фрагмент богато оформленного текста «тяжёлым» растровым изображением. Для этого как раз успели сложиться все условия с технической точки зрения — поддержка в современных браузерах CSS-свойства @font-face и бодрые реализации JavaScript. Но дело буксовало из-за неготовности серьёзных студий выкладывать профессиональные шрифты на веб-серверы в незащищённом виде и отсутствия практики их лицензирования для веб-использования. Именно эти вопросы взял на себя и красиво решил Typekit — и затея выстрелила! Шрифтовые студии получили удобные условия сотрудничества, продуманные варианты лицензирования и многоуровневую защиту шрифтов от воровства, а пользователи открыли для себя библиотеку из сотен шрифтов лучших мировых студий, доступную для простого использования на своих веб-сайтах в несколько кликов.

Популярность Typekit как движка доставки веб-шрифтов сейчас такова, что с ним сотрудничает более 50 самых востребованных шрифтовых студий (среди которых такие тяжеловесы, как Bitstream, FontFont, Mark Simonson Studio, typetogether, URW++ и даже российский ParaType). Число представленных гарнитур — около тысячи (самих шрифтов свыше 4200), и здесь стоит разобраться, что именно за шрифты нам предлагают. Во-первых, библиотека Typekit курируется. В ней нет случайных шрифтов малопредсказуемого качества, принятых вслепую у начинающих шрифтовиков-экспериментаторов — это сервис от профессионалов для профессионалов, пусть и доступный всем желающим. Но это совсем не означает, что Typekit не рассматривает для включения в библиотеку талантливые работы индивидуальных дизайнеров — наоборот, для них существует процедура сдачи шрифта (см. врезку «Сдаём шрифты»).

Но веб — далеко не единственная область применения шрифтов. В конце 2013 г. — начале 2014 г. Adobe плавно внедрила в Creative Cloud технологию Desktop Font Sync, открывшую перед шрифтами в Typekit новые горизонты. С её помощью стало возможно использовать многие гарнитуры (правда, не обязательно во всех начертаниях) в обычной работе дизайнера в любых приложениях на своем рабочем компьютере. Поддержка этой возможности опирается на два обстоятельства. Первое: наличие у конкретного начертания, помимо обычной веб-лицензии, дополнительной — на использование «на десктопе» (это решение принимает владелец конкретного шрифта, и пока это случилось примерно с четвертью библиотеки Typekit). Второе — работа приложения Creative Cloud в системе пользователя, которое в данном случае фактически выступает менеджером шрифтов, отвечающим за синхронную установку или удаление выбранных в облаке шрифтов на всех компьютерах, где пользователь авторизован под своим Adobe ID.

Выбор шрифтов на сайте Typekit

Интерфейс выбора и использования шрифта в Creative Cloud/Typekit тщательно продуман и обустроен с оглядкой на задачи, стоящие перед дизайнером и технические характеристики нужного ему шрифта. Основной интерфейс поиска на сайте Typekit — раздел Browse Fonts со множеством фильтров в правой колонке. Фильтры организованы по категориям: классификация шрифта, доступность для использования на сайтах и/или локально (web use/desktop use), задачи (набор/акциденция), поддерживаемые языки и специфические свойства шрифта (вес, ширина, относительная высота строчных, контраст, наличие минускульных цифр и капительных вариантов букв). Также доступен выбор по спискам (по дизайнерским темам и задачам, популярным категориям и множеству других признаков) — раздел Browse Lists; студиям — Foundries; и в галерее реальных работ — Gallery.

Отдельно остановимся на селекторе языков — последнем разделе Language Support в колонке фильтров. В российских реалиях стоит взять за правило сразу нажимать кнопку русского языка во избежание дальнейших разочарований. Да, список гарнитур предсказуемо сузится (до 111 для веба или 24, доступных локально), но и это количество первоклассных шрифтов, согласитесь, будет нелишним. Только будьте внимательны с тестером шрифтов на странице конкретного шрифта — символы кириллицы в нем не поддерживаются (как и латиница с восточноевропейскими диакритическими знаками; причин коснёмся дальше), и русские буквы в набранном тексте будут показаны шрифтом браузера, заданным по умолчанию. Стоит иметь в виду, что селектор показывает лишь самые популярные языки, но список реально поддерживаемых конкретных шрифтов может быть шире — он всегда представлен на страничке этого шрифта. Такие языки, как греческий, арабский, иврит и все дальневосточные, пока не поддерживаются Typekit для веба, однако при локальном использовании вас могут ожидать приятные сюрпризы. Так как исходный шрифт мог иметь символы восточных языков, грех не предоставить пользователю доступ к ним. И это возможно; правда, только для нескольких шрифтов с десктоп-лицензией. Их список доступен по ссылке Additional non-Latin fonts на странице управления синхронизированными шрифтами.

Подключение шрифтов из Typekit

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

Менеджер Creative Cloud, закладка управления синхронизированными шрифтами

С локальной установкой всё просто: нажатие кнопки Sync на сайте в течение нескольких секунд запускает установку («синхронизацию») в системе пользователя. Это сработает на одном или двух компьютерах пользователя (под одним Adobe ID можно авторизоваться на двух компьютерах одновременно) и при условии, что запущено приложение Creative Cloud. При этом в Windows и Mac OS X будет установлена немодифицированная исходная OTF-версия шрифта со всеми OTF-функциями и полным набором символов, заложенными студией при разработке (что и объясняет неожиданные «подарки» в виде расширенного набора символов). Шрифт устанавливается в скрытом виде в специальную папку, но доступен всем локальным приложениям, а не только разработанным Adobe. При этом приложения-менеджеры шрифтов такие гарнитуры не видят, для управления десктоп-шрифтами Typekit используется приложение Creative Cloud. В нём в закладке Fonts вы найдете список шрифтов из сервиса, синхронизированных с вашими машинами, и кнопки для управления ими (например, удаления) и поиска новых. Кнопки отправят вас на сайт Typekit, поэтому необходимо подключение к интернету.

Что касается использования на сайтах, процесс несколько сложнее. Нажав кнопку Use Fonts, переключаемся в закладку Web окна Use This Family, а дальше необходимо создать или выбрать один из наборов, куда будет включен нужный шрифт. Эти наборы и называются «китами» (kits — отсюда название сервиса).

Настройка набора для использования шрифтов на сайтах

Их смысл в том, что именно наборы привязываются к каждому конкретному сайту/проекту. Выбрав набор, попадаем в окно конфигурации, где перечислены включенные в него гарнитуры и выбор начертаний, параметры поддержки языков, возможность указать специфические HTML-элементы, к которым будет применяться набор, и, самое главное, — домены или субдомены, для которых будет подключаться набор и где будут использоваться его шрифты. Здесь же дана полезная информация о суммарном «весе» кита, примеры упоминания подключенных шрифтов в CSS и собственно две строчки готового JavaScript-кода вставки, которые необходимо скопировать в заголовок каждой страницы сайта внутри тега ‘Head‘. Повторю вкратце: добавляем шрифты в набор и выбираем начертания, прописываем в набор нужные сайты, включаем поддержку русского языка, копируем код вставки в заголовок страниц своего сайта, — и всё готово к упоминанию шрифта по названию в свойствах CSS и определениях стилей и классов.

Несколько важных моментов. Во-первых, языки. Ради скорости подгрузки набора сервер Typekit транслирует не полные шрифтовые файлы, а их «сабсеты» — выборки символов, достаточные для определённых языков. И здесь ему пока не хватает гибкости, потому что вариантов лишь два — базовая латиница с основной диакритикой (в первом приближении это близко к кодовой странице Windows 1252, которой хватает для английского и большинства западноевропейских языков) либо полный шрифт для кириллицы и полноценной поддержки восточноевропейских языков. Минус единственно подходящего нам второго варианта — в существенном увеличении «веса» шрифтов: если для англоязычных сайтов можно легко создать набор с четырьмя-пятью гарнитурами в пределах рекомендованных 400 кБ, то при включении кириллических шрифтов мы «упрёмся» в ограничение уже с двумя-тремя. С другой стороны, вкус и здравый смысл в выборе шрифтов никто не отменял, и более двух гарнитур на одной странице или сайте редко оправдано. Впрочем, и лимит в 400 кБ довольно условен — он зависит от ширины канала у пользователя, поэтому технически не ограничивается.

Далее важно упомянуть в списке доменов, где будет использоваться набор, локальную машину, на которой разрабатывается и тестируется сайт, — иначе будет недоступен предварительный просмотр шрифтов в процессе работы в собственном браузере. Для этого используется адрес 127.0.0.1 или его стандартный синоним localhost, но, кроме того, важно обеспечить, чтобы на рабочей машине был запущен локальный веб-сервер. Адреса прописываются в окне Kit Settings (вызывается щелчком в правом верхнем углу редактора наборов). Возможно также подключение шрифтов Typekit к популярным блоггерским платформам WordPress, TypePad и др. — подробные инструкции можно найти в обширной (но, увы, только англоязычной) онлайн-справке Typekit. Наконец, закончив настройку, важно не забыть нажать милую сердцу читателей этого журнала зелёную кнопку Publish — это обновит набор на сервере и активирует сделанные настройки на подключенных к нему сайтах.

Доступ, планы и лицензионные тонкости

Немного об ограничениях. Typekit — платный сервис, он предлагает несколько планов. Они отличаются, в основном, максимальным числом просмотров страниц сайта в месяц и одновременно используемых шрифтов, но способов официально приобрести какие-либо из них, кроме Portfolio, в России, увы, нет. Однако подписаться на планы Performance и Business без сопровождающих документов, просто через сайт с помощью российской кредитки, вполне возможно. Единственное, что нам по-настоящему недоступно, это планы Enterprise, позволяющие размещать в Typekit собственные шрифты, в т. ч. на нужных CDN. Впрочем, если речь не о собственном шрифте вашей компании, а о купленной гарнитуре, крупные шрифтовые студии позволяют «переносить лицензии в Typekit». Это работает и на младших планах, включая Portfolio — именно он включен в подписку Creative Cloud и допускает до полумиллиона просмотров страниц в месяц без ограничения числа веб-сайтов или количества использованных шрифтов.

Коснёмся и вопроса передачи шрифтов из Typekit и внедрения их в свои работы. К счастью, с последним всё просто: десктоп-лицензия шрифтов разрешает их встраивание в PDF, EPUB и другие форматы электронных книг. С DPS вопрос чуть хитрее. С одной стороны, встраивание в интерфейсы мобильных приложений не допускается ни десктопной, ни веб-лицензиями шрифтов из Typekit. Но с другой, речь здесь вовсе не об интерфейсе, а о контенте, отображаемом в приложении, поэтому можно смело использовать шрифты Typekit в фолио Adobe DPS. Само собой, использование оформленного текста внутри изображений, видео, Flash-проектов и подобных нередактируемых элементов также разрешено.

Сложнее, если вы хотите передать сам шрифтовой файл, например, вместе с вёрсткой в InDesign, которая отправляется в препресс-студию. По понятным причинам это не допускается, но давайте копнём чуть глубже… Если вы работаете в приложениях версии CC, то отдавая такую вёрстку на сторону, вы рассчитываете, что её откроют на другой стороне в той же версии. Но если у кого-то есть версия CC, это автоматически означает, что ему доступен и Typekit со всеми использованными вами шрифтами. Более того, даже их подключение из облака становится всё проще в приложениях Creative Cloud, и мы познакомимся с тем, как это работает на примере InDesign CC, но появление аналогичного функционала в других приложениях — лишь вопрос времени. А пока закроем тему, уточнив, что функция Package соберёт все шрифты, кроме установленных из Typekit (и, как и раньше, шрифтов CJK).

Вспомним и о том, что в отличие от пакетов Creative Suite, в подписку Creative Cloud входит самая актуальная версия Acrobat Pro. Сейчас это версия XI, одна из самых ярких возможностей которой — свободное редактирование и оформление текста в пределах абзацев в PDF-документах. Здесь также актуален вопрос использования шрифтов в части того, что возможно, а что нет. И правило простое: вне зависимости от того, встроен ли шрифт в PDF полностью или частично, редактирование текста этим шрифтом разрешено, только если его копия отдельно установлена в системе этого пользователя. Иначе будет использована подмена из числа доступных в системе похожих шрифтов. Увы, хотя техническая реализация редактирования встроенными шрифтами была не столь трудна, принятое решение продиктовано рисками нарушения лицензий, большинство из которых не допускают редактирование шрифтом после его встраивания в документ. Здесь остается положиться на не обжигавшиеся в прошлом и, возможно, поэтому юридически более «беспечные» решения, вроде Enfocus PitStop Pro (который серьёзным пользователям формата PDF и так необходим как воздух) или всё тот же Typekit, если нужный шрифт с десктоп-лицензией есть в нём. Остальные же полухакерские методы обхода этого ограничения оставим за кадром, потому что совместить их с соблюдением всех прав создателей шрифта пока невозможно…

Поддержка технических возможностей шрифтов

При работе со шрифтами важно и то, насколько полно реализуются их возможности. Практически исчерпывающая поддержка формата OpenType в InDesign (и чуть менее полная в Illustrator и Photoshop) была внедрена ещё до запуска Creative Cloud, но всё же хочется напомнить о ней, ведь именно в виде OTF мы получаем десктоп-шрифты из Typekit. InDesign отличает поддержка стилистических наборов (OTF stylistic sets), которые можно включать как напрямую, так и через стили, а использовать очень удобно для специфических задач русского языка — таких как, например, ударения. Впрочем, для начала это задача для дизайнеров шрифта — добавить для кириллических гласных варианты с ударениями и оформить их в стилистический набор, который мы уже сможем выбрать в InDesign. В коммерческих шрифтах это пока экзотика, но в собственных может пригодиться. Плюс такого подхода ещё и в том, что в экспортированном файле (например, в PDF) текст с ударениями будет корректно индексироваться и в нём будет работать поиск (только не забывайте при экспорте держать включенной опцию Create Tagged PDF).

Бесплатные Edge Web Fonts

Интерфейс выбора шрифта на сайте edgewebfonts.adobe.com

«Младший брат» Typekit — сервис Edge Web Fonts. Главный его плюс — официальная бесплатность и общедоступность, а суть такова, что EWF — это проект, в котором команда Adobe внимательно модерирует лучшие бесплатные веб-шрифты из своей библиотеки, работ индивидуальных дизайнеров, шрифтов Open Source и таких ресурсов, как Google Web Fonts. Далее эти шрифты предлагаются для неограниченного использования на страницах веб-сайтов (увы, без возможности локальной установки) на технологической платформе Typekit, но без необходимости авторизоваться, настраивать и подключать наборы — выбрав гарнитуру и начертания, вы сразу получаете общий JavaScript-код вставки и примеры упоминания шрифта в CSS.

Нередко нам приходится иметь дело и с международными или многоязычными проектами, но простого факта установки шрифта с нужными символами в системе бывает недостаточно для полноценного набора и оформления текста, особенно на ближневосточных и азиатских языках. В этом вопросе в Creative Cloud также хорошие новости. Ещё в InDesign CS6 была добавлена поддержка корректного отображения имеющихся в документе фрагментов, набранных языками RTL (right-to-left — записываемыми справа налево). За это отвечают встроенные теперь в стандартную поставку укладчики текста (composers) Adobe World-Ready Paragraph и Single-Line, раньше входившие только в версию InDesign ME, которую нужно было покупать отдельно, а способа сделать это в России вообще не было. Но если нужно что-то набирать на иврите, арабском, фарси или других языках RTL, переключать направление текста и укладки или использовать специфические ближневосточные возможности форматирования текста (лигатуры, кашиды, поддержку диакритики), без специальной версии InDesign не обойтись — только в ней есть для этого специальные инструменты. Однако теперь это не проблема: достаточно вызвать настройки приложения Creative Cloud, поменять язык установки приложений на английский с поддержкой арабского или иврита и (пере)установить InDesign CC. Это установит ближневосточную версию (для Windows или Mac OS X), разве что придётся мириться с англоязычным интерфейсом. Ну и не забудьте после установки InDesign вернуть настройки языка Creative Cloud обратно к русскому или тому, который вам удобен для будущих установок.

Typekit и Edge Web Fonts на каждый день

Обновленная команда поиска и замены шрифтов с возможностью синхронизации из Typekit в InDesign CC

Начав речь о работе со шрифтами в приложениях, поговорим о том, как поддержка Typekit и Edge Web Fonts вплетается в повседневную работу пользователя. Начнём с InDesign, в котором интеграция Typekit зашла дальше всего. В 2014 г. он научился не только одной кнопкой отправлять пользователя в интерфейс выбора шрифтов Typekit для локальной установки, но и предложил механизм автоматической синхронизации шрифтов из Typekit, если их запрашивает документ, у вас они не установлены, но на сервисе доступны. Для этого в диалоге Find Font, помимо кнопок Change…, появилась команда Sync Fonts. Воспользоваться ей можно как сразу при открывании документа, так и во время работы. InDesign определит среди нужных документу шрифтов те, что есть в Typekit, скачает их и активирует в системе — и всё автоматически. Здесь уместно вспомнить и о возможности, появившейся ещё в версии CS5, но до сих пор не всеми замеченной, — InDesign умеет автоматически активировать без установки в системе шрифты, лежащие рядом с файлом вёрстки в папке Document Fonts (как, например, в собранных для передачи на сторону пакетах) — лишь помните, что они будут доступны только в этом документе.

Поле выбора шрифта в InDesign CC с фильтрами любимых шрифтов, гарнитур из Typekit и кнопкой перехода на Typekit.com

Также коснемся новых возможностей работы со списком шрифтов — в версии InDesign CC в поле выбора шрифта можно искать его не только по первым буквам названия, как раньше, но и абсолютно по любым фрагментам. Например, легко найти все шрифты с расширенным набором символов по слову «pro» или все с буквой L в одном слове и A в другом по строке «l a». Теперь выбор шрифта ускорился до предела: нажали ‘cmd+6‘ (‘ctrl+6‘ на Windows) для перехода в поле выбора шрифта, набрали пару-тройку характерных букв названия, нажали ‘Еnter‘ и готово. Заодно, если на станице сделано выделение в тексте, теперь при переборе гарнитур в списке они «на лету» применяются к этому выделению без лишних ухищрений. Но и это не всё: часто используемые шрифты можно отметить «звездочкой» как любимые, а затем включить фильтр по этому признаку, чтобы сузить длинный список до набора любимых гарнитур. Недавно добавился и аналогичный фильтр, позволяющий ограничить список гарнитурами, доступными для десктоп-синхронизации в Typekit, — он поможет легко отличить шрифты, установленные вами в системе самостоятельно, от тех, которые синхронизировал на все ваши машины Typekit. Команды разработки других программ уже работают над внедрением у себя аналогичного функционала.

Виджет поиска и подключения шрифтов Edge Web Fonts в Edge Animate CC

В Adobe также стараются упростить работу с веб-шрифтами. Настройка наборов в Typekit под свои задачи и конкретные сайты — понятная необходимость; это никак не обойти. Зато использование Edge Web Fonts анонимно, поэтому всё, что нужно для их простого подключения в веб-проекты, легко «зашить» в интерфейс программ. Что и было сделано в трёх приложениях для веб-дизайна и анимации в виде наглядного удобного виджета, в котором можно легко выбрать понравившийся шрифт по задачам и техническим свойствам, и сразу подключить его в проект. Единственное, чего ему пока не хватает, — это возможности отобрать шрифты с поддержкой нужного языка. За этим придётся заглянуть в веб-интерфейс Edge Web Fonts и включить там языковой фильтр. И пара слов о приложениях в Creative Cloud, куда встроен такой виджет. Это Dreamweaver — унаследованный от Macromedia «супермаркет» веб-разработки, универсальное средство с поддержкой самых современных технологий и средствами одновременного просмотра результата и отладки кода HTML, CSS и JavaScript в процессе написания. Adobe Muse — недавно получившее русскоязычный интерфейс новое приложение для всех, кто, обладая лишь дизайнерскими навыками, хочет создавать современные интерактивные сайты в среде, напоминающей InDesign, без написания и строчки кода. И Adobe Edge Animate — приложение для разработки богатой интерактивной анимации для веба, планшетных изданий и мобильных платформ исключительно на основе HTML5, CSS3 и JavaScript — абсолютно универсальной и не зависящей от поддержки Flash в браузерах и на устройствах. В эти приложения встроена поддержка Edge Web Fonts, но шрифты из Typekit или других подобных ресурсов также можно подключать в проекты «ручными» методами.

Поиск шрифтов в Behance

Страница поиска проектов по типографике на Behance.net

Но, конечно, Typekit — не единственный источник шрифтов. К тому же не всегда удобно шрифты арендовать — иногда требуется постоянная лицензия, однако купить себе «навсегда» понравившийся шрифт в Typekit невозможно. И хотя Adobe по-прежнему предлагает коллекцию Font Folio из более чем 2400 OpenType-шрифтов из собственной Adobe Type Library и от крупнейших студий, это недешёвое удовольствие, а шрифты мы обычно выбираем поштучно под конкретные проекты… Не будем здесь останавливаться на хорошо известных ресурсах для поиска шрифтов, но обратим внимание на ещё один подарок от Creative Cloud — аккаунт Behance со всеми возможностями, включая ProSite — личный сайт для профессионального творческого портфолио.

Behance — это самая популярная в мире социальная сеть, нацеленная строго на креативщиков всех мастей — от иллюстраторов и фотографов до промдизайнеров и архитекторов. Собственно, продуманная и развёрнутая система привязки проектов к творческим областям (creative fields, которых там больше 120) и их описания смысловыми тегами, что максимально расширяет возможности поиска нужного, — это самая сильная особенность сервиса. К тому же очень удобна социальная сторона Behance — можно «подписаться» на интересных вам людей и следить за их работами, что поможет также попасть в их поле зрения и позволит приглашать их комментировать ваши завершённые или ещё находящиеся в процессе разработки (WIP) проекты. Короче, если вам есть, что показать, показав это на Behance, вы обратите на себя в 15 раз больше внимания коллег-профессионалов и потенциальных заказчиков и работодателей со всего мира по сравнению со всеми другими ресурсами для размещения креативных портфолио в мире, вместе взятыми. Этим активно пользуются и дизайнеры-шрифтовики, поэтому и продвижение, и поиск шрифтов в Behance очень востребованы. Откройте behance.net, авторизуйтесь как пользователь Adobe Creative Cloud, смените фильтр All Creative Fields на Typography и не забудьте вооружиться большой чашкой кофе — вас ждут несколько часов чистого вдохновения.

Как видите, Creative Cloud предлагает немало нового и интересного как пользователям, так и разработчикам шрифтов. Пробную подписку можно оформить бесплатно на месяц на creative.adobe.com, и если решите, что это для вас, — выберите там же оптимальный персональный план с ежемесячной оплатой по кредитке или обратитесь к любому партнеру Adobe в России, Украине, Грузии и СНГ, если подписка нужна вашей компании.

Все ссылки, использованные в статье, доступны по адресу goo.gl/3zLcC6.

Об авторе: Олег Сидоренко (osidoren@adobe.com) — консультант Adobe Systems в России и СНГ.