Icon fonts

So I’m trying to see if it’s possible to use a font for icons on a site, as has been attempted by the likes of fontawesome and probably many others.

Prognosis to date: it doesn’t look good.

I drew a 16×16 pixel box in Illustrator CS6.

Copy/pasted it into the lower-case “a” glyph in Fontlab 5 (with metrics set to 800 upm).

Exported otf, css3’d it into a basic html file, typed a single “a” on the page, loaded the page in Chrome and Safari, and was disappointed.

Here’s what I wanted to see: A perfect, 16×16 pixel black square, no anti-aliasing, in all major browsers.

Here’s what I got:

Chrome rendering of a 16px by 16px square embedded into the “a” glyph


Safari rendering of a 16px by 16px square embedded into the “a” glyph

Those ain’t perfect squares. They’re close, and the main dark part of the square is 16x16px, but there’s some major anti-aliasing going on.

It’s also funny to note how Chrome tints the edges with a more reddish hue than safari.

I’ll keep playing around, but webfonts for iconography aren’t looking very promising, at least as long as low-dpi screens are around.

[UPDATE 1-26-13] I’ll post on the effects of webkit font smoothing shortly, how that impacts this experiment, and what it means for other browsers…


One response to “Icon fonts”

  1. Yeah, kind of a double edge sword here. They’re praised in the front-end community to help boost speed(which they do) but as I see they have some more improvements to be done.

    Although I don’t think all is lost with this approach for icons. We just need more research like you’re doing here. With time I think this will improve, but as Chris Van Patten says, services like Symbolset use ligatures which in essence is kind of a hack. Maybe Icon Fonts can take better advantage of the PUA instead of using ligatures.

Leave a Reply

Your email address will not be published. Required fields are marked *