There are subtle differences between the way different browsers on different operating systems render the exact same font. While it may not seem like a big deal, it can create big headaches as designers need to choose how to keep their design consistent accross platforms. Since the variation between what browser and operating system a user only becomes greater, I can only see this becoming a larger issue as more people use the different browsers.

While I’m not going to document the problem extensively here, as Chris Coyier over at CSS Tricks documented the rendering differences quite well and a quick look at my own website shows some of the symptoms, I would like to suggest a solution or two as I plan to implement them on my own site.

The above shows the subtle differences on my own site when I only change OS. While not an incredible change, those 3 or 4 pixels are terribly annoying every time I see them on my Windows box.

The Fix
Luckily, that specific problem I think I will be able to fix with a relatively small snippet of jQuery JS or PHP magic. While it will rely on the user-agent, which can easily be spoofed, it should be able to fix the issue for the majority of users. I’ll basically just be grabbing the user-agent OS / Browser, and inject some CSS into the page to adjust the padding / margins of whatever elements it affects. However, I don’t see this as a solution.

The Solution
My fix will be very site specific even though the principle idea can be applied to any site. A solution should fix it in one swoop, but I do not see that happening for some time. I think the only effective way to solve this issue would be to introduce a “Web Font Rendering Engine” that would have to be voluntarily introduced into each browser. Although solving the problem, this is less than ideal considering it would require a browser upgrade and eight years later people are still using IE 6.