File Under: Visual Design

Create Smaller, Better Web Graphics With Icon Fonts

Creating custom icon font files with Icomoon. Image: Screenshot/Webmonkey.

Responsive images means getting high-quality, bandwidth-friendly images to the right screens. Currently that’s not nearly as simple as it sounds, but there’s a responsive images web standard in the works and plenty of smart developers working on the problem.

Implicit in the responsive images discussion is that the images in question are photographic images. For graphics, solid-color images and icons there are already better solutions, namely, either SVG or icon fonts.

Icon fonts in particular have been getting a lot of attention lately and for good reason — they make an easy, lightweight way to serve up resolution-independent images that look good on any screen. Indeed in most cases icon fonts can replace your old image sprites (though you can keep your sprites around for older browsers). And don’t forget icon fonts are fonts, so any CSS effect that works on text will work on your symbols.

There are dozens of great icon font sets available that you can just drop into your projects. Pictos, Glyphish and Symbolset are just a few popular options. There are high-quality free icon sets as well, but it’s also easy to create your own font file from any vector image you have.

Turning your vector files into icon fonts means you can serve your RSS, social icons and perhaps even your logo all from the same custom font file (or even straight from your stylesheet with base-64 encoded data). What’s more, when you roll your own, you can include only those icons you need, further reducing file size.

I’ve been using the OS X application Glyphs to package up icon sets, but, as developer Jeremy Keith recently highlighted in a blog post, there are a number of great (and free) online services that can turn your icons into font packs. Assuming you don’t need all the font editing features found in desktop apps like Glyphs, web services like IcoMoon will work great.

To create your custom collection IcoMoon has dozens of icon fonts to choose from (some free, some not), as well as an option to convert your own graphics. Once you have your set assembled the app will spit out the whole collection as single font file ready to use on your site. You can even get the resulting font base-64 encoded so you can avoid the extra HTTP request.

For more info on how and why to use icon fonts check out the nice overview on the Pictos blog, Chris Coyer’s Icon Fonts are Awesome, developer Trent Walton’s icon font write up and Jenn Lukas’ series on icon fonts.