The Typodermic Color Font Experiment

My name is Ray Larabie and you’re now a part of The Typodermic Color Font Experiment, an assortment of experimental fonts in various formats. These are color conversions of fonts that are already available as separate layers at Typodermic Fonts. I recommend wearing a lab coat during use.

Color Fonts?

In the 1980’s some home computers were capable of displaying color fonts. Rather than simply applying color and effects to black & white fonts, these fonts contained color and textures like wood, fire and chrome. In the 1990’s vector based fonts replaced bitmap fonts and color font technology got left behind. The reason for this is that the people who come up with new font formats are no fun at all. Booooo! In the meantime, type designers were creating layered fonts which designers could stack in order to produce multicolor effects. But the shapes were solid. You couldn’t have proper gradients, textures or blur effects. In the 1990’s and 2000’s, some proprietary formats were introduced such as Fontlab’s Photofont format. But those formats required custom applications or plugins to use them. Some type designers created color vector and bitmap alphabets which could be manually assembled into words. Around 2010, Japanese emoji became a worldwide phenomenon and suddenly there was a need for color font technology. Several color font formats have since been introduced. Application support and features keep changing all the time. If you find any errors, please contact me so I can update this article.

Apple sbix

Apple’s sbix was introduced in Mac OS X Lion and iOS 4. It’s an extension to the OpenType format that allows the addition of JPG, PNG or TIFF bitmap graphics. Since these are bitmap graphics, they lose detail when displayed at large sizes. Higher resolution fonts mean larger font sizes. The advantage of sbix is that there’s no limit to what can be displayed. Even real photographs can be used. Sbix fonts work in some native OSX apps as well as the Windows Edge browser.

Microsoft COLR/CPAL

Microsoft’s COLR is an extension to the Opentype format that allows color layers. It was introduced in Windows 8.1’s Segoe UI Emoji font. Each layer has its own color and transparency palette. Layers are limited to flat vector shapes. It can’t display gradients, embedded bitmaps, strokes or textures. COLR can do what was already possible using multiple layered fonts but served in a single multi-layered file. Since each layer has its own palette, it may be possible for applications to allow users to alter the color of each layer. COLR fonts work in very few Windows applications. They can be displayed in the Windows Edge browser, Firefox and Windows Chrome.

SVG-in-OpenType

The Scalable Vector Graphic format has been used on the web since 2001. It can display gradients, patterns, strokes, clipping, masking, filter effects and more. Now the SVG format can be embedded in OpenType fonts. Since bitmaps can be embedded, it’s possible to make fonts that look identical to the sbix format. SVG fonts are currently supported in Firefox and the Windows Edge browser.

Google CBDT/CBLC

At the time of this writing, Google is still working out the details of their color font format. Regardless, Microsoft Edge is already capable of displaying it.

Using the fonts

A commercial use license is included with these fonts. Commercial web and commercial application licences are not available. If you’d like to use them for commercial use on the web, visit Typodermic Fonts. Purchase a web license for each separate layer and overlay using CSS z-index. If the layers you need aren’t available, please contact me.

You’re free to try these fonts on the web but remember: they’re experimental. They haven’t been optimized for the web so the files sizes are high and have limited browser support. If you can figure out how to convert to WOFF or WOFF2 web fonts, give it a try. Try ChromaCheck to see which color font formats your browser supports.

The fonts included in Typodermic Color Font Experiment are in 3 formats: SBIX, COLR and SVG. Each format contains fallback glyphs. If an application doesn’t support color, it’s supposed to display and black & white font. The current tools I’m using don’t give me much control over the fallback glyphs so they sometimes look rough or invisible.

On a Mac, try installing the SBIX format and you might be able to use them in some native OS X applications. In Windows, there’s probably no point installing any of these formats. They currently only work in a browser or in the native mail application.

Fontlab Pad is free application for Mac & Windows. You can drag & drop a font into it and type in glorious color. Copy and paste the color text into other applications or export as PNG or PDF. You can even make the background transparent so you can compose text over an image. I don’t recommend using the SBIX format as it loses detail at larger sizes. COLR and SVG fonts should produce identical results. Some fonts, especially the ones with glow effects have difficulty displaying accented letters. Right now, the tools for creating these fonts is limited so I can’t fix that yet.

If you’d like your favourite application to support color fonts, tell them about the Typodermic Color Font Experiment. If you’re an application developer, feel free to use these fonts for testing color font support.

If you have questions about using these fonts for commercial use, please read my Frequently Asked Questions.

Scroll down to view the font samples. Happy experimenting!

Ray Larabie
Typodermic Fonts Inc.
2016-10-04