It All Started With Emoji: Color Typography on the Web

“Typography on the web is in single color: characters are either black or red, never black and red …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.”

— Roel Nieskens

Using emojis in code is easy. Head over to emojipedia and copy and paste one in.

In HTML:

Or in CSS:

And JavaScript, too:

(Alternatively, you can specify emoji with a Unicode codepoint.)

However, you might run into a problem…

Lost in translation: Emoji’s consistency problem

The diversity of emoji across platforms might not sound like a major problem. However, these sometimes radical inconsistencies leave room for drastic miscommunication. Infamously, the “grinning face with smiling eyes” emoji ends up as a pained grimace on older Apple systems.

A harmless and playful watergun emoji might show up as a deadly firearm.

And who knows how many romances were dashed by Google’s utterly bizarre hairy heart emoji?

Unicode standardizes what each emoji should represent with a terse description but the visual design is down to the various platforms.

Color fonts to the rescue!

The solution? Use an emoji font. Adobe has released a font called EmojiOne and Twitter open-sourced Twemoji. More are likely to follow.

@font-face {
  font-family: 'emoji';
  src: url('emojione-svg.woff2')
  format('woff2');
}

If a user types into an HTML input or textarea, they will see your fancy custom emoji. ❤️

Emoji fonts also have the benefit of avoiding the pixelation seen in scaled-up raster emoji. If you happen to want really large emoji, an SVG-in-Opentype font is clearly the superior choice.

Browser support

Confusingly, color fonts aren’t one standard but rather four 🙄. OpenType is the font format used on the web. When emoji were added to unicode, the big players realized that multi-color support needed to be added to OpenType in some way. Different companies came up with a diversity of solutions. The fonts are still .ttf, .woff or .woff2 — but internally they’re a bit different. I pieced together this support table using a tool called Chromacheck:

We’ve learned why color fonts were invented. But it’s not all about emoji…

Multicoloured alphabets

Color fonts are a new technology, so you won’t find that many typefaces to choose from as of yet. If you want to try one out that’s free and open source, Bungee by David Jonathan Ross is a great choice.

While some fonts provide full emoji support and others offer a multicolor alphabet, Ten Mincho — a commercial font from Adobe — takes a different tack. In the words of its marketing material, the font holds “a little surprise tucked away in the glyphs.” Of the 2,666 emoji in the Unicode Standard, Ten Mincho offers a very limited range in a distinctive Japanese style.

Emoji have become a predominant mode of human communication. Over 60 million emoji are used on Facebook every single day. On Messenger, the number is even more astonishing, at five billion per day. If you’re building any sort of messaging app, getting emoji right really matters.