Why does some website text look bad on Windows?

Look at the difference between these two 50px headers that use the Georgia font:

The top one is from IE8 on Windows Vista, whereas the bottom one is from Firefox 3.0.15 on Ubuntu 9.04. On Windows, the text is clearly less pleasant on the eye? It is has jagged edges, has a pixel or two cut off the end of the ‘s’ and is 17 pixels less wide.

This is the styling code:

#logo h1 {
font-family:Georgia, Arial, sans-serif;
font-size:50px;
font-weight:normal;
letter-spacing:-0.05em;
line-height:normal;
}

Problem 1 – Each Operating system ships with a different set of default fonts

The Georgia font is one of the “core web fonts” that everyone has decided should be standard on the web. However, the majority of GNU/Linux distributions (including Ubuntu) don’t ship with Microsoft’s TrueType core fonts installed (and so don’t have Verdana or Georgia available). Installing them is the quickest way to make web page text render similarly to what people using Windows will see. In Ubuntu, do:
sudo apt-get install msttcorefonts
According to a survey on the Ubuntu Forums, approximately 75% of Ubuntu users have mscorefonts installed. It is one of the first things I do on a fresh Ubuntu install – however, even with mscorefonts installed the difference shown above exists.

Problem 2 – Each Operating system renders fonts in it’s own way

There is a font rendering standard that everyone has agreed to follow called TrueType. If everyone has agreed on a STANDARD, why are there any differences in the way a font looks?

It is due to different ways of implementing the standard (i.e. different subpixel rendering algorithms):

• Microsoft Windows (as of Vista) uses a rending technology called ClearType. The philosopy behind ClearType is to prevent blur and improve readability, even at the cost of not being true to the typeface. Microsoft believes that the shape of each letter should conform to pixel boundaries.
• Apple uses AAT (Apple Advanced Typography). The philosophy behind ATT is to preserve the design of the typeface as much as possible, even at the cost of a little bit of blurriness.
• GNU/Linux uses Freetype. Ubuntu enables the subpixel rendering option (i.e. anti-aliasing) in the freetype package but many distributions ship with it disabled due to patent issues.

The Solution

There is no good solution but there’s a few things to try:

1. Ignore the font difference – work on something important 😉
2. Large serif type faces suffer the most – perhaps you can change to using a font which suffers less?
3. Take a screenshot of the text in the browser which is displaying your text nicely and put the image on the webpage instead of the raw text. This has negative accessibility and SEO implications.
4. Try SIFR or cufon – I’ve never used them but they seem similar to using a image except they can cope with large amounts of text and solve the accessibility issues.
5. Try FLIR, a server-side PHP script that dynamically generates images of text in the font-face of your choosing.