Web font Rendering on Windows

The largest % of browsers on the web is Internet Explorer running under a Windows OS. How web fonts look for the majority of these web users is an issue, especially as font rendering tends to look less satisfactory under the IE/Windows combination than under other modern browsers and/or OS X or Linux. Microsoft has resisted the ‘pure’ antialiased text look of OS X, instead developing ClearType to deliver sub pixel rendering for screen font rasterisation. The goal of ClearType is to ‘smooth’ fonts on digital screens but with a crisper outline than standard antialiasing. At the heart of ClearType is a heavy reliance on hinting, so for a font to render optimally on a Windows system, a font must be properly hinted. This forces a heavy weight of work onto the font designer.

However, by editing the gasp table (Grid-fitting And Scan-conversion Procedure) in Truetype fonts with none or minimal hinting, it’s possible to greatly improve their rendering in web browsers on Windows. By default Fontlab and Fontforge create gasp tables that don’t give the best font rasterisation in modern web browsers, but other options for the gasp table are available. At the moment, of these two, only Fontforge can create fonts with enhanced gasp tables.

Also, with Internet Explorer 9, Microsoft has improved their browsers font rendering. Unhinted fonts can now look good for the biggest % of Internet users. The following screenshots show a completely unhinted version of Candal Font, with it’s gasp table set to version 1, with anti aliasing and symmetric smoothing turned on for all point sizes.

Internet Explorer 9, Windows 7 with ClearType turned off.

Internet Explorer 9, Windows 7 with ClearType turned on.

Internet Explorer 8, Windows 7 with ClearType turned off.

Internet Explorer 8, Windows 7 with ClearType turned on.

The ‘best’ webfont rendering on Windows seems to be;
Firefox 4 + ClearType + no hinting + GASP = grid fitting OFF, antialiasing ON, symmetric smoothing ON.

Extra good news is that this not only gives best rendering results, but knocks days of font hinting out of the designers workflow. It seems that DirectWrite is effectively removing the need for classic truetype instructions in Windows webfonts; some minimal but key manual hinting would tweak out any slight blurring at cap height, x height and at overshoots.

No hinting + Antialiasing & symmetric smoothing. Firefox 4.

Autohint + default gasp table. Firefox 4

No hinting + Antialiasing & symmetric smoothing. Chrome.

Rasterisation options via for the gasp table are.
# Grid-fitting and hinting performed at the specified ppem, i.e. TrueType bytecode interpretation.
# Anti-aliased rendering at the specified ppem.
# Use smoothing along multiple axes with ClearType® (Only supported in version 1 gasp)
# Use gridfitting with ClearType symmetric smoothing (version 1 gasp only)

Leave a Comment

Your email address will not be published. Required fields are marked *