Lexica: A Semantic Icon Font

Retina Has Changed the Web

Designing for the web folded in a new level of complexity with the advent of the retina (or HDPI) screen. Now raster images at all sizes look sloppy on the devices we are using the most. One of the great solutions to some of these problems are web icon fonts.

We used to save all icons as .png’s and that was fine, but now we need a better solution. The first solution in the web icon font world was to willy-nilly apply our icons to a glyph from a regular font – i.e. f gets replaced with facebook’s f or t gets replaced with twitter’s bird. That is a fine solution until you start to think about the fact that you’ve excluded the screen reader.

The next step is to think further into the pantheon of font tools and go to unicode. I mean, we have emoji being used all the time – especially since iOS 6 includes them by default. Even my mother uses emoji’s in text messages. These emoji’s live in a special spot in the UNICODE table (1F300+) that is not particularly friendly to work with on the web.

The Solution

I say we strip off the leading 1 on the emoji UNICODE (1F300+)¬†and use the Private Use Area (E000 – F8FF) to mimic the emoji space. This solution works going forward and is as backward compatible as possible. Beyond that I propose that we include ligatures to push for a semantic solution, i.e. instead of typing F300 to get the twitter bird you simple type “twitter” and an Opentype ligature replaces “twitter” with F300 (or the twitter bird). Check the footer of this site. I’m using a truncated version of my semantic web font to generate those icons as well as my logo.

I plan to release the semantic icon font to the world in the next few weeks. Keep those eyes peeled!