Как правило, шрифты для веба не содержат информации о цвете, а только указывают на то, сколько пикселей должны занимать буквы. Цвет текста, выбранный дизайнером, верстальщик отдельно указывает в CSS-стилях. Раньше это не вызывало проблем, но потом появились эмоджи, смысл которых зависит от цвета (🇾🇪🇳🇱🇱🇺), а значит красить их в один тон нельзя.

Разноцветные эмоджи, которые мы видим на своих экранах сегодня, и есть самый распространённый цветной шрифт.

Подходят ли цветные шрифты для чего-то, кроме эмоджи?

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

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

Цветные шрифты — это что-то новое?

Тоси Омагари, дизайнер и автор книги Arcade Game Typography, пишет, что первый цветной шрифт был нарисован в 1982 году для так и не вышедшей игры Insector.

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

Gilbert, OpenType-SVG шрифт, коллаборация Ogilvy&Mather и Adobe

Шрифты CBDT/CBLC и SBIX работали только с растром и оказались неприменимы для веба. И только COLR, который позволял делать цветные шрифты вариативными и несущественно увеличивал размер файла, впоследствии получил кросс-браузерную поддержку.

COLRv1 (улучшенная версия COLR) появился вместе со стандартом OpenType 1.9. В COLRv1-шрифты можно встраивать градиенты и альтернативные цветовые палитры (то есть в одном цветном шрифте может быть сразу несколько вариантов цветовых решений).

Альтернативные цветовые палитры шрифта Nabla (Typearture, Google Fonts)

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

Какая программа нужна для работы с цветными шрифтами?

Теоретически цветные шрифты поддерживают Illustrator, InDesign и Photoshop, практически же эта поддержка очень ограничена. Например, если в шрифт заложено несколько цветовых палитр, выбрать нужную внутри программы не получится. Чтобы решить эту проблему, студии чаще всего предлагают скачивать сразу несколько файлов (по одному на каждую палитру). Если такой возможности на сайте студии нет, цвета, заложенные в шрифт, можно изменить в одном из специальных приложений. (Например, в кастомайзере Дэвида Джонатана Росса).

Foldit (София Тай, Google Fonts) в кастомайзере Дэвида Джонатана Росса

Figma или конструкторы сайтов (такие, как Readymag или Tilda) цветные шрифты не поддерживают и воспроизводят их как однотонные.

Как узнать, какие цвета есть в шрифте?

Если в спесимене шрифта или на сайте студии нет информации о цветовых палитрах, её можно получить на сайте Wakami Fondue. Цветовые палитры отображаются на сайте в том же порядке, в котором их поставил шрифтовой дизайнер, то есть чтобы прописать нужную вам палитру в CSS-стилях сайта, просто укажите её очерёдность в списке (у первой палитры при этом будет номер 0).

Цветовые палитры шрифта Nabla (Typearture, Google Fonts)

С помощью CSS можно сделать так, чтобы цветовая палитра менялась в зависимости от состояния всего сайта (при переключении с тёмной темы на светлую) или отдельного элемента (например, при наведении), но настроить плавный градиентный переход между двумя палитрами без дополнительных параметров невозможно.

Получается, шрифт, где была бы вариативная ось цвета, тоже сделать нельзя?

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

Pappardelle Party (Дэвид Джонатан Росс)

Сложнее устроен Plakato Grade студии Underware. В нём сразу пять слайдеров — три из них отвечают за количество красного, синего и зелёного, ещё два — за контраст между компонентами шрифта. Переход между цветами в Plakato Grade выглядит плавным, потому что внутри цветовой палитры 1360 шрифтов, а не 4 как в Pappardelle.

Plakato Grade (Underware)

Все шрифты когда-нибудь станут цветными?

Скорее всего, нет. Цветные шрифты — инструмент для акциденции, которым пока очень сложно пользоваться (настолько, что на платформе fontsinuse.com нет ни одного проекта со шрифтами COLR или COLRv1).

Шрифт Plakato в айдентике конференции TransformX conference 2022 (сайт студии Underware)

То есть цветные шрифты всё же остались технологией для эмоджи?

Пока рано об этом говорить. Но у технологии определённо есть свои евангелисты. Например, в коллекции Google Fonts целых десять цветных шрифтов (и шесть из них — арабские, сделанные двумя коллективами авторов).

Шрифт Blaka Ink (Мохамед Габер, Google Fonts)

Студия Typearture (авторы Nabla из Google Fonts) интегрирует COLRv1 в свои новые проекты (и даже в десктопную игру); много экспериментирует с цветными шрифтами и дизайнер Дэвид Джонатан Росс. Студенты магистратуры Type Media исследуют технологию в своих дипломных проектах. При этом ни один из существующих в интернете COLRv1 шрифтов не поддерживает кириллицу, иврит или греческий.

Шрифт Schijn (Typearture)

Шрифт Niklaas (Typearture)

Шрифт Tinta (Марта Ферхеген)