¶ 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.
Comments
1
Richard, awesome. Thanks for the research. I’m very interested to understand how these differences come to be.
2
Light text on a dark background is still fugly as all hell unless it is supported with a text-shadow.
3
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.
4
This is a topic I have been wanting to dive into a little deeper. Thanks for the research and screen shots.
5
The new Firefox rendering will be the same as the Camino 1.2 rendering I described. Very good in other words.
6
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.
Add your comment
Comments are now closed on this post. If you have more to say please contact me directly.