How fonts render online is a dance between the font, the browser, and the particular settings of the operating system (OS) it’s being viewed on. As I’ve noted before, a bad font, or a poor choice of font format (like OpenType CFF on most Windows browsers today) can look awful on most computers. That’s one of the many reasons to consider using the WebINK web font service. With a font service, your site will always use the correct font formats, without any code changes on your part.
Most of the time, given decent quality fonts, it comes down to the OS settings and the browser doesn’t have much to do with it. I’ve seen plenty of blog posts that claimed things about browser/OS interactions in font rendering that were simply wrong. That being said, there are some interactions between the browser and the OS that can have an effect, mostly with Internet Explorer. The good news from this is that soon some browsers may be doing significantly better than others, even on the same operating system.
In any case, if you really want to know what kind of text rendering a viewer of your site will see in a web browser, we can predict it pretty well by asking a few questions. What I’ve included here an old-fashioned find-your-own-adventure style goto book, with examples of the different rendering modes. If you want a simpler visual chart (though it misses some twists that can change font rendering), see the visual flowchart from Miha Zajec on Typophile.
[NOTE: One extra thing to look out for is the “zoom level” in your web browser. It should be set to 100%, otherwise the screen shots below will be scaled and look much worse than the real rendering. Also, if you are using Windows Vista or XP, make sure you don't have any system-level scaling going on (where you’ve told Windows to make everything 125% or 150% of “regular size”).]
How to determine web font rendering results (AKA Find-your-font Adventure!):
1) What operating system is the viewer using?
- Windows: Goto 10
- Mac OS X: Goto 30
- iPhone, iPad: Goto 33
- Linux: Goto 40
10) Is the page displaying OpenType CFF fonts?
- Yes, on IE9: Goto 95
- Yes, on some other browser: Goto 60
- No, the viewers are getting TrueType fonts: Goto 11
11) Is the viewer using Internet Explorer 7, 8 or 9? Safari?
- IE 7: Goto 12
- IE 8: Goto 13
- IE 9: Goto 14
- Safari: Goto 16
- None of the above: Goto 20
12) Internet Explorer 7 turns on GDI ClearType at the system level.
- If the viewer is using the new default settings (ClearType on), goto 80
- If the viewer has turned off ClearType after installing IE7, go to 70.
- If the viewer has turned off ClearType and also turned off text smoothing (anti-aliasing), goto 50
13) Internet Explorer 8 uses GDI ClearType even if it is turned off at the system level.
- Goto 80.
14) Internet Explorer 9 uses DirectWrite ClearType regardless of the OS settings, for both TrueType and OpenType CFF fonts.
- For TrueType or OpenType .TTF fonts goto 90.
- For OpenType CFF (.OTF) fonts, goto 95.
16) Safari for Windows initially used Apple’s Quartz rendering even on Windows. Apple changed this in Safari for Windows in later releases, making it optional but not the default.
- If the viewer is running Safari 3.1 for Windows, goto 31
- If the viewer is running Safari 4+ for Windows, but has turned on Apple’s Quartz rendering, goto 31
- For all other Safari 4+ users, goto 20
20) What version of Windows is the viewer using?
- XP: Goto 21
- Vista or Windows 7: Goto 22
21) Unless the viewer on Windows XP has turned on ClearType (recommended), or turned off anti-aliasing (not recommended), they will be getting Windows GDI grey-scale rendering for TrueType and OpenType CFF.
- If they left the default settings, Text Smoothing on, goto 70
- If they have turned on ClearType themselves, or ever installed Internet Explorer 7, go to 80.
- If they have instead turned off text smoothing (anti-aliasing), then ick. Goto 50
22) Unless the viewer on Windows Vista or Windows 7 has turned off ClearType (not recommended), they’ll be getting Windows GDI ClearType rendering in their current-generation browser.
- If they left the default settings (ClearType on), goto 80
- If they have turned off ClearType, go to 70.
- If they turned off ClearType and also turned off text smoothing (anti-aliasing), then ick. Goto 50
30) All versions of Mac OS X generally have a similar approach to rendering text on screen. I call it “full fuzz anti-aliasing.” The text is rendered slightly less crisply than Windows, but more true to the outlines of the letters in the original font. The hinting code in the original font is irrelevant and ignored by the Apple rasterizer, and the outline format (TrueType or OpenType CFF) doesn’t matter much, either.
There are some minor wrinkles, though. Does the viewer have Mac OS X 10.6 or higher installed?
- No: Goto 31
- Yes: Goto 32
31) Older versions of Mac OS X allow the user to select between three different styles of anti-aliasing, offering slightly different degrees of boldness of text, with one intended for CRT screens and another for LCDs. They can pick any one, but the general idea is similar.
I don’t recommend it, but the user can also turn off smoothing below a certain size (which by default is smaller than any usual web text).
- Goto 32 for the typical Mac OS X experience, even on older versions of Mac OS X.
32) Mac OS X font rendering. Version 10.6 and higher doesn’t offer as many user-selectable rendering choices as older versions of Mac OS X. The user can turn off the default “Use LCD font smoothing when available,” and like older Mac OS X versions, they can also turn off smoothing below a certain size (which by default is smaller than any usual web text).
33) iPhone and iPad use the same Quartz rendering as Mac OS X. Mobile Safari doesn’t actually support the same formats of web fonts as desktop browsers, and requires SVG fonts instead. but the rendering ends up looking pretty nearly identical nonetheless (though with some very small variations depending on the SVG conversion). See the sample in 32 above.
40) You know what I said about all this talk about browser/OS interactions being overblown? Well, that was true… except on Linux. Basically, most Linux browsers (and other apps) use FreeType for font rendering, but FreeType has a whole bunch of different switches that they can push, and they do indeed do a number of different things. Because Linux browser users are such a small portion of the web-viewing public, and there are so many different possibilities, we won’t even try to do screen shots here.
50) Windows GDI TrueType rendering, with anti-aliasing off. This is pretty much the worst of all possible worlds, but luckily it’s never a default.
60) Windows GDI OpenType CFF (PostScript) rendering. These fonts are rendered the same way in all Windows GDI applications, regardless of other settings (you can set no anti-aliasing, greyscale, ClearType, it doesn’t matter).
70) Windows GDI greyscale TrueType rendering. This is mediocre. Interestingly, with this setting on, some typical sizes in a typical font still don’t get anti-aliasing (font smoothing). But the setting is controlled by a table in the font, and thus the font vendor can change it.
80) Windows GDI ClearType rendering of TrueType. Prior to Internet Explorer 9 this was state of the art for Windows rendering TrueType fonts in browsers.
90) TrueType/TTF with Windows DirectWrite ClearType rendering. This is the best Windows rendering for TrueType.
95) OpenType CFF (.OTF) Windows DirectWrite ClearType rendering. This is the best Windows rendering for OpenType CFF (.OTF). (Compare with 60 above).