The glyphs inside most of the digital fonts we used over the course of the last three decades are defined as vector outlines. That’s what font formats such as PostScript Type 1 and TrueType/OpenType required for a long time. Type designers usually had no other options. It was not possible to define colors, transparencies, or to embed bitmap images. 

Defining font formats in such a limiting way wasn’t a surprise though. It was just a continuation of preceding typesetting techniques. Letterpress letters have a raised surface (the “type face”) that is inked in usually one color and phototypesetting fonts define the character shapes as transparent areas on photo negatives. Until recently, the only way to allow multiple colors across all these techniques was to use multiple fonts, which had to be placed or printed on top of each other. That’s fine for occasional display uses, but doesn’t work well for longer texts or a digital use, where the text flow is not fixed and is done on the device. 

Example of a “layer font”. Four individual fonts (from Rig Shaded) were styled separately and placed on top of each other in Adobe Illustrator 

Alternative solutions were developed in the past, but they simply didn’t catch on. Adobe’s PostScript font format “Type 3” allowed for complex vector and bitmap graphics inside fonts and the Photofont technology was a bitmap font format developed by the makers of the font editor FontLab. 

The revived interest to create color fonts can be traced back to the introduction of emojis on Apple’s operating systems. Apple developed a system to show emojis as a bitmap font, which was a proprietary solution at the time. As a result, other software makers had to come up with alternative ways to show their color emojis. In the end, no less than four different color font format were proposed and eventually included in the OpenType specifications:

• Apple’s bitmap font format (SBIX table)
• Google’s bitmap font format (CBDT/CBLC tables)
• Microsoft’s vector font format (COLR/CPAL tables)
• Adobe’s and Mozilla’s SVG font format (SVG table)

These color font solutions do not come with their own file suffix, but use a file suffix such as .TTF, .OTF, WOFF or WOFF2.  In order to work with color fonts, it’s crucial to know these font formats and to understand their advantages and disadvantages. In the following lessons we take a closer look at them.