Ben Dunkle’s Blog

Animals from the back of my notebook


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…

Codekit icons

Looks like some of my ideas got implemented in the latest version of codekit. Not as crisp and clear as the ones I did though: