Just recently Jeffrey Zeldman was bemoaning the sub-standard state of text rendering in Firefox on a Mac. And the sad truth is he only skimmed the surface of type rendering problems across browsers. Never mind trying to pick a typeface which most people will have installed; Firefox, Safari, Opera and Camino may render even the same font differently.
This is because there are (at least) five different formats of fonts: TrueType-Mac, TrueType-PC, PostScript-Type 1, OpenType-PostScript and OpenType-TrueType. I’m not au fait with the technical differences between formats, but the differences in rendering between browsers is shocking.
To demonstrate the differences, I created a page with five different fonts, one of each type. The resulting screenshots show that Camino 1.2 (still in beta) and Safari do a fine job of rendering all formats, but Firefox and Opera struggle with all formats except for TrueType Mac. Note that the current release of Camino renders the same as Firefox.
| Browser | Font Format | ||||
|---|---|---|---|---|---|
| TrueType Mac | TrueType PC | PostScript | OpenType PostScript | OpenType TrueType | |
| Camino 1.2 | good | good | good | good | good |
| Safari 2 | good | good | good | good | good |
| Firefox 2 | good | correct italic & bold fonts displayed; miscalculation of space required for italic, bold & underlined fonts resulting in overlappping text | not rendered | italic & bold fonts synthesised; miscalculation of space required for italic, bold & underlined fonts resulting in overlappping text | italic & bold fonts synthesised; miscalculation of space required for italic, bold & underlined fonts resulting in overlappping text |
| Opera 9 | good | good, but italic font is synthetically obliqued | not rendered | bold font not rendered; italic synthesised | bold font not rendered; italic synthesised |
Hat tip Jon Hicks for details about forthcoming Camino releases.
Browsers · Typography · Apple
Tim Brown wrote:
Richard, awesome. Thanks for the research. I’m very interested to understand how these differences come to be.
Sujay wrote:
Light text on a dark background is still fugly as all hell unless it is supported with a text-shadow.
Fredrik Wärnsberg wrote:
I’m more interested in how the switch to the cairo rendering engine for gecko 1.9 will affect firefox’s font rendering. I’ve only heared great things about it thus far.
Nate K wrote:
This is a topic I have been wanting to dive into a little deeper. Thanks for the research and screen shots.
Rich wrote:
The new Firefox rendering will be the same as the Camino 1.2 rendering I described. Very good in other words.
John Lascurettes wrote:
Firefox 3 v. Camino 1.2 aren’t exactly the same. Camino 1.2 still fails to render the card suit entities (see https://bugzilla.mozilla.org/show_bug.cgi?id=212745) whereas the latest Minefield build for Firefox does render them correctly.