All this work of trying to achieve "pixel alignment" on icons is useless, in my opinion. Just change the browser zoom level, and it all breaks. It Retina, it's not necessary. And font rendering is so different between platforms and browsers, it's too hard to try to accomodate.<p>End-users don't really care about "blurry" (i.e. anti-aliased) icons, since all their text is rendered the same way. They only care if the icons aren't <i>legible</i>.<p>Much better than trying to hack hard pixel edges, would be not to cram so much stuff into an icon in the first place. Examples:<p>- Instead of a dogeared document with lines on it (indicating text), just use a blank dogeared document<p>- Instead of a book+bookmark icon, just use the bookmark part, or just the book part, depending on what the icon is for<p>- Instead of slapping a "+" onto an existing icon (e.g. on top of a book with a bookmark, to indicate "new repository" on Github), just use a "+" icon by itself, and ensure the context makes it clear that we're talking about a repository<p>GitHub tried to cram way too much information into a lot of their icons, and it's basically useless IMHO. Icons shouldn't be self-contained complex symbol languages; they should be simple and depend on context for full meaning. They're not sentences, they're signposts.
With an insight into font technologies, this is actually very easy to solve.
Opentype fonts can contain TrueType or Postscript curves. These two have a very different approach to hinting: In TrueType the font is clever and the renderer is stupid (lots of very complicated hints in the font). In Postscript the font only has a few simple hints, and the renderer does the rest.<p>On Windows an unhinted TrueType text font looks horrid, an unhinted Postscript font is ok.<p>So, if you want an unhinted font, because you're using icons, just use TrueType shapes and don't hint them (like Font Awesome seems to do)
(This doesn't cover the native mac renderer, it ignores any hints and does all the work itself)
Another way to sharp icon fonts (at least in Webkit) is using the SVG font format (placing it above ttf in the webfont stack). I demo'd this on my blog:<p><a href="http://t.cem.re/post/21179547863/the-secret-to-custom-sharp-icon-fonts-use-svg" rel="nofollow">http://t.cem.re/post/21179547863/the-secret-to-custom-sharp-...</a>
Font Awesome looks decent across browsers.<p><a href="http://fortawesome.github.com/Font-Awesome/" rel="nofollow">http://fortawesome.github.com/Font-Awesome/</a>