Как сделать веб-шрифты красочными

Сегодня рассказываем о палитрах CSS в работе с многоцветными шрифтами COLRv1, которые поддерживаются в последних Chrome и Edge, и, конечно, показываем их возможности к старту курса по Frontend-разработке.

---

Тоши Омагари, автор Arcade Game Typography, пишет, что первый многоцветный цифровой шрифт создали в 1982 году для так и не вышедшей игры под названием Insector. Разноцветные шрифты (иногда их называют составными шрифтами) по-прежнему встречаются в сети довольно редко, даже несмотря на то, что с 2018 года формат шрифта COLR получил полную кросс-браузерную поддержку, даже в Internet Explorer!

Технология открывает совершенно новое направление в творческих возможностях типографики. И, пока некоторые из увиденных мною шрифтов были, мягко говоря, вульгарными, хроматические шрифты выглядят забавно, современно и цепляют внимание.  С добавлением новых функций CSS для управления цветовой палитрой в цветных шрифтах (включая свойство font-palette и правило @font-palette-values) и развитием формата шрифта COLR пришло время поэкспериментировать с тем, на что способна современная типографика в вебе. 

Поддержка COLR

Последний раз я писал о цветных шрифтах в 2018 году. На тот момент существовало 4 разных стандарта разноцветных начертаний: OpenType-SVG, COLR, SBIX и CBDT/CBLC. С помощью ChromaCheck можно проверить, какие форматы цветных шрифтов поддерживает ваш браузер.

Google Chrome отметил OpenType-SVG как WONTFIX. Это означает, что данный формат никогда не будет поддерживаться Chrome или Edge. SBIX и CBDT/CBLC чаще всего лучше не использовать в вебе, поскольку они основаны на растровых изображениях и при более крупных размерах шрифта размываются. Кроме того, эти стандарты — неудачный выбором для веба также из-за большого размера файла растровых шрифтов.

Ульрике Рауш создала LiebeHeide – растровый шрифт, который крайне правдоподобно воспроизводит письмо шариковой ручкой. «Моей самой главной целью всегда было предельно реалистично воспроизвести рукописный текст», — сказала она мне. — В LiebeHeide мне наконец-то удалось повторить эти рукописные атрибуты в шрифте. Минусы? Все PNG-изображения собираются в файле шрифта, и в итоге файл OTF приобретают огромный размер. Для настольных приложений по типу Adobe InDesign это, может, и не проблема, но для применения в вебе такой шрифт вряд ли подходит».

Все браузеры поддерживают шрифты COLR (сейчас их чаще называют COLRv0). В 98-й версии Chrome (и Edge), которая вышла в феврале, добавили поддержку COLRv1 — развитие формата.

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

COLRv0 и COLRv1

COLRv1 — это часть стандарта OpenType 1.9. Несмотря на то, что в исходном COLRv0 не было многих креативных возможностей OpenType-SVG, в COLRv1 они есть, причём без определённых недостатков. Например, в COLRv0 получался только сплошной тон, тогда как в COLRv1 можно делать линейные, радиальные и конические градиенты. Кроме того, в данном формате доступны смешивание и наложение, а также повторное использование формы для сохранения размера файла.

Эксперт по типографике Роэл Нискинс объясняет: «Когда-то я считал OpenType-SVG лучшим форматом, ведь он предлагал наибольшую универсальность. Но затем пришёл к выводу, что он слишком сложен для низкоуровневой работы. Например, для рендеринга текста. В нём реализуется базовое подмножество SVG на уровне рендеринга шрифтов. Но OpenType-SVG плохо работает с другими технологиями шрифтов (хинтинг, оси вариативных шрифтов и т. д.), и его сложно реализовать. Так что я перешёл на COLR. По сути, COLR использует всё, что уже есть в шрифтах OpenType. Единственное «дополнение» — разделение на слои и возможность изменить цвет каждого слоя. Просто, но эффективно».

