Icon fonts

This is an interesting story about the development and what goes on behind the scenes with icon fonts. One of the hottest web trends of 2013 (and probably again in 2014) is the use of icon fonts.

Icon fonts give complete control over all styling possible in CSS. So instead of opening the graphic back up in Illustrator or Photoshop changing the color, adding a drop shadow, resizing, or any number of other CSS control-able options, you can create one set of vector icons to use on your site and use all the power of CSS manipulation right in your code. As you can imagine this reduces load time and creates scalable vector images that don’t pixelate on different size screens.

Use the link below to read about the process of creating Fontello and where developers see this sort of technology going in the future.

Why use icon fonts?

Just so we’re all on the same page, I’ll summarize the pros/cons of using webfonts to display icons.

Pros

  • Fonts are vectors, so there is no pixelation or blurring on high-resolution screens as there would be if the graphic was raster and needed to scale up.
  • The browser support is as good as you need it to be
  • Once the system is in place, using them is very convenient.
    • Arguably easier than spriting images.
    • They can be controlled with CSS, like the size, color, shadow, etc.

Cons

  • The icons will be single-color. There are some fancy (hacky) techniques for multi-color however, and modern trends and HIGs (human interface guidelines) suggest single colors anyway.

If you need more information about icon fonts and working with them, here are some recommended links:

Embedded Link

Fontello: The Past and Future of the Icon Font Service | CSS-Tricks
The following is a guest post by Vitaly Puzrin, the developer behind the icon font service Fontello. I’m also a fan of IcoMoon, a similar service. But I’m

Google+: View post on Google+