Building Bixa Color, a color font for the web
Typography on the web is in single color: characters are either black or red, never black and red. In the past, several font formats flirted with color options, but none of those techniques got much traction. Then emoji hit the scene, became part of Unicode, and therefore could be expressed by characters — or “glyphs” in font terminology. The smiley, levitating businessman and the infamous pile of poo became true siblings to letters, numbers and punctuation marks.
While Emoji could now be expressed through fonts instead of images, fonts still only came in single color. To solve this, a few formats were proposed that would allow OpenType, the font format used on computers and the web, to contain color glyphs. Long story short, as of today, one format is implemented by Firefox across all platforms, one in IE11/Edge on Windows 8.1 and higher, and another one in the latest Safari browsers. (The fourth, a format used on Android, works only for system fonts — not for webfonts.)
Choosing a color font format
This leaves a typeface designer with three choices, of which SVG-in-OpenType is the most interesting and future-proof. SVG is not only perfectly suited to express letter forms, it can do everything the other formats can do.
You might think of the old SVG font format that used to be a part of the bullet-proof @font-face syntax, but SVG-in-OpenType is different. An “SVG font” is essentially a hacky, super simple format that’s just barely capable of getting letters on the screen. OpenType, on the other hand, is a battle-hardened, super advanced format capable of all kinds of typographic magic.
Combining the versatility of the well-established SVG image format with the typographic power of OpenType makes it the clear winner in the world of color fonts. So when Mark van Wageningen of Novo Typo asked me to help engineer their first color font, giving me a chance to build such a font myself and see just how web-worthy these things are, this was the format we picked.
Requirements
I wanted to get rid of as many technical hurdles as possible, so that the question would boil down to “do I want to use this font?” instead of “can I even use this font?”
As a front-end developer, that means I want a super optimized font. It’d have to be as small as possible and not contain a single superfluous byte — we don’t want to download a couple of megabytes just to get colored type.
At the moment browser support is thin, so we also need a solid safety net for when color glyphs aren’t supported. The content must remain accessible and readable whatever happens.
Furthermore, the color characters should look great, scale without losing quality, and listen to all typographic instructions we give it through CSS.
Building the font
So, Novo Typo had the design, we decided on the format, and we drew up specs. Time to actually build that font!
Novo Typo passed two fonts to me: Bixa Medium, a single color weight from the Bixa family as a regular OTF file, and a color version made with Fontlab’s TransType. The color version clocked in at a hefty 355kB, and the fallback glyphs were some sort of ugly black-and-white interpretations of the color version that TransType generated automatically.
It was my job to combine the normal glyphs of Bixa Medium with the color glyphs from the SVG-in-OpenType font. I ended up using trusty old TTX/FontTools to dump both fonts to an XML file so I could isolate the SVG glyphs. Some quick and dirty Python scripting linked the IDs of the SVG glyphs to the ones in the Bixa Medium font, as they got reshuffled in the TransType conversion.
This resulted in a working WOFF font of roughly 80kB. Not bad, but we should be able to shave off some more. Bixa is an all-caps font, but the glyphs for A to Z were duplicated for a to z (likewise for versions of these letters for different languages). Luckily you can easily map duplicates so they all point to a single glyph, which some more quick and dirty scripting did for both the CFF table (the normal glyphs) and the SVG table.
The End result? A very respectable 50kB WOFF. There’s no shame in bringing that to your web project, I do think! There is some more weight loss to be squeezed from the font, as the OpenType SVG table allows for sharing parts of SVG documents to further reduce duplication, but for now we wanted to get this baby on the road.
The good
So, there we have it: a fully working, optimized WOFF file. How did we do? Let’s take stock:
Filesize isn’t that large. Performance wise, the impact on file size doesn’t seem to be a big deal. A typeface like Bixa Color is one for flamboyant headlines or design-heavy sites. You’ll most likely won’t use color fonts on minimalist high-performance site, so those 30kB extra might be a reasonable price to pay on a fancy, graphics-heavy design site. However, according to Novo Typo, it seems just a matter of time when color will be a powerful typographic ingredient for any website on an editorial level.
Great fallback. The fallback is pretty much solid as a rock, and works out-of-the box. No color font support? You’ll get your trusty ol’ regular glyphs instead. The only damage done is that the user downloaded a larger font file than could have been possible for just normal glyphs.
Accessibility is better than images of text. This also means accessibility is great: it’s all normal text. You can select and copy it, and search engines or screen readers will pick it up like any other text — unlike images of text that would be today’s alternative to get color type on your screen.
Full typographic control. And if you’re worried about more typography-related features, that’s pretty solid too. All OpenType features such as kerning or ligatures work with color glyphs as well.
Future of web makes it even better. Future improvements to the web makes it even better: WOFF2 will squeeze these files to an even smaller size, and HTTP/2 will make font delivery much more efficient.
The bad
So it’s all good news and there’s absolutely nothing that sucks about them? Well, no:
The files are bigger. Whichever way you look at it, color glyphs add kilobytes. Even though this weight gain might be the equivalent of just a quarter of the average hero image, it might still be too much for your project.
Support is still in its infancy. We’re mucking about on the bleeding edge of web tech here, so support is limited. I’m optimistic about it, though. Microsoft recently added SVG-in-OpenType to their own spec, which looks like a huge endorsement.
Colors can’t yet be changed on the fly. At the moment, colors can’t be changed with CSS — they are embedded in the font. You can easily roll your own version with the colors your prefer and that might be acceptable if you just need one version in your brand’s colors. But if you need many different color combinations, you’ll have to wait for support to pass colors to the font through CSS variables. For Bixa Color, we circumvented this by generating a WOFF on the fly with the colors you pick on the download site.
Chromacheck
Maybe the difference between the normal font and the color font is too big, and you want to decide up front which one you’ll serve. Or you want to serve a different color font format for modern Internet Explorer (COLR/CPAL) or Safari (SBIX).
I’ve written a small, compact feature test called ChromaCheck that checks for support for one of the four color formats. It’ll add a class like chromacheck-svg if SVG-in-OpenType is supported, allowing you to decide if you send over the color font or a plain one.
The future
Another great idea that emerged from the color font proposals is something called the CPAL table, or color palette table. This would enable you to embed various palettes in your font that you can activate with CSS.
Also, you will be able to pass color values to the font by using CSS variables, which would give you total freedom to change all colors on the fly.
CSS filters can simulate overprint, like we know from printing, which would add a nice old-school wood type effect to fonts like Bixa Color.
Color fonts for production stuff: the verdict
Should you be locked up in the loony bin for even considering color fonts, or can you actually use one on your site today? Well, the technology is solid — it’s just not that widely supported. Yet. But if you’re interested in chromatic type and you don’t mind being on the bleeding edge, you can pick up a font like Bixa Color and start using color fonts today!
Looking for a pair of extra hands on your font project? Mail me!