Полезное

Цветные шрифты: гайд для начинающих

Автор: Елизавета Гуменюк Рейтинг топика: +1
Просто люблю писать, переводить и давать людям возможность читать интересный контент. И пусть я не всегда идеальна — есть к чему стремиться!!!

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

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

Сегодня мы рассмотрим ближе данный тренд, и решайте сами, насколько грандиозным он станет. Или наоборот не станет.

Что такое цветной шрифт?

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

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

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

На самом деле существует пять форматов:

  • SBIX (Apple): Растровая версия изображения с собственной поддержкой в системах Mac и iOS
  • CBDT (Google): Растровая версия с поддержкой на базе Android
  • COLR (Microsoft): Векторная версия с встроенной поддержкой в системах Windows 8.1+
  • SVG (W3C): Векторные и растровые версии
  • OpenType SVG (Adobe / Mozilla): Векторные и растровые версии, которые создают формы SVG в шрифтах OpenType

С другой стороны, основные игроки уже начали принимать рекомендации по использованию таких шрифтов. Mozilla (основа веб-браузера Firefox) и Adobe согласились с тем, что OpenType SVG является предпочтительным форматом; другие же все еще находятся в постоянном движении, когда необходимо прийти к нужному решению.

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

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

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

  • Вау, это ужасно!
  • Круто! Я точно знаю, как это использовать!

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

Попробуйте цветной шрифт:

  • Для техники захвата внимания для короткого слова
  • Для элемента значка или логотипа
  • Для кавычки перед началом длинного блока текста
  • Для дерзкого заголовка в дизайне с минимальным стилем
  • Фокусировка на определенном слове или словах в большом блоке текста
  • Когда остальная часть дизайна слишком проста
  • Когда шрифт будет вашим основным элементом дизайна
  • Когда проект требует чего-то забавного и необычного, чтобы привлечь внимание пользователя


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

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

Не используйте цветной шрифт:

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


Развитие тренда

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

Вот как Adobe объясняет OpenType SVG:

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

«Шрифты OpenType-SVG позволяют показывать текст с графическими качествами, сохраняя при этом возможность редактировать, индексировать или искать. Они также могут содержать функции OpenType, которые допускают замещение глифа или альтернативные стили глифа».

«Цветные шрифты, такие как Trajan Color Concept и EmojiOne Color, будут отображаться так же, как и обычные шрифты в меню шрифтов ваших программ, но они могут не отображать весь свой потенциал, поскольку многие программы еще не имеют полной поддержки цветовых компонентов. Если ваша программа не поддерживает оформление SVG в шрифтах, глифы возвращаются к простому черному стилю. Цвет может быть применен к этому резервному стилю, поскольку он будет работать как обычный шрифт OpenType.»

Попробуйте цветной шрифт

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

Создайте свой собственный шрифт

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

К примеру, вы можете использовать, Fontself — это дополнение Adobe Illustrator и Photoshop, которое помогает создавать пользовательские цветовые шрифты.

Скачайте или добавьте

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


Вывод

Готовы ли вы перейти к тренду цветных шрифтов? Или же это слишком для вас и пятнистое содержание — реальная проблема для ваших проектов?

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

Источник

 

  • 10770