Using an icon font (Font Awesome) looks a little blurred and too bold
I'm using Font Awesome to create icons on my site, and while they look fantastic on the iPod Touch with Retina display, on my iMac they looks a bit blurred and less defined.
Here's an image to demonstrate:
As you can see, the font looks really nice and crispt on the Retina Display iPod Touch, but on the iMac, it's kind of crappy.
What is causing this? Is this to do with anti aliasing? Is there something I can do about this?
Answer
Problems like this are likely related to anti-aliasing or hinting. Fonts need to be aligned on a grid of some sort if they hope to look good at smaller sizes. The GitHub guys wrote a great blog post on how they managed cleanliness in their custom font.
I would try to align it on a grid and follow in the GitHub people's footsteps. They did a good job on their icons.
Also: are the icons different numeric sizes between the iPod Touch and the iMac, or is that a side effect of different DPI settings? That may also be a concern with font rendering.
If possible, play around with your DPI settings. I don't use Macs, so I don't know how to change those settings on one. It still won't fix the underlying grid issue, though. Are you able to edit the font(s) in question?