Using Icon Fonts in Web Design

by Sarah Mills Posted on March 28, 2013

Recently I was reading Paul Boag’s “Breaking free of the print design mentality” blog post where he asks the question, “How can you create a compelling design that works just as well across all of these canvas sizes? To many this sounds impossible.”

One way I try to create designs that will work anywhere is to use icon fonts. You are probably already familiar with regular icon fonts on every machine, like Wingdings or Webdings, but icon fonts can do so much more on the web.

Some of the icons in Wingdings, an icon font on most machines Some of the icons in Wingdings, an icon font on most machines

Because they are fonts and essentially vector information, these icons scale perfectly at any resolution—making them worry free when it comes to designs seen on retina displays. Designers don’t have to worry about 2x pixel sizes or spend extra time making separate images for different displays.

Another advantage of using icon fonts is that you don’t have to make new images if you want to quickly change the color—it is all done in CSS. For a client site that allows the user to change the color of text, they are also able to change an icon’s color with no hassle.

A List Apart discusses even more advantages to symbol fonts, from ligatures to increased accessibility. Roger mentions Stately in a previous Snack O’Clock post—an icon font of states you can use for an interactive map.

The best part about icon fonts is that it is simple to make your own! I use Icomoon, which lets me upload an SVG and make a font of the glyphs I want to use.

Some icons from Icomoon

Here at Matrix, we have launched several sites using icon fonts: NECA‘s responsive site uses icons in the page headers, so they are perfect at every size. The American Counseling Association’s main site and conference site both use icon fonts for social media images and small icons. FMI2014‘s colorful site uses icon fonts not just for social media, but as an overall part of the branding in the headers.

While icon fonts are becoming more popular because of design trends like “flat design“, this is just the beginning of uses for scalable images on the web.

What are your favorite responsive design techniques and tools?

Related Articles