demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

CSSslidy: an auto-generated #RWD image slider. 1.5K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

Why You Should Consider A Ligature Icon Font For Your Next Project

css / navigation

Estimated reading time: 2 minutes, 11 seconds

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 accessible: 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: as an example, see the character map for Entypo.

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.

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.