“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:

Screen-Shot-2018-05-08-at-2.23.20-PM It All Started With Emoji: Color Typography on the Web design tips

Or in CSS:

Screen-Shot-2018-05-08-at-2.23.29-PM It All Started With Emoji: Color Typography on the Web design tips

And JavaScript, too:

Screen-Shot-2018-05-08-at-2.23.39-PM It All Started With Emoji: Color Typography on the Web design tips

(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.

emoji-1 It All Started With Emoji: Color Typography on the Web design tips
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.

emoji-2 It All Started With Emoji: Color Typography on the Web design tips
Courtesy of Emojipedia.

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

emoji-3 It All Started With Emoji: Color Typography on the Web design tips
🤮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. ❤️

emoji-4 It All Started With Emoji: Color Typography on the Web design tips
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.

emoji-5 It All Started With Emoji: Color Typography on the Web design tips
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

emoji-6 It All Started With Emoji: Color Typography on the Web design tips
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.

emoji-7 It All Started With Emoji: Color Typography on the Web design tips
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.