It All Started With Emoji: Color Typography on the Web

Posted by | No Tags | CSS

“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 row of ten yellow smiling emoji showing the difference in how different browsers and applications render the same character. Some are simple smiles and other are large grins that show off teeth.
This was such a big deal that even The Washington Post covered it.

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

A text message with two chat bubbles. The top bubble shows a watergun next to the text and the bottom bubble shows a handgun.
Courtesy of Emojipedia.

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

A row of four hearts in dots, beveled yellow, flat yellow and pink with hair strands, respectively.
🤮This has since been rectified by Google

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. ❤️

An input in Firefox.

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.

On the left, a standard Apple dogface emoji looking pixelated. On the right, smooth SVG-in-Opentype emoji characters from Emojione and Twemoji, respectively. Unicode (right) clearly doesn’t specify a breed!

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:

Chrome Safari Edge Firefox
SVG-in-Opentype
COLR/CPAL
SBIX
CBDT/CBLC

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

Multicoloured alphabets

A screenshot of the Gilbert font using bright duotone colors on each character.
Gilbert font

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.

The adorable custom emoji set of Ten Mincho

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.

The post It All Started With Emoji: Color Typography on the Web appeared first on CSS-Tricks.

Source: CSS Tricks