Разноцветные, яркие и необычные шрифты периодически появляются в интернете, в веб-дизайне или художественном творчестве, полиграфии. Порой кажется, что вот-вот они станут истинным трендом. Но мы не наблюдаем, чтобы действительно крупные и именитые проекты их использовали. Почему же о них все же говорят многие дизайнеры, пишут и дискутируют на тему, почему некоторые веб-мастера используют, если не настоящий цветной шрифт, то его «подобие» в своих проектах (в виде изображений, анимаций)? В чем секрет и особенность таких необычных шрифтов?
Одновременно с этим основные поставщики шрифтов (например, Adobe Typekit) выпускают свои вариации разноцветных шрифтов, что поддерживаются большинством браузеров. Да, они еще не всегда отображаются верно… но зато это уже большой шаг к тому, чтобы сделать такие шрифты доступными более широкому кругу дизайнеров и художников.
Но, так или иначе, многие называют цветные шрифты следующим «глобальным трендом веб-дизайна». Мы вместе с вами попробуем разобраться, в чем же состоит их трендовость, их магия и возможности для веб-дизайнера, в качестве следующей главы темы о потрясающих текстовых эффектах. А стоит ли их использовать и развивать – решать вам.
Что ты такое цветной шрифт
Как мы уже рассказывали ранее, цветной шрифт представляет собой именно шрифт, но включающий в себя несколько цветов, оттенков, текстур, градиентов, уровней прозрачности. И это не просто окрашивание букв, это уже готовые отдельные элементы с тенями, цветовыми переходами и так далее. При этом каждый такой элемент представляет собой уникальную законченную букву и не имеет повторов среди прочих элементов данного набора.
Особенность цветных шрифтов также и в том, что внутри них можно найти векторные фигуры, растровые изображения или даже два разных шрифта в одном шрифтовом файле, отчего сам по себе набор становится тяжелее в использовании и размере в сравнении с обычными файлами шрифтов. Обычно в цветной шрифт входят наборы «эмодзи» или надписи (буквы), которые представляют собой иконки. Если говорить о цвете, то это и однотонные, и многоцветные, и нейтрально-серые.
Но самая большая проблема цветных шрифтов, что имеется сейчас в сфере веб-дизайна - отсутствие одного общего стандарта. Хотя многие веб-дизайнеры попросту пользуются нейтральным SVG-изображением, которое удобно масштабировать, в то время как растровые вариации имеют только один определенный размер. Также часто попросту заменяют надпись цветным шрифтом на картинку в формате jpeg/png.
И несмотря на это существует целых пять форматов для цветных шрифтов:
- OpenType SVG (Adobe/Mozilla): векторные и растровые версии, которые представлены в виде изображений SVG внутри шрифтов OpenType
- SVG (W3C): вектор и растр
- CBDT (Google): растровые, поддерживающиеся системой Android
- COLR (Microsoft): векторные, поддерживающиеся в системах Windows 8.1+
- SBIX (Apple): опять растровые, поддерживающиеся Mac и iOS
То есть, каждая компания для своих целей разработала собственный формат цветных шрифтов, который не поддерживается на других системах, а также есть пара универсальных.
С другой стороны, крупные игроки в сфере веб-дизайна и именитые компании начинают рассматривать разные рекомендации по использованию таких шрифтов. Вот, например, Mozilla (основа веб-браузера Firefox) и Adobe согласились, что OpenType SVG (поддерживается, начиная с Photoshop CC 2017 обновление за октябрь 2017) является предпочтительным форматом; другие все еще находятся в размышлениях, поскольку до сих пор не решились отказываться от собственных разработок.
Эволюция цветного шрифта
Развитию цветных шрифтов в большей степени способствуют крупные игроки типографики и отчасти художники, создающие такой шрифт. Формат OpenType SVG, принятый Adobe и Mozilla, может использоваться и как инструмент, и как формат, а потому делает шрифты универсальными для широкого применения. И с конца 2017 года цветные шрифты появились в Photoshop в разделе Глифы (там же где и эмодзи).
Вот, что пишет сама Adobe: «OpenType-SVG – формат шрифта, в котором шрифт OpenType имеет все или часть своих символов в формате SVG, благодаря чему есть возможность отображать многоцветность и градиент на одном глифе. Из-за этих особенностей он называется «цветной шрифт».
Текст, напечатанный такими шрифтами, можно редактировать, индексировать, искать. Цветные шрифты могут содержать и элементы OpenType, которые позволяют заменять глифы».
Что касается таких шрифтов как Trajan Color Concept и EmojiOne Color, то они уже отображаются в списке всех шрифтов в Photoshop, но могут не раскрыть весь свой потенциал в будущем, поскольку не все приложения поддерживают работу с форматом. Иными словами, если приложение не обрабатывает SVG, то глиф будет иметь обычный черный цвет.
С точки зрения эволюции цветных шрифтов и роста их популярности, как тренда в веб-дизайне, есть две вещи, которые играют важную роль и от которых зависит дальнейшая судьба шрифтов:
- Совместимость со всеми основными браузерами для веб-проектов. Сейчас именно из-за проблем с совместимостью цветной шрифт чаще можно увидеть в полиграфии, нежели на сайтах.
- Принятие общих методов стиля или должно произойти отклонение от красочности в дизайне, в целом. То есть, необходимо выработать некоторые нормы и правила, по которым можно использовать цветной шрифт с тем, чтобы не нарушить общий дизайн. Соответственно, и тренды веб-дизайна будут изменяться, дабы соответствовать универсальности сочетания.
Использование
При виде цветного шрифта на ум приходят только две мысли: «Фи, как отвратительно и нечитабельно, несерьезно», и «Клево и оригинально, почему бы, собственно говоря, и не попробовать…». Вне зависимости от того, к какому лагерю вы принадлежите есть основные моменты, когда цветной шрифт более чем уместен в использовании. Разумеется, если делать это разумно. То есть ограничиться заголовками, отдельными выделениями слов, а не масштабно весь контент оформить в аляповато-сочном стиле. Попробуйте цветной шрифт для:
- привлечения внимания к слову
- создания элемента логотипа или иконки
- буквицы в начале большого текстового блока
- оформления заголовка
- выделения нескольких слов или одного слова в большом блоке текста
- при наличии простой конструкции дизайна
- когда акцент в дизайне делается на эффектную и потрясающую типографику
- когда проект требует наличия чего-то особенного, веселого, необычного для привлечения внимания
Чтобы, наконец-то, было более наглядно, посмотрим еще на некоторые примеры того, как веб-дизайнеры в течение многих лет использовали цветной шрифт в своих проектах.
Проект elasticomunicazione почти полностью состоит из цветного шрифта. Может показаться сначала, что это обычные рисованные буковки, но если посмотреть внимательно, это именно шрифт, в котором каждая буква уже заранее отрисована и обработана. На каждой странице у нее свой цвет. Но вот использовали дизайнеры все эти надписи, как изображение png. То есть, в чистом виде сам шрифт на самом сайте не используется.
The magic coat решили сделать логотип с использованием цветных букв. Разумеется, что логотип, опять же, представлен в виде png изображения.
Отличным примером применения цветного шрифта и выделения им только одного слова является проект carboncrayon. Здесь и логотип в виде цветной буквы, и слово Craft также составлено из элементов цветного шрифта. Но поскольку данное слово представляет собой анимацию gif, то на самом сайте в чистом виде шрифт не используется.
Кроме того, стоит посмотреть на сайты madebyfew, koto-bana, typesoftype, color.typekit, reflektor.digital (практически на всем сайте использована цветная анимация для букв), icon-shop.
Поскольку использовать цветной шрифт в чистом виде достаточно непросто в веб-дизайне, то его заменяют либо изображениями, иконками, либо наложением на текст художественных цветных эффектов. Поэтому дизайнерам желательно уметь определять и отличать, где использовался настоящий цветной шрифт, а где эффект.
Когда использование идет во вред
Несмотря на то, что как и любой иной шрифт, цветной использоваться должен разумно и умеренно, все же именно с ним в большей степени можно переборщить и навредить целостности дизайна. Если нет желания вернуться в далекие 90-е годы прошлого столетия, когда все мигало, светило, цвета практически не сочетались друг с другом, то стоит задуматься вот о чем…
- Цветной шрифт не сочетается с изображениями: ни под самим текстом, ни поверх него.
- Фон должен быть чистым, однотонным, желательно светлым или контрастным.
- Текста не должно быть много для такого шрифта (не статья, новость или заметка). Достаточно одного предложения, слогана или его части.
- Если дизайн и без цветного шрифта насыщен художественностью, анимацией, различными эффектами движения. При таких вариантах, одна анимация и спокойный оттенок цвета – все, что нужно чтобы создать визуализацию.
- В сочетании с другими художественными шрифтами. Например, если вы подбираете брусковый плакатный шрифт или рукописный каллиграфический со множеством завитков, то наличие рядом цветного более чем неуместно.
Если хочется поработать с цветным шрифтом
Цветные шрифты с свободном и платном доступе распространяются в интернете, но и у дизайнеров есть все возможности, чтобы создать свой, что подойдет для их дизайн-проекта. В тоже время, собственное создание шрифта зависит, в большей степени, даже не от полета творческой мысли, а от навыков работы с ПО. Цветной шрифт может включать в себя все, от изображений, ваших любимых фотографий до красивых пузырьков и штрихов в градиентных цветах. Вы можете сделать его полностью самостоятельно или использовать инструментарии.
Fontself Maker – надстройка для Adobe Illustrator и Photoshop, которая помогает создавать пользовательские шрифты. Подходит для версий CC 2015 и старше. Приложение платное, но есть варианты и торрент эдишен.
Glyphs app – подробный учебник о том, как самостоятельно создать глифы, раскрасить их, создавая сам шрифт.
FontLab Pad – бесплатное приложение для создания цветных шрифтов. Есть также и наглядный видео-учебник.
Если желания самому делать нет, то вполне можно найти и отличные варианты на просторах интернета. Это, например, Abelone и Playbox, Gilbert, bixa color, Color Tube, Beach Towel, bun gee, OneLine Bold, Neon и многие иные.
Завершение
А теперь подумайте: готовы ли вы к тому, чтобы цветной шрифт стал тенденцией в веб-дизайне? Готовы ли вы действительно подбирать и размышлять о сочетании цветов и эффектов? Готовы ли вы задуматься о том, какие проблемы могут возникать с вашими сайтами и о вариантах их решения? Или наоборот, все это настолько сложно и по факту никому не нужно, поскольку плоскость и простота доминируют?
Во всяком случае, как бы вы не ответили на эти вопросы, но нужно отдать должное – тренд веселый и он имеет реальное практическое применение в полиграфии (плакаты/листовки). И если аккуратно его использовать, то и веб-проекты вполне себе могут выиграть от этого, они могут оказаться впереди конкурентов.
Впрочем… время покажет, смогут ли цветные шрифты стать следующей большой тенденцией веб-дизайна или останутся мимолетной причудой. Но факт остается фактом, они интересны, занятны, любопытны и отвергать их сразу и безоговорочно - тоже не есть верно. Если не сам шрифт использовать, то всегда можно заменить изображениями, как мы и показывали в примерах.
