Font Rendering | CSS: Presentation Layer

ClearType

Windows XP's sub-pixel rendering approach (ClearType) only attempted to render sub-pixels horizontally, leaving alot of aliasing; it worked fine on small, hinted fonts, but larger/more obscure fonts look like crap. The ClearType font smoothing engine doesn't know how to do vertical smoothing, meaning that nearly-horizontal lines/curves look jagged.

ClearType's horizontal smoothing capability is provided by an LCD-optimized "subpixel" approach that is commonly used on Mac/Linux; however Mac/Linux also support a second approach, known as greyscale smoothing, which is commonly used for vertical smoothing (for nearly-horizontal lines/curves). Mac/Linux combination of both provides excellent horizontal smoothing and pretty good vertical smoothing. Windows 7 and below do nothing for vertical smoothing.

DirectDraw (DirectWrite)

Windows 7 featured DirectDraw support, more specifically DirectWrite, a much improved sub-pixel rendering.

Rendering Problems

Browsers use their own rasterization engines to convert vector fonts into pixels, which is not necessarily the same for both types of contours. Contours can be TrueType (TT-webfonts) or OpenType/CFF (PS-webfonts). Mac's are not concerned with these particular rendering problems because all browsers on Macs use quartz for font rendering. The table below summarizes rasterization engines by browser and the type of font used:

DirectWrite does work well for both font types, however the results are not exactly the same. CGI ClearType only supports vertical antialiasing, not horizontal antialiasing, therefore having a very different look than GDI grayscale. Results vary, depending on the font being used.

Browsers

The anti-aliasing/jagged issue(s) will happen in any Windows browser

Firefox

Some fonts in Firefox for Windows have jagged edges with cleartype turned on. This is a result of poor hinting.

The jagged edges at large sizes are caused by the Cleartype rendering engine in Windows. Cleartype make use of the subpixels in x-direction to draw more precise curves, but is limited to full pixels in the y-direction. Microsofts new rendering engine, DirectWrite, address this by adding blur in the y-direction.

As a prefix, you can serve fonts with Type 1 outlines. Type 1 outlines force Windows to use it’s previous rendering engine, Standard GDI, and display the font in shades of grey in both x- and y-direction.

Internet Explorer

IE9 uses DirectWrite.

Chrome

Chrome has not taken advantage of DirectWrite in Windows yet; they need to add support for directly within the browser (something Firefox has had forever)

Chrome switched to Skia, its own font renderer, and no longer uses ClearType on Windows. Skia does not have a DirectWrite backend on Windows yet (2013-02); the distorted fonts it displays are because it is rendering to a buffer without doing any hinting in the pipeline.

Solution for Cross-Browser (Windows) font-face

One solution to fix the jaggedness is to use svg fonts in Chrome, however many adopters have found this to be very problematic, as rendering is excellent on a letter by letter case, but in paragraphs you risk a large number of bugs, which results in breaking layouts, styles, etc. Instead, convert the .ttf into .otf with PS outlines before the font is converted into multiple formats. TransType is one example of software that can be used to accomplish this. After converting, open the font with Windows font overview and compare the .ttf and .otf files: there should be a clear difference between them. The TrueType outlines version should be pixelated and the OpenType with PostScript outlines version should be smoothly anti-aliased. Now, use the OpenType with PostScript outlines file to create the font-face kit to generate .eot, .svg, and .ttf files.

Note: Font Squirrel does not handle outline ps, so use a different generator to create the .woff file.

Note: the font-face kit used in this case does not require the generated .ttf file; it is useless, discard it; better yet, select the appropriate option prior to generation so that it will not be generated.

.woff with PostScript Outline Generation

Next, generate a .woff file with PostScript outlines; sfnt2woff is one software solution that can be used for this.

To convert existing TrueType/OpenType fonts to WOFF format (subject to appropriate licensing), there is a simple command-line tool sfnt2woff. Precompiled versions for Mac OS X and for Windows are available. Simply run sfnt2woff at a command prompt for a brief "usage" message.

Test for Gentium Basic font, repackaged in WOFF format: "http://people.mozilla.com/~jkew/woff/sfnt2woff.exe" A zip file containing the format description together with sample code, including the source for the sfnt2woff tool, is available for download here for Windows

or view version here: woff-code-latest/woff-2009-10-03.html