Font Smoothing Explained

Font smoothing produces very different results across operating systems and browsers. Apple and Microsoft have always disagreed in how to display fonts on computer displays. 

On the next article, Krzysztof Szafranek explains about what is font smoothing and why, until now, there are still differences of how a person see a font rendered across browsers on different OS.

He start his conclusions with the next paragraph:

Unfortunately, a designer cannot ensure that users will see HTML text exactly as designed. Rendering the whole page as an image or Flash file is not a sensible alternative due to performance, usability and accessibility concerns. What, then, can a designer do to ensure maximum legibility and a good look of a type?

  • Accept the reality: Right now there’s no way to tell what settings your users have. Most likely, they have subpixel rendering on Mac OS X, no antialiasing at all on Windows XP with IE6 or Firefox, and ClearType in IE7, IE8 or Vista, but you can’t be 100% sure. Needless to say, a website will look very different across all these environments.

CSS rule for cross browser font smoothing

this CSS was implemented on PepsiCo House of PepsiCo project without to much impact on the results.

html {
    /* Adjust font size */
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    /* Font varient */
    font-variant-ligatures: none;
    -webkit-font-variant-ligatures: none;
    /* Smoothing */
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-smoothing: antialiased;
    -webkit-font-smoothing: antialiased;
    text-shadow: rgba(0, 0, 0, .01) 0 0 1px;