Font rendering in web browsers: a find-your-font adventure

Facebook0Twitter0Google+0LinkedIn0Pinterest0Reddit0

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).

font rendering under Mac OS X

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.

Aliased TrueType rendering under Windows GDI

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).

OpenType CFF rendering under Windows GDI

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.

Grayscale TrueType rendering in Windows GDI

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.

ClearType rendering of TrueType in WIndows GDI

90) TrueType/TTF with Windows DirectWrite ClearType rendering. This is the best Windows rendering for TrueType.

Windows DirectWrite ClearType rendering of TrueType

95) OpenType CFF (.OTF) Windows DirectWrite ClearType rendering. This is the best Windows rendering for OpenType CFF (.OTF). (Compare with 60 above).

Windows DirectWrite ClearType rendering of TrueType

One Response to “Font rendering in web browsers: a find-your-font adventure”

  1. Quora

    Does it make sense to use webfont services as long as most fonts render poorly on Windows?…

    I don’t think its fare to say that most of the fonts from the web font services render poorly on Windows. I think that a good percentage of the fonts render very nicely, I have heard many folks even prefer the rendering on Windows as it can be less fu…

    Reply

Leave a Reply