sam brown: The Good, The Bad and The Ugly:

“When creating the MassiveBlue web hosting website I did a lot of testing with fonts, weights, styles and what they looked like cross-browser, cross-platform. Unfortunately.. things are no-where near as consistent as one would like them to be.”

The image (below) that I will be discussing was cropped from four screenshots of the website. Because the text rendered the same on IE PC and Firefox PC there was no need to show both, and the Mac screenshots are from Firefox and Safari.

The Good, The Bad and The Ugly

All of the screenshots are unedited, the font is Verdana at 11px (approximately, I used percentages for scalability) in white on a blue gradient background.

The PC screenshots are with Standard Windows anti-aliasing, and with ClearType anti-aliasing that can be turned on in the Display > Appearance > Effects control panel window. The Mac screenshots are from Firefox and Safari browsers.

In reverse order:

The Ugly

Firefox Mac
As much press as this browser gets, on the Mac it certainly is not one of the best browsers available. Safari, Camino, and Omniweb are still higher in the stacking order in my opinion.. Firefox’s load time is just killer, and that doesn’t appear to be the only problem as shown in my screenshot.

The character spacing on the font seems to be a lot smaller than on the other screenshots.. and because of the pixelated un-crisp rendering of the text those extra fuzzy pixels make the characters blend together. It could be worse, but it certainly isn’t great.

The Bad

Standard fonts on PC
With no anti-aliasing, off by default on the PC leaves the plain text looking very unattractive. Not much can be said about this though, as this is the default anti-aliasing on the PC and many users don’t turn ClearType on (or even know about it!). Perhaps I’m just too used to the gorgeous type rendering in Safari.

The Good

Safari Mac
Safari looks the best by far in my example, I also used text-shadow in the CSS that creates a small drop shadow behind the text that looks, well, sexy. Unfortunately most browsers don’t support text-shadow, but thats ok, it doesn’t break anything. Even with this turned off, Safari’s anti-aliasing text rendering far surpasses all other browsers, Mac & PC.

Cleartype PC
ClearType PC should be turned on by default on Windows XP. The text in my example looks great in ClearType and is very very similar to that in Safari (when there is no text-shadow). Kudos to WindowsXP for ClearType.. now turn it on by default damn it!!