When designing a website, apart from the usual gradients and other graphical elements, the single most important constituent is the Font. It takes a hell lot of trial and error to get the right font for your website, you need to try different ones, look at them from different angles and decide if they’ll work for you or not. On the other hand, since the browsers will be finally rendering whatever you’ve chosen as your favourite, a designer also has to keep in mind how different browsers are generating the fonts according to the underlying code. That’s why I decided to give the 3 most popular browsers a go on their own capabilities of font rendition. And here’s the result,

As you can see, Google Chrome 4 Dev builds have some problems with Font Anti-Aliasing, while IE shows a bit more blur than anyone else. In my opinion Firefox 3.6 Beta 5 gave the best results with both Serif and Sans-Serif fonts.

Browsers used: Firefox 3.6 Beta 5, Google Chrome Dev Build 4.0.266.0, Internet Explorer 8

OS: Windows 7 (64 bit), Cleartype ON

Fonts used: Arial (Sans-Serif) and Georgia (Serif)

P.S. I don’t have Photoshop installed currently in my PC, that’s why the graphics presented here is rather ‘basic’. Had to do with Paint.NET and don’t know much tricks on it.