Firefox 3's Buggy Text Rendering
With the recent release of Firefox 3 I’ve found that the way certain elements are rendered has changed, and in some situations not necessarily for the better. This is obviously due to the new version of the Cairo rendering engine, and no doubt, these changes are all supposed to be improvements (and mostly are). However, I’ve run into one problem with text rendering in some specific situations. Take a look at this:
That’s Arial set at 1.35em (from a global font size of 10px) on Windows with ClearType enabled. I know 13.5px isn’t a round font size, but that’s not to blame here, really that’s just 14px. Set it to 1.3em, you get 13px text, set it to 1.4em and it looks the same but with slightly larger leading.
The new rendering engine is supposed to optimise the text for legibility; I’d argue that that is not legible. Thankfully, Firefox 3 now supports the text-rendering CSS property, which we can use to set the rendering mode to speed optimised, which actually gives much more legible text (in this situation, in my opinion). This gives us something much closer to the Firefox 2 rendering (if not identical).
text-rendering: optimizeSpeed; /* The default is optimizeLegibility */
Which gives us:
As you can see, much better. I’m not discounting the improvements made in the new rendering engine, but I do feel that it could still do with some work to iron out these rare, but pretty annoying issues. That can’t be how the text is supposed render, right?