Multicolor fonts are those that have full chromatic capabilities built in. Rather than using CSS, OpenType, or a layering of fonts to achieve the effect they embed color bitmaps or vector shapes.

Apple Color Emoji is a multicolor font that has seen mainstream use, however support for any of the standards is far from universal. There have been four standards proposed by five tech giants — Google, Apple, Microsoft, and Adobe / Mozilla — each with a unique approach. A fifth standard from the Motion Picture Experts Group hopes to consolidate them.

So how do these standards work? Below is an overview of and current support for each.

Google

Google’s open standard uses a single bitmap (PNG) image per glyph. The obvious challenges with bitmaps are scaling and filesize. Without larger images, text set at large point sizes and in high resolution environments may suffer. Bitmaps can also result in large filesizes — Google’s sample fonts range in size from 237 KB to 1.6 MB.

Support: FreeType 2.5+

Apple

Like Google, Apple also uses bitmap (PNG) images. However Apple’s approach is proprietary and uses a set of images per glyph for more seamless scaling. Because Apple’s standard also uses bitmaps, and more of them, these files have the potential to be huge. Apple shipped this standard in Apple Color Emoji — possibly the most ubiquitous multicolor font to date.

Apple Color Emoji (a system font on OS X and iOS) has 889 glyphs and is a massive 35.9 MB. That’s a cost of 41.35 KB per glyph. The font also lacks fallback glyphs for environments that don’t support the format.

Support: Mac OS X 10.7+ (try TextEdit, Pages, Keynote, Safari), iOS, FreeType

Microsoft

Microsoft’s standard uses layers of flat vectors to create multicolor glyphs. Each of those vector pieces live within the font. In addition to the multicolor assembly, a traditional outline glyph is designated as a fallback for environments where color isn’t supported. Microsoft shipped this standard in Segoe UI Emoji.

It’s a simple and effective approach, though limited in its simplicity. Because vectors are used the glyphs scale seamlessly. However only solid fills can be used — read: no gradients — so a designer is limited to a “flat” aesthetic.

Support: IE 11 etc. on Windows 8.1+

Adobe/Mozilla

Adobe and Mozilla have teamed up on an “SVG in OpenType” standard. SVG-in-OT leverages SVG’s graphics model to allow for color, gradients, opacity, bitmaps, and animation (Those demos can be viewed in Firefox 26+). Adobe and Mozilla’s standard is the most feature-rich yet still lightweight.

Gecko Emoji (from the color demo above) has 754 glyphs and is 353 KB. That’s just 0.47 KB per glyph (compared to Apple’s 41.35 KB per glyph). The font also includes fallback glyphs for environments that don’t support the format.

Support: Firefox 26+

Open Font Format

The Motion Pictures Experts Group (MPEG) are the standards group that developed MP3 and H.264 encoding. MPEG has begun an effort to standardize multicolor fonts and in this standard they expect to merge technology from Google, Microsoft, and Adobe / Mozilla. The current timeline expects to see approval and publication of the standard early next year.

Final thoughts

At Symbolset we’re excited about multicolor fonts. They open a range of possibilities for designers without compromising the accessibility and semantic benefits that fonts have.

Each of these standards has advantages and disadvantages. To be viable the standard will need to implement fallbacks and address scaling while minimizing filesize. One concern not discussed in the standards above is control of the palette. Will the end user have the ability to change colors used in the font? The vector-based standards have discussed a paint-by-numbers approach but there are no demoes available. We’re hopeful that a clear standard and steady support are around the corner.

Excited about multicolor fonts? We made something. Read about it here and download the fonts on GitHub.

Updates

Apple has published its color font spec here.

References

  1. Color Font Format Proposals by Adam Twardoch for Fontlab
  2. Color Emoji in Windows 8.1—The Future of Color Fonts? by Ralf Herrmann
  3. SVG in OpenType: Genesis by Sairus Patel for Adobe
  4. Open Font Format
  5. Get ready for multicolor fonts – maybe in motion, too by Stephen Shankland for CNET