Web Font Quality

We often are asked the question of why fonts look different on a Mac vs Windows, or in one web browser compared to another. This article will address the issues of web font quality.

First of all, it is the Operating System (OS), and not the web browser that impacts font quality.

The Mac OS has a different font rendering system than Windows. And Windows has three different rendering options that generate different quality results.

We recommend reviewing web fonts in the sizes that you will be using in four different rendering modes to judge font quality:

  • Mac OS X
  • Windows Standard grayscale
  • Windows ClearType
  • Windows DirectWrite

Browser Quality Font Rendering

As you can see above there are significant differences in each of these rendering modes.

Mac OS X renders text using sub pixel rendering. This makes type look smooth, which some people prefer but others think is too fuzzy. Also, it can make the font bolder looking than on Windows. Mac OS X does not use the 'hinting' programmed into TrueType fonts, rather it has its own algorithms to render the text on screen.

Windows Standard Grayscale: This is the default setting in Windows XP and uses grayscale antialiasing to smooth the edges of screen fonts. TrueType fonts can be hinted to be optimized for this setting.

Windows ClearType: This uses color pixels to smooth the edges of fonts using subpixel rendering to improve font rendering on LCD screens. ClearType is an option in Windows XP, but is automatically enabled in Windows XP with Internet Explorer 8. ClearType is on by default in in Windows Vista and Windows 7.

Windows DirectWrite is a new text and graphics rendering system in Windows 7, and is also available for Windows Vista SP2. DirectWrite significantly enhances the quality of text by adding y-direction antialiasing. Thus the tops, bottoms and diagonals of characters appear much smoother with DirectWrite. New versions of browsers, including Internet Explorer 9 and FireFox 4 are offering support for DirectWrite.

Here is the most recent data for OS market share from http://gs.statcounter.com:

  • Windows XP - 48.78%
  • Windows 7 -  27.68%
  • Windows Vista - 15.1%
  • Mac OS X - 6.56%
  • Linux - 0.74%

Thus the two most prominent Windows rendering modes today are Standard Grayscale and ClearType. All the fonts on Webtype are optimized for proper rendering in Windows at their designated size ranges.

  • Fonts in the Text category will look good at text sizes (12 to 24).
  • Fonts in the Headline category will look best at larger sizes (24 on up).

Below are examples of fonts in each of the different rending modes:


Mac OS X default font rendering:
Mac OS X default font rendering


 

Windows - Grayscale font rendering:
Windows - Grayscale font rendering


 

Windows - ClearType font rendering
Windows - ClearType font rendering


 

 

Windows - DirectWrite font rendering
Windows - DirectWrite font rendering