Ttfautohint – Stem Width and Stem Positioning

Ttfautohint is a free autohinter for Truetype fonts, that aims to automate the creation of Truetype Instructions for Truetype Fonts rendered on Windows XP, Vista and Windows7 and higher. Version 0.9.12 of Ttfautohint includes improved support for ‘Stem Width and Stem Positioning’ under Microsoft’s Cleartype font rendering.

Ttfautohint offers two different routines to handle stem widths and stem positions rendered under ClearType: ‘smooth’ and ‘strong’. The former uses discrete values which slightly increase the stem contrast with almost no distortion of the outlines, while the latter snaps both stem widths and stem positions to integer pixel values as much as possible, yielding a crisper appearance of fonts under ClearType.

The result is better browser rendering under Windows XP, Vista and Windows7, of webfonts that have been autoinstructed with ttfautohint. For example compare the following renderings of Ubuntu Regular. Top line is Ubuntu Font with no hinting at all, middle line is the original professional manually hinted font, and the last line is Ubuntu Font autoinstructed with ttfautohint;

At 10 pts;
At 20 pts;


‘Strong’ or ‘Smooth’ Positioning?

Ttfautohint offers two different routines to handle stem widths and stem positions: ‘smooth’ and ‘strong’, and can toggle these for 3 different Windows text rendering models; Standard Greyscale, GDI (Graphics Device Interface) ClearType, and DirectWrite ClearType. How these settings effect font rendering on Windows can be seen in the screenshots below.

Under DirectWrite ClearType the difference is less significant. Curves at particular text sizes will appear slightly crisper under ‘strong’ positioning. In the example above, ‘strong’ positioning has been applied to the upper line of text, and ‘smooth’ positioning to the lower line. Differences can be seem most clearly on the ‘a’ and ‘r’ characters. Difference is also seen on the ‘e’ character, however the middle ar of the ‘e’ becomes too wide under strong positioning.


Some Details

The difference between manually instructed fonts and fonts auto-instructed with Ttfautohint under Windows Cleartype (GDI and DirectWrite) is getting smaller. For example comparing a number of details in text rendering it is noticeable that mostly rendering is comparable, though some details are better rendered under manual or auto instructions. The shots below show that manual hinting has given clearer rendering of a ‘caron’ at 10pt, but the same font (Ubuntu) auto-instructed renders the lowercase ‘eth’ clearer. Original manual hinting is the upper shot in each pair. Magnification is x800, x400, and actual size.

Ubuntu Font @ 12px – Windows 7 – Firefox 13 – DirectWrite ClearType | Original manual hinting

Ubuntu Font @ 12px – Windows 7 – Firefox 13 – DirectWrite ClearType | ttfautohint -x 0 -w ‘gGD’

Ubuntu Font @ 12px – Windows 7 – Firefox 13 – DirectWrite ClearType | Original manual hinting

Ubuntu Font @ 12px – Windows 7 – Firefox 13 – DirectWrite ClearType | ttfautohint -x 0 -w ‘gGD’


Some Issues

There are still some rendering issues with ttfautohint generated TrueType instructions. For example whilst the ‘strong’ stem positioning routine snaps both stem widths and stem positions to integer pixel values giving stems crisp rendering it can also cause some distortion, for example to diagonal stems at certain point sizes. For example, below the rendering of the Ubuntu Font under Windows GDI ClearType is similar between the original manually hinted font and the ttfautohint instructed version, except that the diagonal stem of the lowercase ‘s’ is rendered marginally too thin. Compare the similar rendering of the lowercase ‘a’ compared to the differences of the lowercase ‘s’ in the following screenshots.


Ubuntu Font – WinXP – GDI ClearType | Original manual hinting

Ubuntu Font – WindXP – GDI ClearType | ttfautohint -w ‘gGD’

Looking closely at x1600 magnification we can see clearer that the lowercase ‘a’ is rendered very similarly in the manually hinted and autohinted versions, but the diagonal stroke of the lowercase ‘s’ is rendered thinner in the autohinted font. The autohinted font is on the right in each pair of characters



Standard Windows Greyscale Font Rendering

Traditionally, manually hinted fonts used the TrueType ‘gasp table’ to render text at smaller sizes, e.g. below 16ppem, with no anti-aliasing. The lack of font ‘smoothing’ combined with hinting on both the y and x-axis gave these fonts crisp horizontal and vertical stems. Ttfautohint does not hint fonts across the x-axis (though this maybe be implemented later), so without anti-aliasing vertical stems could suffer from uneven rendering. Therefore fonts auto-instructed with ttfautohint have a ‘gasp table’ with anti-aliasing being applied for all ppem sizes. The result can be seen below; top is the original manually hinted Ubuntu font, lower is the same font auto-instructed with ttfautohint.

We can see the detailing of these two approaches closer at x400 magnification;


Italics and Other Weights

Regular weighted roman fonts are often the most straightforward to instruct, whereas bolder or lighter weights and sloping romans or italics can present more issues, especially for autohinting. The following shots result from testing Ubuntu Font Light and Bold weights and the Regular weighted italic.

[ above - Ubuntu Font Regular Italic | WinXP Cleartpe | Chrome | ttfautohint -w gGD ]

[ above - Ubuntu Font Light | WinXP Cleartpe | Chrome | ttfautohint -w gGD ]

Browser Tests & Screenshots

The following screenshots are from tests carried out on Windows 7 and Windows XP with default ClearType settings and standard greyscale anti-aliasing. Browsers used are Firefox 13 and Chrome 20. Fonts used in these tests were Ubuntu and Droid Serif, both downloaded from Google WebFonts.

The aim of the tests were to compare the browser rendering between the original manual TrueType ‘hinting’ and the autohinting created by TTFAutohint on various webfonts, browsers, and rasterisation engines.

Droid Serif Regular – Windows 7 | Cleartype – GDI & DirectWrite


droidSerif-reg-win7-chrome | original hinting
droidSerif-reg-win7-chrome | ttfautohint -w ‘gGD’
droidSerif-reg-win7-chrome | unhinted
droidSerif-reg-win7-firefox | original hinting.droidSerif-reg-win7-Firefox | ttfautohint -w ‘gGD’
droidSerif-reg-win7-chrome | unhinted

Droid Serif Regular – Windows XP | GDI Cleartype


droidSerif-reg-winXP-chrome | original hinting
droidSerif-reg-win7-chrome | ttfautohint -w ‘gGD’
droidSerif-reg-win7-chrome | ttfautohint -w ”
droidSerif-reg-win7-chrome | unhinted
droidSerif-reg-winXP-firefox | original hintingdroidSerif-reg-winXP-Firefox | ttfautohint -w ‘gGD’droidSerif-reg-winXP-Firefox | ttfautohint -w ”
droidSerif-reg-winXP-Firefox | unhinted

Ubuntu Font – Firefox 13 & Chrome 20 | Windows XP – Standard Greyscale & GDI Cleartype


WinXP Greyscale – Chrome | original hinting
WinXP Greyscale – Chrome | ttfautohint -w ‘gGD’
WinXP Greyscale – Chrome | ttfautohint -w ”
WinXP Greyscale – Chrome | unhinted
WinXP – GDI Cleartype – chrome | original hinting.WinXP – GDI Cleartype – chrome | ttfautohint -w ‘gGD’WinXP – GDI Cleartype – chrome | ttfautohint -w ”
WinXP – GDI Cleartype – chrome | unhinted