Експериментуємо з кольоровими шрифтами

41

Від автора: ось вже кілька тижнів інтернет розбурхує тема кольорових шрифтів. Adobe описує цю технологію наступним чином: «OpenType-SVG формат шрифту, в якому шрифт OpenType всі або частину символів представлені в SVG (масштабованої векторної графіки). Це дозволяє відображати на одному символі кілька кольорів і градієнтів. Саме із-за цієї властивості ми також називаємо OpenType-SVG шрифти кольоровими».

У березні Роел Нискенс писав про свій досвід створення кольорового шрифту, він розповів про проблему, яку вони збиралися вирішити: «Типографіка в інтернеті може приймати тільки один колір: символи або чорні, або червоні, і ніколи червоно-чорні.»

Тепер же завдяки кольоровим шрифтів дизайнери шрифтів можуть використовувати кілька кольорів в одному символі. Веб-дизайнери можуть вибрати один з варіантів властивості font-variation-settings. Нижче я створив демо зі шрифтом Trajan Color, новий шрифт від Adobe. Можна скачати на покращення якості її роботи:

Экспериментируем с цветными шрифтами

Подивіться, як на різних частинах символів ABC відображаються різні відтінки, бачите?

Що це означає для дизайнерів. Для дизайнерів це значить, що незабаром вони зможуть робити щось дуже цікаве зі смайликами, а також зможуть змінювати типи відображення. Зараз же підтримка в браузерах залишає бажати кращого. Однак Adobe попередили всіх на сторінці покращення якості її роботи, створеної Ніком Шерманом:

«Підтримка в браузерах кольорових шрифтів досі розвивається. Такі шрифти вже підтримуються в Firefox і Microsoft Edge (IE). Очікуємо, що все більше розробників браузерів будуть приймати даний формат. Якщо у браузері немає підтримки, шрифт буде відкочуватися на звичайний монохромний.»

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

Экспериментируем с цветными шрифтами

Нижче я навів кілька прикладів кольорових шрифтів, з якими ви можете поекспериментувати вже зараз:

Trajan Color

Emoji One

Bungee від Jonathan David Ross

Bixa Color

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

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

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

Подивіться на демо нижче (у Firefox або Edge):