Browser font rendering and antialiasing – Windows vs. Mac

This issue has been going on my nerves for quite some time, and i finally decided to write a coherent post about it in order to educate mostly Mac Designers and Developers, but to clarify things for the Windows users as well.

For no other reason except my own laziness to reproduce this on my own, i will use as example Simplebits.com website, home of one of the nice people making really nice things.

Lets get this show on the road, shall we?

First, the basic statistics; at this moment Mac covers less than 5% of internet’s population. 90% is dominated by Windows machines, most of them (73%) running Windows XP. The rest is Linux and some freaky systems with too complicated names.

With that in mind, lets see how my browser renders this beautiful Simplebits site. Simplebits uses Helvetica as primary font, degrading to Arial if client’s browser cannot render Helvetica. As a reminder, Macs come with Helvetica installed by default – all Macs have it. Windows do not have Helvetica installed by default!

Simplebits CSS section:

However, i, as any other designer, have Helvetica installed, so by browser will use that vector data and attempt to render the screen as follows:

Simplebits as i see it:

From this we clearly see what is wrong. Font is pixelated, kerning is screwed, and small fonts are unreadable.

If i use Firebug to remove Helvetica from CSS, leaving just Arial, things quickly get really good:

Firebug edited CSS:

Simplebits in Arial:

Now, for some explanation.

Windows XP by default uses “Standard” method for rendering fonts, meaning that only fonts of 16 pixels size and up will be anti-aliased, smaller than that will be left pixelated. I have Helvetica installed, so my browser will not jump to Arial, and will attempt to render Helvetica in small pixel size. Helvetica was never designed (of course) to be rendered on screen pixels and therefore it is impossible for it to look good under this conditions. Mac browser fonts get anti-aliased by default, and i am not even sure if you can turn it off.

Windows default factory settings:

Cleartype turned on:

If i turn the Cleartype rendering on, but remember – this is the feature that almost noone uses as it is hard as hell to find it buried deep into menus and submenus, then the Helvetica gets rendered with anti-aliasing, looking cuter than ever.

Simplebits with anti-aliased Helvetica:

In defense of Mac, not many people on Windows have Helvetica installed, meaning that this problem hits mostly designers with Helve installed whose browsers will not jump to second-on-the-list font. Microsoft’s safe font list can be found here, and i would suggest to cross-reference that list with Mac safe list when designing sites in order to achieve real Bulletproof design.

Please keep in mind that this post is for educational purposes only. Simplebits site was used only because it was convenient and easier to use existing material.