Emoji: Looking Good!

Making Faces (and Other Emoji) Part 2

Hey all! I’m Colin (@colinmford, here and on twitter), a typeface designer at Hoefler & Co. I write short posts about the history, design, and technical details of emoji from a type designer’s perspective. You can find the other posts here. I also run workshops occasionally that help you design and build your own emoji from scratch.

By now you know the story. In the beginning Shigetaka Kurita created 178 emoji, and behold, it was good. In the years that followed, the emoji were fruitful and multiplied, and it was also good. They were wildly popular, and Japanese mobile phone users demanded more. The DoCoMo emoji begat the even more colorful and eccentric KDDI and SoftBank emoji, which begat the other diverse emoji sets we know today.

The KDDI and SoftBank emoji introduced a lot of new concepts to the emoji visual vocabulary, and were probably even more important to emoji’s success than DoCoMo. While the DoCoMo emoji are all one color (like all fonts; we learned last time that the DoCoMo emoji are bitmap fonts), the KDDI and SoftBank emoji were images. They included multiple colors and even animation. The DoCoMo faces are conspicuously missing a head to go with their face—no signature “yellow circle” which we are all used to. SoftBank fills in the background of their faces with a light skin-like color, making them square. KDDI’s are wide ovals, also skin colored. Both companies also added a lot of symbols that we love today. If you want to thank someone for the happy poo emoji 💩 or the red dancing lady 💃, thank SoftBank, not DoCoMo.

“GRINNING FACE WITH SMILING EYES” when viewed on DoCoMo, KDDI/AU, and SoftBank, respectively. Unicode.org

When Google and Apple came to Japan and wanted to make their own emoji, they drew upon all three sets as inspiration, but most heavily SoftBank’s set. Google Gmail’s emoji set in 2008 was comprised mostly of animated squares, like SoftBank’s squares, doing funny things. They were colored yellow for happy emotions, green for upset or sick, blue for sad, red for angry or lusty. The set also included a few faces in circles: some skin-colored like KDDI’s ovals, and some yellow circles with a speech bubble-like tail. Faces in yellow circles — often called “Smileys” — are quite common in the USA and other countries in the West. At the time they were also established in other internet venues like message boards and instant messengers. The designers of the Gmail emoji were probably trying to support some of the icons their users were used to. Also probably influenced by internet smileys, Apple introduced their emoji with all the faces attached to yellow skeuomorphic discs. Shortly after each of these releases, an initial set of emoji were agreed upon by the Unicode Consortium, which standardized the way emoji could be sent from device to device.

Cute little Gmail emoji. A tab for circular “Smileys” at middle left. This image sadly doesn’t show their exhuberant animation. Google Japan

This opened emoji up to anyone willing to design a set, and a lot of vendors followed Apple’s aesthetic. It’s not surprising—the iPhone proved to be extremely popular all over the world. Hardware manufacturers like LG and Samsung copied a lot of the phone’s features in order to sell consumers what they wanted. In addition to almost all sets having yellow circle faces, which, ok, could have come from a few places, a lot of obviously Apple design decisions became the standard. For instance, while SoftBank employed a lady with a bob and a pink shirt for the “FACE WITH NO GOOD GESTURE” 🙅 and “FACE WITH OK GESTURE” 🙆, Apple made her do everything from being an “INFORMATION DESK PERSON” 💁 to get a “HAIRCUT” 💇. After Apple gave her a raise, ladies with similarly solid-colored shirts started showing up in sets from nearly every vendor. Google Android, which even initially avoided people in favor of genderless blobs, is switching to the lady in their next update.

Interestingly, while Apple’s, Samsung’s and LG’s, user interfaces have become “Flatter”, they still continue to employ the glossy, skeuomorphic, pre-iOS7-esque style when designing new emoji. Twitter and the open source project EmojiOne have “flat” emoji, but still largely follow the same Apple visual pattern. Android—which as I mentioned moments ago, used to opt for a more unique approach—just recently announced that they will be redesigning many of their emoji in a way that makes them seem more like Apple’s.

Why is this? It could be that in 2010, Apple brought emoji out of Japan before anyone else (Android’s first emoji were included in Android 4.3, 2012). Also, 2010 to 2014, which was “peak emoji” and when it surpassed “emoticon”, according to Google Trends, roughly correlates with the time at which the iPhone enjoyed a large or majority marketshare. With the largest population of emoji users outside of Japan being iOS users until recently, and the Apple emoji being those peoples’ first introduction to emoji, it’s no wonder Apple’s style became the de facto style. There’s no greater proof for me of Apple’s style domination than seeing knockoff Apple emoji in ads, like this current one from Chevrolet. Apple’s style is unofficial shorthand for “emoji”.

Apple’s style but not their emoji in the most current Chevrolet ad campaign. Photo composition by me, from this youtube video

It doesn’t have to be this way. As a type designer I sort of see this as if everyone in the world decided in 2010 that Helvetica is going to be the only acceptable rendering of the alphabet. The Apple emoji style is one choice, not the only choice. Designers and users deserve emoji diversity, just as they deserve diversity in typeface design. They deserve to know there is more than one way to depict a taco 🌮 or a haircut 💇.

You’ll notice that the Unicode name for the haircut emoji is just “HAIRCUT”. It doesn’t even mention a person being involved. It certainly doesn’t mention that it’s a woman with long, straight hair getting her hair cut, or that the hair is being cut by magical floating scissors to the right of her. With the exception of skin tone in certain emoji, the Unicode Standard doesn’t specify the appearance of any character. All they prescribe is the name and the codepoint. A “character” in the Unicode Standard “refers to the abstract meaning and/or shape, rather than a specific shape”. In other words, all that is required is that the character that goes in the “HAIRCUT” spot reads as “a haircut”. Visually and conceptually there are no bounds. Instead of a woman getting a haircut, you could just show scissors cutting hair, a barber taking a little off the top with electric clippers, or a man draped in a smock making awkward conversation for an hour. It’s up to you!

