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:
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…