Normally, web fonts do not contain any information on color, just telling us how many pixels make up a letter. A layout designer specifies a font’s color chosen by a designer separately, in the CSS styles. It had never been a problem until emojis arrived — their meaning depends on the color (🇾🇪🇳🇱🇱🇺), which means you can’t have them have the same color.

Color emojis that we see on our screens today are in fact the most popular color font.

Are color fonts good for anything except these emojis?

Yeah, you can add color to any other font, not just emojis. In such a typeface, each glyph element can have its own color. The information on this color is stored in a font file, which means you can’t paint this font, let’s say, black using a graphic editor software without converting it to curves. On the other hand, a layout designer working with a color font won’t have to specify the color in the CSS.

Predefined color palette might mean more control over using a font for a font designer, and less efforts spent on implementing a complicated design solution for a layout designer.

Are color fonts something new?

Toshi Omagari, designer and author of the book named Arcade Game Typography, writes that the first ever color font was created in 1982 for a game Insector (which was never released). Yet it was only 7 years ago that we started talking about color fonts in today’s understanding.

Back then there were four separate standards. OpenType-SVG — fonts consisting of separate vector or raster images — was being developed by Adobe. The company even released an extension which enabled creating fonts in Photoshop and Illustrator.

Gilbert, OpenType-SVG font, Ogilvy&Mather and Adobe collaboration

However, OpenType-SVG files were much heavier than OpenType files, and Chrome, for example, refused to support this format. The CBDT/CBLC and SBIX fonts dealt only with raster images and turned out to be not applicable on the Web. It was only COLR, which allowed making variable color fonts and did not significantly increase a file size, that subsequently received cross browser support.

COLRv1 (an enhanced version of COLR) arrived along with the OpenType 1.9 standard. One can apply gradients and their own alternative color palette (which essentially means that one color font might have a number of options of color solutions).

Alternative color palettes of the Nabla typeface (Typearture, Google Fonts)

And even though you can design color fonts using any popular font tools, they are only supported by Google Chrome, and when a user installs a font on their machine they see nothing but the default color palette.

What tool do I need to work with color fonts?

Technically, color fonts are supported by Illustrator, I Design, and Photoshop, while in practice this support is pretty much limited. For instance, if a font has several color schemes, it won’t be possible to choose the one you need within the tool. In order to solve this issue, type foundries most often offer to download multiple font files at once (one for each color palette). If the foundry doesn’t provide this option, you can opt for one of the special apps to change the embedded font colors (such as the Color Font Customizer by David Jonathan Ross).

Foldit (Sophia Tai, Google Fonts) in Color Font Customizer

Figma or website builders (such as Readymag or Tilda) do not support color fonts and display them as monochromatic fonts.

How do I know what colors a font features?

If the font specimen doesn’t contain information on color schemes, you can get it on the Wakami Fondue site. On this website, the color palettes are displayed the way they were arranged by the type designer, so, in order to specify the one you need in the CSS styles, you just need to specify its number in the list (yet the first color scheme will have the number 0).

Nabla typeface, color palettes

You can use the CSS to make your color scheme vary depending on the status of the entire website (when a dark theme switches to a light one) or a separate element (for example, on hover), but you can’t enable a smooth gradient transition between two color schemes without setting additional parameters).

Does it mean that I can’t come up with a font with a variable color axis?

You can, yet you won’t be able to achieve a smooth transition between the two states. For example, the Pappardelle Party typeface is fitted with a color axis which enables changing the color in particular letter elements.

Pappardelle Party (David Jonathan Ross)

Plakato Grande by Underware is more difficult than that. The font has five sliders: three of those are in charge of the amount of red, blue, and green, and the other two regulate contrast between the font components. The color transition in Plakato Grade looks smooth, as the color scheme embraces 1,360 fonts — and not 4, as it is the case with Pappardelle.

Plakato Grade (Underware)

Will all fonts eventually be color fonts?

Probably not. Color fonts is a display tool which is still extremely difficult to use (so much that the fontsinuse.com doesn’t feature a single project using COLR or COLRv1).

Plakato in use by TransformX conference 2022 (Underware website)

Are you saying that color fonts are just an emoji-specific technology after all?

It’s too early to tell. Yet the technology definitely has its avid advocates. For example, the Google Fonts library features as many as 10 color fonts (six of those are Arabic-speaking, authored by two separate teams).

Blaka Ink (Mohamed Gaber, Google Fonts)

Typearture (authors of Nabla from Google Fonts) are integrating COLRv1 into their new projects (even a desktop game); designer David Jonathan Ross is experimenting a lot with color fonts, too. The Master TypeMedia students are exploring the technology in their graduation projects. At the same time, not one of the existing COLORv1 fonts supports Cyrillic, Hebrew, or Greek.

Schijn (Typearture)

Niklaas (Typearture)

Шрифт Tinta (Marte Verhaegen)