Microsoft addds multi-color fonts; proposes OpenType standard

I’m a big fan of Emojis, especially colored ones. At Microsoft BUILD 2013, the Windows graphics rendering team announced that Microsoft is proposing a practical and efficient addition to the OpenType font standard for multi-color font support which they added as a preview in Windows 8.1.

Existing multi-colored font alternatives use rendering font replacement or embedded bitmaps which are not very accurate or very efficient. The proposal in a nutshell builds on top of the existing glyph to include multiple layers of glyphs and a RGBA color assigned to each layer.

Some Color Emoji

This way, it’s backward compatible with existing operating systems as the fallback is the font’s glyph, or by user choice to disable colors.

An example of colored Emoji.

Windows 8.1 will ship with support for colored fonts enabled by default in XAML and HTML/JS apps. DirectX apps and games will have to opt-in to its rendering in code. A new dedicated emoji font, Segoe UI Emoji, uses the new color glyph layers. You can see them in the on-screen touch keyboard.

An exmaple of colored dingbats.

Microsoft also worked with third-party font foundaries to prototype what colored versions of their fonts might look like. Of course, these fonts probably aren’t going to show up in your office documents, but examples like colored dingbats are really interesting.

Colored Font glyphs as icons.

Besides adding a dash of color to interesting fonts like emojis, there is also a practical side effect of allowing app designers and developers to utilize colored fonts as replacements for colored icon UI bitmaps because the font rendering system is highly efficient and vector scalable for high-DPI displays.

The team hopes to submit the proposal to the ISO standards people for inclusion in the OpenType standard within weeks. I hope we have some interesting uses of color in fonts in the coming years.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s