ss-emoji-icons

After my dive on multicolor fonts I set out to make an emoji set. Nothing verbose, just call it an experiment or proof-of-concept. I decide that covering the smileys (and the poop) seen in Apple Color Emoji would be coverage enough.

My tools are Illustrator (drawing), RoboFont (font development), and TransType (assembly and output).

TransType lets you create multicolor fonts by overlaying font files. An “A” from one font overlays an “A” from another font, so on and so on. This approach is a little curious to me. It makes sense for layered type systems but it doesn’t seem like a direct response to any of the standards proposed. While it’s most similar to Microsoft’s proposal — layering vectors — the parts come from different fonts instead of from within the same. But, whatever, I can make this work.

I begin by drawing in Illustrator. Illustrator allows me to snap my artwork to a grid easily and, as is super important when designing multicolor fonts, use color as I design. I take a flat approach to the design. RoboFont’s vector environment and TransType’s layered assembly have constrained me in that way.

ss-emoji-layers

Once I have my artwork ready I create a font for each color, just like separations for print. I publish the fonts, making sure that each glyph corresponds with the right parts across all fonts. I can’t see my mistakes until I layer them in TransType so this takes a few attempts to get right.

In TransType I select each of the fonts I’ll be using in the final assembly. I order the layers and select a color for each (RGBA is supported).

Screen Shot 2014-04-14 at 2.19.04 PM

Because the design is flat, TransType can export fonts in the Apple, Microsoft, and Adobe / Mozilla standards. If I were working with bitmap images the Microsoft format would have to be omitted.

I’ve made the final exported fonts available on GitHub. Support is quite different for each format. Read about support for multicolor fonts, download the fonts, and test in browser. Try the -adobe-mozilla version in Firefox, or install the -apple version and use it locally.

SS Emoji Beta uses the Symbolset keyword replacement technique. Check the documentation included in the download for a list of keywords and Unicode values.

Links

  1. Download SS Emoji
  2. Test in Browser
  3. Multicolor Font Support