Кольорові шрифти гайд для початківців

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

Такі виробники як Т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 є досить хороший приклад.

Як використовувати кольорові шрифти?

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

Вау, це жахливо!
Круто! Я точно знаю, як це використовувати!

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

Спробуйте кольоровий шрифт:

Для техніки захоплення уваги для короткого слова
Для елемента значка або логотипу
Для лапки перед початком довгого блоку тексту
Для зухвалого заголовка в дизайні з мінімальним стилем
Фокусування на певному слові чи словах у великому блоці тексту
Коли інша частина дизайну занадто проста
Коли шрифт буде вашим основним елементом дизайну
Коли проект вимагає чогось кумедного і незвичайного, щоб привернути увагу користувача

Як не використовувати кольорові шрифти

Не використовуйте кольоровий шрифт:

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

Тренд колірного шрифту починає набирати силу у деяких великих гравців в типографике. Формат 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, яке допомагає створювати призначені для користувача колірні шрифти.

Скачайте або додайте

Є деякі досить класні кольорові шрифти, які кричать, щоб ви використовували їх у вашому проекті сьогодні. Ось кілька шрифтів, щоб прискорити ваш творчий потік, плюс посилання на інші кольорові шрифти, використовувані вище:

Деякі дизайнери вважають, що ця тенденція дуже цікава і має реальне практичне застосування в друкованих проектах, таких як плакати або листівки. Проте, вони ще не зовсім переконані в ній, коли мова заходить про веб-проектах. Тільки час покаже, чи дійсно ця тенденція стала «наступною великою річчю в веб-дизайні» або черговий скороминущої примхою.