{"id":270743,"date":"2018-05-15T07:02:37","date_gmt":"2018-05-15T14:02:37","guid":{"rendered":"http:\/\/css-tricks.com\/?p=270743"},"modified":"2018-05-15T07:02:37","modified_gmt":"2018-05-15T14:02:37","slug":"it-all-started-with-emoji-color-typography-on-the-web","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/it-all-started-with-emoji-color-typography-on-the-web\/","title":{"rendered":"It All Started With Emoji: Color Typography on the Web"},"content":{"rendered":"
\n

\u201cTypography on the web is in single color: characters are either black or red, never black and red \u2026Then emoji hit the scene, became part of Unicode, and therefore could be expressed by characters — or \u201cglyphs\u201d in font terminology. The smiley, levitating businessman and the infamous pile of poo became true siblings to letters, numbers and punctuation marks.\u201d<\/p>\n

— Roel Nieskens<\/a><\/p>\n<\/blockquote>\n

Using emojis in code is easy<\/em>. Head over to emojipedia<\/a> and copy and paste one in.<\/p>\n

<\/p>\n

In HTML: <\/p>\n

\"\"<\/figure>\n

Or in CSS:<\/p>\n

\"\"<\/figure>\n

And JavaScript, too:<\/p>\n

\"\"<\/figure>\n

(Alternatively, you can specify emoji with a Unicode codepoint.) <\/p>\n

However, you might run into a problem…<\/p>\n

Lost in translation: Emoji\u2019s consistency problem<\/h3>\n

The diversity of emoji across platforms might not sound like a major problem. However, these sometimes radical<\/em> inconsistencies leave room for drastic miscommunication. Infamously, the \u201cgrinning face with smiling eyes\u201d emoji ends up as a pained grimace on older Apple systems. <\/p>\n

\"A
This was such a big deal that even The Washington Post covered it.<\/figcaption><\/figure>\n

A harmless and playful watergun emoji might show up as a deadly firearm. <\/p>\n

\"A
Courtesy of Emojipedia.<\/a><\/figcaption><\/figure>\n

And who knows how many romances were dashed by Google\u2019s utterly bizarre hairy heart<\/em> emoji?<\/p>\n

\"A
🤮This has since been rectified by Google<\/figcaption><\/figure>\n

Unicode standardizes what each emoji should represent with a terse description but the visual design is down to the various platforms. <\/p>\n

Color fonts to the rescue!<\/h3>\n

The solution? Use an emoji font.<\/em> Adobe has released a font called EmojiOne<\/a><\/em> and Twitter open-sourced Twemoji<\/a>. More are likely to follow.<\/p>\n

@font-face {\r\n  font-family: 'emoji';\r\n  src: url('emojione-svg.woff2')\r\n  format('woff2');\r\n}<\/code><\/pre>\n
If a user types into an HTML input<\/code> or textarea<\/code>, they will see your fancy custom emoji. ❤️ <\/p>\n
\"\"
An input in Firefox.<\/figcaption><\/figure>\n
Emoji fonts also have the benefit of avoiding the pixelation seen in scaled-up raster emoji. If you happen to want really large<\/em> emoji, an SVG-in-Opentype font is clearly the superior choice.<\/p>\n
\"\"
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\u2019t specify a breed!<\/figcaption><\/figure>\n
Browser support<\/h3>\n
Confusingly, color fonts aren\u2019t one standard but rather four<\/em> 🙄.  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\u2019re a bit different. I pieced together this support table using a tool called Chromacheck<\/a>: <\/p>\n\n\n\n\n\n\n
<\/td>\nChrome<\/th>\nSafari<\/th>\nEdge<\/th>\nFirefox<\/th>\n<\/tr>\n
SVG-in-Opentype<\/th>\n❌<\/td>\n❌<\/td>\n✅<\/td>\n✅<\/td>\n<\/tr>\n
COLR\/CPAL<\/th>\n✅<\/td>\n✅<\/td>\n✅<\/td>\n✅<\/td>\n<\/tr>\n
SBIX<\/th>\n✅<\/td>\n✅<\/td>\n✅<\/td>\n❌<\/td>\n<\/tr>\n
CBDT\/CBLC<\/th>\n✅<\/td>\n❌<\/td>\n✅<\/td>\n❌<\/td>\n<\/tr>\n<\/table>\n
We\u2019ve learned why<\/em> color fonts were invented. But it\u2019s not all<\/em> about emoji…<\/p>\n
Multicoloured alphabets<\/h3>\n
\"A
Gilbert font<\/figcaption><\/figure>\n
Color fonts are a new technology, so you won\u2019t find that many typefaces to choose from as of yet. If you want to try one out that\u2019s free and open source, Bungee<\/a> by David Jonathan Ross is a great choice. <\/p>\n
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 \u201ca little surprise tucked away in the glyphs.\u201d Of the 2,666 emoji in the Unicode Standard, Ten Mincho offers a very limited range in a distinctive Japanese style.<\/p>\n
\"\"
The adorable custom emoji set of Ten Mincho<\/figcaption><\/figure>\n
Emoji have become a predominant mode of human communication. Over 60 million emoji are used on Facebook every single day<\/a>. On Messenger, the number is even more astonishing, at five billion<\/em> per day. If you\u2019re building any sort of messaging app, getting emoji right really matters.<\/p>\n","protected":false},"excerpt":{"rendered":"
\u201cTypography on the web is in single color: characters are either black or red, never black and red \u2026Then emoji hit the scene, became part of Unicode, and therefore could be expressed by characters — or \u201cglyphs\u201d in font terminology. The smiley, levitating businessman and the infamous pile of poo became true siblings to letters, […]<\/p>\n","protected":false},"author":245300,"featured_media":271124,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"It All Started With Emoji: Color Typography on the Web","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[1421,587,1107],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/05\/emoji-trio.jpg?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":248261,"url":"https:\/\/css-tricks.com\/experimenting-color-fonts\/","url_meta":{"origin":270743,"position":0},"title":"Experimenting with Color Fonts","date":"November 29, 2016","format":false,"excerpt":"Over the past couple of weeks there\u2019s been a lot of excitement over color fonts. Adobe describes the technology like this: OpenType-SVG is a font format in which an OpenType font has all or just some of its glyphs represented as SVG (scalable vector graphics) artwork. This allows the display\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":365677,"url":"https:\/\/css-tricks.com\/colrv1-and-css-font-palette-web-typography\/","url_meta":{"origin":270743,"position":1},"title":"COLRv1 and CSS font-palette: Web Typography Gets Colorful","date":"May 11, 2022","format":false,"excerpt":"According to Toshi Omagari, the author of Arcade Game Typography, the world\u2019s first multi-colored digital font was created in 1982 for a never-released video game called Insector. Multi-colored fonts, sometimes called chromatic type, are still relatively rare on the web, even though the COLR font format has had full cross-browser\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/05\/s_07727771E2AE24CAE12B4C96FD6B6B6976797741459E0498D84303A46B2B3814_1644779893852_applehello.png?fit=1200%2C720&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":338855,"url":"https:\/\/css-tricks.com\/text-that-sometimes-turns-to-emojis\/","url_meta":{"origin":270743,"position":2},"title":"Text That Sometimes Turns to Emojis","date":"April 22, 2021","format":false,"excerpt":"There are some Unicode characters that some browsers just decide they are going to turn into emojis for you. I couldn't tell you why exactly, but here's what I see: Chrome on the left. Safari in the simulator on top and to the right. Those text Unicode characters (\u25b6, \u21a9,\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/05\/emoji-trio.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":296196,"url":"https:\/\/css-tricks.com\/weekly-platform-news-emoji-string-length-issues-with-rounded-buttons-bundled-exchanges\/","url_meta":{"origin":270743,"position":3},"title":"Weekly Platform News: Emoji String Length, Issues with Rounded Buttons, Bundled Exchanges","date":"September 19, 2019","format":false,"excerpt":"In this week's roundup, the string length of two emojis is not always equal, something to consider before making that rounded button, and we may have a new way to share web apps between devices, even when they are offline. The JavaScript string length of emoji characters A single rendered\u2026","rel":"","context":"In "Weekly Platform News"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/09\/wpn-20190919.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":255456,"url":"https:\/\/css-tricks.com\/equilateral-triangle-perfect-paragraph\/","url_meta":{"origin":270743,"position":4},"title":"The Equilateral Triangle of a Perfect Paragraph","date":"June 9, 2017","format":false,"excerpt":"Still, too many web designers neglect the importance of typography on the web. So far, I've only met a few that really understand typography and know how to apply that knowledge to their work. And the lack of knowledge about typography doesn't come from ignorance. I learned that web designers\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":321233,"url":"https:\/\/css-tricks.com\/changing-emoji-skin-tones-programmatically\/","url_meta":{"origin":270743,"position":5},"title":"Changing Emoji Skin Tones Programmatically","date":"September 17, 2020","format":false,"excerpt":"So, you know how many emoji have different skin tones? Emoji skin tones are extremely popular, especially over text and on social media. The raised black fist emoji (\u270a\ud83c\udfff) was voted \u201cThe Most 2020 Emoji\u201d by Emojipedia\u2019s World Emoji Awards. Each tone is a modifier and many emoji are made\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/09\/emoji-skin-tone-modifiers.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/270743"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/245300"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=270743"}],"version-history":[{"count":23,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/270743\/revisions"}],"predecessor-version":[{"id":271125,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/270743\/revisions\/271125"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/271124"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=270743"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=270743"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=270743"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}