Icon Fonts

Chris Coyier’s Icon Fonts are Awesome demo pushed me up to the edge, and seeing how fuzzy image icons look next to ultra-crisp retina display text threw me over. Now, I’m testing out an icon font on this site for the comments, 3 footer links, and even my logo (why not push it all the way). The icons I use are a hodge-podge, pulled from my own stuff, Glyphish, and Gedy Rivera, so I had to toss them all into a font.

icon comparison

For that, I used the fantastically simple mac app, Glyphs. It gets an A+ for suiting my needs perfectly. I put in a B+ amount of effort for results I’m pleased as punch with, though as I learn & test I may shoot for minor improvements from time to time. The font icons may render a tad on the jagged side for older machines, but it’s a fair tradeoff when you’re browsing from a retina iPad.

In addition to Icon Fonts are Awesome, check out Displaying Icons with Fonts and Data- Attributes from John Hicks for help with implementation. If you’re looking to create custom web fonts, check out Shifticons.

Update: 5/20/12

I recently found this Github post on the making of their icon font, Octicons, extremely helpful. I’ve also started a collection of icon font goodness over at Gimme Bar.