Web Fonts 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 not necessarily the web browser that impacts font quality, but rather the Operating System (OS). 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 desired sizes (text/headline) that you will be using in four different rendering modes to judge font quality:

• Mac OS X
• Windows Standard grayscale
• Windows ClearType
• Sub-Pixel ClearType (DirectWrite)

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.

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

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

• WinXP - 53.19%
• Win7 -  22.41%
• WinVista - 16.60%
• Mac OS X - 6.03%

Thus the two most prominent Windows rendering modes today are Standard Grayscale and ClearType. All the fonts on FontsLive are optimized for rendering in Windows using all three rendering modes 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 (Bree and Copperplate)  in each of the different rending modes:

---

Mac OS X default rendering:

---

 

Windows - Grayscale rendering:

---

 

Windows - ClearType rendering:

---

 

Windows - Sub-Pixel ClearType rendering:

---

 

Mac OS X default rendering:

---

 

Windows - Grayscale rendering:

---

 

Windows - ClearType rendering:

---

 

Windows - Sub-Pixel ClearType rendering: