Creating a Micro­soft color font (CPAL/‌COLR)

Tutorial
by Rainer Erich Scheichelbauer
en fr zh

23 October 2014

Microsoft proposed a format for color fonts entirely based on vectors. Glyphs allows you to create and directly export such a color font. Plus, the app takes care of the technical stuff for you.

The Microsoft approach to color fonts employs two additional OpenType tables, CPAL and COLR. CPAL describes a palette of colors, and COLR defines how the colors from CPAL are used by which glyph. Technically, what appears to be multiple colors in a single glyph, is actually multiple glyphs stacked on top of each other, each of them displayed in its individual color. But you need not worry, Glyphs will take care of all that techy stuff.

Setting up a color palette

You start by adding a Custom Parameter called Color Palettes in File > Font Info > Font. For starters, we will add one palette with three colors. The first palette, Palette 0, is already there, so all you need to do is click the plus button in the lower left corner until you see three color swatches. Clicking on a swatch will bring up he macOS color picker. For this example, I will add these three colors:

You can pick any color from any color scheme, even with transparency. Eventually, it will be stored as RGBA (red, green, blue, alpha) in the font file. The alpha stands for opacity, so you can have transparent colors as well. Note that the numbers 0, 1, and 2 have been assigned to the three colors we just created. Keep that in mind for later.

Once you are done, confirm the dialog sheet by clicking OK. If everything is alright, the Custom Parameter line should indicate the number of palettes and colors:

Creating the fallback glyph

So far, so good. There is one problem though. Support for Microsoft-style color fonts, like the one we are about to make right now, is getting more and more widespread, but is not quite universal yet. So, for all non-compliant software, we need to have an old-style black and white glyph that can be displayed just in case. We call this a fallback glyph.

As it turns out, the fallback glyph is already set up: Anything on the master layer (the layer with the name of the master, typically ‘Regular’) is considered to be the fallback. So, for instance, in the Regular master of the uppercase i, we can draw our sans-serif rectangle between cap height and baseline. The little diamond symbols indicate that the nodes are exactly on the metric lines:

Adding the color layers

Now, in the Layers palette in the sidebar (Cmd-Opt-P), create a duplicate of the Regular master. Do so by clicking the plus button, and a backup layer named after the current date and time will appear. In the Layers palette, right-click that layer and choose the layer type Color Palette:

The name of the layer changes automatically and a color circle appears next to the layer name, indicating the palette color for the layer. In order to pick the color for the layer, simply click in the color circle and choose from the pop-up:

While we are at it: the color marked with an asterisk is the user color, i.e., the color that the user can choose in the app in which he or she uses the font.

You can add the other two colors by duplicating the color layer we just created. But this time, you do not need to set the layer type anymore, just pick a different color for each:

Keep in mind that the layers are shown in chronological order: That means that the first layer will be drawn first, then the second layer will be drawn on top of the first layer, and so on. In effect, the bottommost layer is first, and the top layer comes last. That means that you can have multiple layers with the same color, otherwise you would not be able to stack more complex drawings.

Now, all we need to do, is draw our layers. I will leave the Color 0 layer as it is, and make the Color 1 and Color 2 layers the side and bottom of a three-dimensional uppercase i:

Note that the text preview will be in colors as long as a color layer is selected. If you select a master layer (Regular in this example), the preview will be of the fallback black-and-white font.

Export and test your color font

Now we want to test our CPAL/COLR font! I know all we can write so far is IIIIII, but that is good enough for some avant-garde concrete poetry out there.

Whatever we want to write with it, we will have to create an instance in File > Font Info > Exports by clicking on the plus button in the lower left and choosing Add Instance from the menu that pops up:

Give your instance a sensible Style Name, e.g., referring to the basic tint of your colored shapes:

It does not matter which format you pick, CFF/OTF, TTF, WOFF, WOFF 2, or EOT. Since all of them are OpenType-based, Glyphs will be able to insert the necessary tables for viewing. Because CPAL and COLR tables are a fairly recent technology, most apps will only display the fallback.

Some apps already support CPAL/COLR though. The good news: all major browsers now support CPAL/COLR in their current versions:

  • Internet Explorer (since Windows 8.1)
  • Firefox (since version 26)
  • Microsoft Edge (since version 38 on Windows 10)
  • Safari (since macOS 10.13 High Sierra)
  • Chrome (since version 70)
  • Android WebView (since release 71)
  • Opera (since release 58)

The two biggest downsides: Safari is out of the game in older OS versions (up to macOS 10.12 Sierra), and at the time of this writing, Chrome’s display exhibits clipping at the horizontal and vertical bounds of the fallback layer. So you want to make sure that the fallback layer is the fattest one, which encompasses all others in terms of horizontal and vertical expansion.

So, you will most likely want to test your color fonts as webfonts. If you do so, you can use the mekkablue script Test > Webfont Test HTML for creating a quick proofing HTML next to your most recent webfont exports.

Different palettes for instances

You can export multiple variants of your color font and have different color palettes for each of them. To make that happen, first make sure you have multiple palettes set up in the Color Palettes custom parameter you already have set up in File > Font Info > Masters. You can add palettes via the gear menu:

Note the index numbers at the top of the columns? In the above screenshot for example, there is Palette 0 and Palette 1. These are index numbers, and they are important for the next step. Now, confirm the Color Palettes dialog.

In File > Font Info > Exports, do the following things:

  1. Duplicate the color font instance you already have: select it in the sidebar, copy and paste. Or Opt-drag it in the sidebar.
  2. Change the Style Name of the instance to something that makes sense. It needs to be different for the other instance you already have.
  3. In the Custom Parameters field, add a parameter called Color Palette for CPAL. As value, pick the index number of the palette you want to apply. In our example, we want the second palette, which had index number 1:

Now export again, and this time, Glyphs will export both variants:

That’s pretty cool.

Export font in black and white only

What if we want just the plain black-and-white font, without any of the color stuff in it? In other words, export the pure fallback back font without the CPAL and COLR tables. Well, we can tell Glyphs to suppress the export of the two color tables with a custom parameter called Export COLR Table in an instance in File > Font Info > Exports, and turn its value checkbox off, like so:

Then creation of both CPAL and COLR tables will be prevented in the respective instance, and you’ll get a plain, boring, foreground-background font. Boo.

Just kidding.

Cool! Now, for all those other letters besides the uppercase i…


SAMPLE FONT: URLOP BY MIKOŁAJ GRABOWSKI
Update 2018-03-26: Added list of supporting browsers, Color Palette parameter, link to SVG tutorial.
Update 2018-04-14: Updated the tutorial title.
Update 2018-11-06: Updated app and browser support, improved section ‘Different palettes for instances’.