Part of the CSS Navigation Reading List

Of late icon fonts such as Sosa, Pictonic, Foundation and Entypo have become the new web design hotness. Quick to load, infinitely scalable and easily adjusted, fonts have obvious advantages to the traditional solution of CSS sprites. To use them, the designer simply embeds the font via CSS on a page, and types out a character to produce a matching icon.

However, there are three fundamental disadvantages to icon fonts, two of which are also shared by image sprites:

  • Most icon fonts are not : typing “L” to produce a Like button means that visitors who use a text-to-speech service to read your site will only hear “L” as a description of the icon. While there are solutions to this issue, they use CSS tricks that are, in this author’s humble opinion, somewhat convoluted and better left behind.
  • Search engines are confronted with the same issue, as they read text, not icons, and “L” makes little sense to Google.
  • Looking up codes for icons and typing in HTML entities to produce them is a pain.

Ligature icon fonts eliminate both of these issues. As I’ve explained previously, ligatures are joined or merged letter forms that are generated to produce smoother type with better spacing: a single glyph to replace the otherwise ungainly “fi” letter pairing, for example.

I’ve shown how to use CSS to turn on ligatures and kerning pairs; ligature fonts simply take this idea one step further. Rather than replacing pairs of letters, ligature fonts look for sequences of characters, which map to icons within the font. For example, if I assign the SymbolSet SS Standard typeface to <a> tags inside a <nav> element, I can produce icons by simply typing in words: 

<nav class="ss-icon">
	<a href="#">User </a>
	<a href="#">Home</a>
	<a href="#">Cart</a>
	<a href="#">Locked</a>
	<a href="#">Love</a>
</nav>

Which would produce these linked icons:

Neat, right? Search engines and those with accessibility needs, or anyone who has CSS turned off, read the natural text, and everyone else sees the icons. The icons can even be colored, shadowed (using text-shadow) and animated.

You’ll see SS Standard (and its partner, SS Social) featured in the next redesign of this blog, launching in January 2013. The same typographers also produce SS Pika and Symbolicons, which implement different icons and styles.

While fonts from SymbolSet remain my personal favorite, the typefaces must be paid for. If you’re on a budget, LigatureSymbols by Kazuyuki Motoyama is a free alternative. Another icon font, Typicons, is currently limited to single-letter associations, but the author is working on making it more semantic.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.