A flock of Flamencos: the SoftBank original (left) and current versions from Apple, LG, Twitter and EmojiOne.

The potential issue, and the reason why many vendors just opt to copy one another, is that often emoji are not used just for their official Unicode-sanctioned semantic meaning. For instance, if you are on an Apple device, you might not be sending the dancing lady in the red dress 💃 because you are talking about dancing. You might be sending it because you’re talking about a fancy woman, or red things in general, or you might be referencing her “let’s have a party!” demeanor. If the person on the receiving end of that message is on a platform that, for instance, currently has a dancing blob instead of a lady (Android), or a kid with a ‘fro breakdancing (Samsung), or a gray “men’s room”-like stick figure (Microsoft), there could be some confusion. The reason this happens typically comes down to the user interface. On a mobile phone emoji are often not selected because of their name but because of their looks. This makes emoji different than the rest of Unicode, and certainly way different than anything else a type designer is used to. You never send someone the letter “k” because the way the two stokes come together in your particular system font reflect how you are “so over it today”.

Dancing to the beat of their own: current Google, Samsung and Microsoft DANCERs

Part of the issue here might be that emoji are so new. It might be that emoji need to coalesce around a central depiction of each character over time. The main issue during the DoCoMo/KDDI/SoftBank days is that when one person sent someone an emoji, they didn’t know what the other person would see. But that doesn’t mean there still isn’t room for variation. In the type design world, type designers are masters at making a small variation into the defining feature of a typeface. Small variations in design are the spice of life! Then again, the answer might be more diversity, not less. The problem is that there is one very popular set (Apple’s) so emoji users have become accustomed to a certain look. Because emoji are so young, we should be taking this moment in time to experiment further with the forms. One of my teachers at the Type and Media type design masters program once said to me, “If you look at a typeface and you don’t see anything you would do differently, you might as well go home.” The same, I think, applies for emoji.

So, explorer, how do you even begin to design for emoji?

The first piece of advice I would proffer is to know your environment. If you’re going to riff of of what is out there right now you might as well get a full picture. There are so few emoji sets out there right now (compared to fonts) that there are a handful of websites devoted to cataloging all of them. The best out there is a site called Emojipedia. Searching for “Dancer”, for instance, will show you that glyph in pretty much every major platform. They will even now show you past versions so you can see how vendors have adjusted their look over time. Past that, look to the beginnings of emoji as we have here. DoCoMo, KDDI and SoftBank, yes, but also the roots and branches of emoji — smileys, emoticons, kaomoji, manpu, dingbats, ideograms, etc. Look outside of emoji entirely to your favorite illustrators and artists. Pay attention to how they get to the essence of expressions, form, concepts, and objects. One of my drawing teacher’s favorite examples of this is Picasso’s Bull.

Second, I think it’s important to mention that emoji were always intended to be used with text. Emoji and text need each other to inform the message. Emoji are used in tight situations — chats or text messages, emails — where it is hard to give your communication partner context. The tone of your voice, the posture of your body, or what is happening around you, your partner sees or hears none of it. Rather than standing in for more text, emoji stand in for context.

As a consequence, emoji are typically used at text size (like here 😊). You should approach designing emoji as if you were preparing them to appear on stage: big gestures and exaggerated expressions. Have you ever seen a stage actress up close after they’ve applied their stage makeup? While it looks crazy up close, all the caked on eyeliner, powder, blush, and lipstick is intended so the back of the theater can see their facial features. It’s the same for emoji. Sometimes you need to exaggerate proportions to the point were they look absurd when you see them large, just so they will look normal when set with text.

She looks normal at-size, but zoom in… Her head is as wide as her shoulders and her hand is as big as her eye. 😖

The last piece of advice is to trust your gut. All you technically have to adhere to in order to be Unicode compliant is the name, so depict your emoji how you think they should be depicted. “HAIRCUT” or “DANCER” can look however you want. Look at other sets, study your history, but if something is working for your set that seems sort of out of the ordinary, go for it. It’s what makes emoji fun. And people are flexible, in the end. They’ll get used to it.

Next time, for the final part, I’ll get into building the emoji font files. There are a few different formats and it can get quite complicated, but there’s quite a lot of potential for having some fun. Thanks for reading!

I also had a quick interview with Thomas of @TypeThursday. Check it out for bonus emoji talk!

Footnotes 🔍

† Type and symbols are a natural friends and have been since the beginning. I always love to look in the back of type design specimen books and I’m amazed how fully half of those books are filled things that are not type. Making type before the age of mechanical composition was just as much about making symbols, borders, and electrotyped illustrations. The real top-dollar ones could be composed of multiple colors, which would require separate pieces of type for each color, and therefore multiple runs through the press. They fell out of fashion in the age of Linotype and Monotype because the complex symbols weren’t easily set by machine, and hand composition by skilled typesetters was more expensive. 
↪︎ Back to the article

‡ This reminds me of Bauhaus teacher László Moholy-Nagy’s idea of typophoto: typography and photography combining to express “the visually most exact rendering of communication”. The idea being that photo and typography together give the reader more of an idea of what is being communicated than the two parts would separately. So, if I am allowed to “update” such a tenet of graphic design with a subject as glib as emoji:

What is typomoji?
Typography is communication composed in type.
Emoji is the visual presentation of what can be optically apprehended.
Typomoji is the visually most exact rendering of communication

↪︎ Back to the article