COLRv1 полностью совместим с осями вариативных шрифтов, и уже есть примеры вариативных шрифтов COLR: Merit Badge, Plakato Color и Rocher Color.

Ниже приведён яркий пример от Ульрике Рауш, демонстрирующий возможности формата. Это гарнитура пока что не вышедшего шрифта, которая имитирует неоновую вывеску:

Аким Хелмлинг из шрифтолитейной фабрики Underware в восторге от COLRv1. Он рассказал мне, что «в принципе, формат COLRv1 может оказать такое же (если не большее) влияние на дизайн шрифтов, как и вариативные шрифты за последние годы». Для Акима это однозначно лучший формат. «Все прежние цветовые форматы были неудачными попытками добавить цвета в глифы. Кто-то видит хорошее решение в OpenType-SVG, но, на мой взгляд, оно не является таковым. С прагматичной точки зрения, SVG — «запертая комната» в открытой структуре OpenType. Повторно использовать или связать данные невозможно, равно как и создать связь между таблицей SVG и другими таблицами шрифтов. Из-за этого мы не можем создать вариативный шрифт с вариативными данными SVG».

Этот формат всё ещё развивается. Пока Mozilla не поставляет COLRv1, но она включила этот формат в свой рейтинг и заявила, что он потенциально способен «заменить шрифты OpenType-SVG при использовании в вебе». Apple не торопится внедрять COLRv1 в Safari.

Шрифты COLRv1 будут отображаться и читаться этими браузерами, однако все буквы будут однотонными (его можно настроить через свойство CSS color, как для обычного шрифта). Нам ещё предстоит увидеть, как многие шрифтолитейные студии выпустят шрифты COLRv1, а ведь некоторые популярные инструменты дизайна (например Figma) не поддерживают даже COLRv0. И всё же я верю в то, что они — будущее цветной типографики в вебе. За короткое время существования COLRv1 уже появились прекрасные примеры возможностей этой технологии: Reem Kufi и Bradley Initials.

COLR и CSS

Если вы работаете с цветным шрифтом, то, скорее всего, хотите управлять его цветами. До недавнего времени сделать это средствами CSS было невозможно. Со свойством font-palette можно перезаписывать стандартную цветовую схему шрифта и использовать собственную. Это свойство работает со шрифтами COLRv0 и COLRv1. (Майлз Максфилд из Apple объясняет, что шрифты SVG можно настроить на использование палитр, тогда как все цвета COLR шрифтов автоматически заменяются через CSS).

Создать достойную цветовую палитру – это настоящее искусство. Некоторые дизайнеры шрифтов проделали за нас колоссальную работу и добавили альтернативные палитры в шрифты. С помощью base-palette в CSS вы можете выбирать различные цветовые схемы.

Но как же понять, есть ли в шрифте альтернативная палитра? Это подскажет сайт шрифта. А если не подскажет, то есть удобное средство под названием Wakamai Fondue, которое перечисляет все доступные цветовые схемы (см. в изображении ниже). В этом примере я использую Rocher Color – бесплатный вариативный цветной шрифт от Henrique Beier с нотками Flinstone. После его проверки на Wakamai Foundue видно, что в шрифте используется 4 цвета и он поставляется с 11 разными вариантами палитры.

С помощью base-palette: 0 можно выбрать цветовую палитру по умолчанию (в примере с Rocher это оттенки оранжевого и коричневого).

 

Через свойство и значение base-palette: 1 выбирается первая альтернативная палитра, определённая создателем шрифта, и т. д. В следующем примере кода я выбираю цветовую палитру с различными оттенками серого:

 @font-palette-values --Grays {   font-family: Rocher;   base-palette: 9; }

После выбора палитры через правило CSS @font-palette-values применить её можно через font-palette:

.grays {   font-family: 'Rocher';   font-palette: --Grays; }

