Type rendering: web browsers
October 21, 2010
Every great web browser has a layout engine that explicitly decides how to turn our markup, stylesheets, and scripts into living, breathing websites. Layout engines have everything to do with how our web designs are generated and visualized; however, for the specific task of type rendering, layout engines almost always defer to the operating system’s text rendering engine. This explains why type in the same web browser renders differently on different operating systems. Furthermore, browser preferences can override or change default OS font smoothing settings. Let’s look at how type rendering is affected, or not affected, by each popular web browser.
Mac OS X Browsers
We’ll kick this off the easy way. On a Mac, all web browsers use Core Text – the system default text rendering engine – and OS font smoothing settings. There are no browser preferences that affect the way type is antialiased. So, on a Mac, type looks the same no matter which browser you use.
Windows: Firefox, Chrome, Safari, Opera, and IE6
As on a Mac, all of these browsers use the system default text rendering engine and OS font smoothing settings. In general, a given font, on a given operating system installation, will render consistently in all of these browsers. As I explained in the previous post, Windows 7 and Windows Vista have ClearType sub-pixel antialiasing enabled by default, whereas Windows XP has Standard grayscale antialiasing enabled.
Windows: IE7 and 8
Internet Explorer 7 has a preference called “Always use ClearType for HTML” that overrides the default OS font smoothing setting. This preference is enabled by default, which means that users of IE7 will usually see type that is antialiased with ClearType — even if they are using Windows XP or have explicitly chosen standard font smoothing in their OS settings.
Internet Explorer 8 also has this preference, and it is also enabled by default. However, when IE8 is installed it forcibly changes the OS font smoothing setting to ClearType sub-pixel antialiasing. This means that font smoothing is affected everywhere — not just in IE8. For example, if you’re a Windows XP Firefox user who has never modified your smoothing settings – and you happen to install IE8 – you would subsequently see ClearType-antialiased text in Firefox.
Windows: IE9 and Firefox 4
Type rendering in Internet Explorer 9 is a breath of fresh air. IE9 bypasses OS font smoothing settings in favor of Microsoft’s DirectWrite text rendering engine, which makes type look incredible. It also ensures that all IE9 users will see type rendered the same way. Firefox 4 will reportedly also use DirectWrite for text rendering.
So, which browsers to test with?
But what does all this mean for the web designer? Luckily, there are only a handful of browser/OS combinations that you need to check in order to have a thorough grasp on the way a particular font renders on the web:
- Any Mac browser
- IE8 with ClearType enabled
- IE6 with Standard antialiasing enabled
- Firefox 4
And that’s it. This list of browsers for testing is based on out-of-the-box browser/OS installations, where no settings or preferences have been changed by a user. This out-of-the-box approach is how screenshots from Typekit’s own Browser Samples are taken, and reflects what you’ll see in the samples from many screenshot services. If you have your own testing environment, you may find that you have some flexibility in choosing browsers for testing — because it’s really the text rendering engines and OS font smoothing preferences that we’re trying to account for.
And oh yeah, the fonts
Earlier in this post, you’ll notice I was careful to use the phrase, “a given font.” All of what I’ve described so far — about operating systems, text rendering engines, font smoothing settings, browsers, and browser preferences — is true, but it does not account for the font file itself.
Our next two posts will explain how font files factor into all of this. After that, we’ll round things up by reviewing some specific OS / browser / font rendering mixes, and we’ll talk about what aspects of these mixes we can improve. We’ll also talk about how CSS properties can affect type rendering. Stay tuned!