Breaking Development: Working with Icon Fonts

by Luke Wroblewski October 21, 2013

In his presentation at Breaking Development in Nashville TN James Williamson described the benefits of icon fonts and how to make use of them on Web pages. Here's my notes from his talk on Working with Icon Fonts.

  • Icons give us a way to communicate in a compact and universal way. Their importance tends to increase as screen size decreases.
  • On the Web most icons are displayed as images or SVG files, which are not resolution independent, and difficult to maintain. CSS Sprites have lower overhead but are difficult to create and not resolution independent. SVG images are scalable, style-able, but still have support issues.
  • Pros of using icon fonts: scalable, single file request, styles with CSS, well-supported (but not in Opera Mini).
  • Cons of icon fonts: monochromatic, tricky to make, accessibility issues, can be tricky to control.
  • There are plenty of high-quality, open-source icon fonts available. Many include @font-face kits and code samples. You may not be able to find every icon you need.
  • Be careful to avoid bloat, customize an icon set to give it only the icons that you need. Services like Noun Project, IcoMoon, and Pictos allow you to build custom icon fonts.
  • For greater control, you can use programs like Illustrator and Fontographer to create your own.
  • To use an icon font, you can map it to basic latin. Just add a letter within a span tag using a specific class. This technique only requires one class mapped to a specific font-family. While this technique is easy to implement, it has some issues. It has accessibility problems and can confuse robots and people where font-face is not supported.
  • Unicode mapping and generated content provides similar control but without lose of semantics. The technique leaves the code untouched and allows you to use common unicode values for symbols as fallbacks. The private use area of unicode will fall back to an empty glyph. However, unicode mapping can be hard to remember and a separate class for every icon can bloat your CSS.
  • Private Use area of unicode gives you up to 6,400 code points that can be used for icon fonts that won't display (when no font-face support) or default to an empty glyph.
  • The data-icon attribute allows you to specific just one style and rely on the data-icon attribute to set specific icons. This technique is nice and semantic and does not require extra classes but the mark-up is not human-readable.
  • To help accessibility, include an aria-hidden attribute on any elements that are generating icon font code. This will prevent screen readers from reading the unicode out and confusing people.
  • Ligatures allow you to fallback to meaningful text but it requires a ligature mapped font and support (which is really uneven right now).

Tips For Icon Fonts

  • Normalize your fonts: font-weight, font-stye, text-transform, etc.
  • Use inline-block for more control and clickability.
  • Although scalable, not every size of an icon font displays well. Try to scale them on the font's grid design.
  • Base64 encode you fonts -this gets around cross-domain issues in FireFox.
  • Use anti-aliasing for Webkit browsers to smooth fonts out.
  • Use vertical-align to control baselines on inline icons. Not all icons will align the same way.
  • You can style icon fonts using color, drop-shadows, and other font styling effects.
  • You can create multi-colored icons using multiple glyphs overlapped with absolute positioning.
  • Glyphs can have a lot of little detail or be quite simple. If you have really detailed icons, consider using multiple versions of the icon: big with lots of detail or small with less detail.