Конечно же, вам однажды захочется создать собственную палитру, которая соответствует вашим фирменным цветам или нюансам дизайна. Если вы хотите заменить все цвета, не прописывайте base-palette.

Как пример возьмём Bungee от известного дизайнера шрифтов Дэвида Джонатана Росса. В нём по умолчанию используются 2 цвета: красный и белый. В примере ниже я перезаписываю оба цвета шрифта, а base-palette не используется потому, что она не важна:

@font-palette-values --PinkAndGray {   font-family: bungee;   override-colors:     0 #c1cbed,     1 #ff3a92; }  @font-palette-values --GrayAndPink {   font-family: bungee;   override-colors:     0 #ff3a92,     1 #c1cbed; }

Другой способ — можно сначала настроить base-palette, а затем выборочно изменить некоторые цвета. Ниже я использую серую цветовую палитру Rocher, но меняю один цвет на мятно-зелёный:

@font-palette-values --GraysRemix {   font-family: Rocher;   base-palette: 9;   override-colors:      2 rgb(90,290,210); }  body {   font-family: "Rocher";   font-palette: --GraysRemix; }

При определении override-colors непросто понять, каким числом какой кусочек шрифта будет заменён. Тут придётся поэкспериментировать и получить желаемый эффект можно методом проб и ошибок.

 

При желании вы можете даже изменить цвет шрифтов эмодзи. Например, Twemoji (см. ниже) или Noto. Вот забавная демонстрация от конструктора шрифтов из Google:

 

Текущие ограничения

Вот одно из прискорбных ограничений: настраиваемые свойства CSS не работают в @font-palette-values… по крайней мере сейчас. То есть следующая конструкция не заработает:

@font-palette-values --PinkAndBlue {   font-family: bungee;   override-colors:     0 var(--pink),     1 var(--blue); }

Есть и другое ограничение. Анимации и переходы из одной font-palette в другую не интерполируются. Иначе говоря, вы можете моментально переключаться из одной палитры в другую, но не можете создавать между ними плавную анимацию. К сожалению, моя мечта о броском анимированном шрифте эмодзи остаётся мечтой.

Поддержка браузера

font-palette и @font-palette-values поддерживаются в Safari с версии 15.4. В Chrome и Edge они дошли только с выходом версии 101.

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

Настольные компьютеры

Мобильные устройства / Планшеты

Примеры использования

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

COLR и иконочные шрифты

Возможно, иконочные шрифты больше и не являются самым популярным методом отображения иконок в сети (Крис объясняет, почему), но они по-прежнему широко используются.  При использовании иконочного шрифта с несколькими цветами (например, Duotone с FontAwesome или двухцветные иконки из  Материального дизайна) font-palette может предложить упрощённый метод его настройки.

 Недавно Нолан Лоусон написал о проблемах использования эмодзи в вебе. В блоге разработчиков Chrome объясняется текущее и довольно сложное решение:

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

Если бы иконочный шрифт COLRv1 получил более широкую браузерную поддержку, то он мог бы предложить метод гораздо проще. Кроме того, у COLRv1 есть преимущество: он выглядит чётко при любом размере, тогда как нативные браузерные эмодзи при больших размерах шрифта пикселизуются и размываются.

Заключение

До появления цветных шрифтов креативность типографики в вебе ограничивалась обводкой и градиентной заливкой через CSS. Вы всегда могли сделать нечто более оригинальное с векторным изображением, но это не настоящий текст: пользователь не сможет выделить его и скопировать в буфер обмена; по нему нельзя выполнить поиск на странице через Command+F; он не читается средствами чтения с экрана. Чтобы просто отредактировать что-то, вам придётся открывать Adobe Illustrator.

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

А мы поможем прокачать ваши навыки или с самого начала освоить профессию, актуальную в любое время:

• Профессия Frontend-разработчик

• Профессия Fullstack-разработчик на Python

Выбрать другую востребованную профессию.