Ttfautohint – Free Truetype Fonts Hinting – Improved Cleartype Rendering

Ttfautohint is a free autohinter for Truetype fonts, that aims to automate the creation of hinting 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 – Stem Width and Stem Positioning

Ttfautohint offers two different routines to handle stem widths and stem positions of Truetype fonts 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 Truetype 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’s ‘smooth’ and ‘strong’ stem positioning can be toggle on/off for 3 different Windows text rendering models; Standard Greyscale, GDI (Graphics Device Interface) ClearType, and DirectWrite ClearType. How these settings effect Truetype 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 Truetype 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

ttfautohint testing

Above – Standard manual hinted Ubuntu Font

Above – ttfautohint hinted Ubuntu font

Note that the curves stems on the y-axis appear more ragged than in the manually hinted font. A close up (400%) shows the following:

Above – Standard manual hinted at 400% magnification

Above – ttfautohint hinted at 400% magnification

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.

Werner Lemberg has made some fixes to his Truetype font
auto-instructor, ‘ttfautohint’. Below are screenshots comparing
original instructed rendering alongside the same fonts
auto-instructed with ttfautohint. The issues of some y-axis curves
being deformed has been resolved, though more improvements to be
made. This tool looks like it may very soon shape up into a valid
Truetype Font auto-instructor for webfont providers as ttfautohint’s
approach results in an auto-instruction process that takes seconds
compared to the many hours, days and weeks that traditional Truetype
font instruction needs.

Windows 7, Chrome 12 – GDI ClearType rendering.

Original truetype hinting, on left, ttfautohint instructed version,
on right.

Above – Ubuntu Font)

Above – Ubuntu Font

Above – Droid Serif

Above – Droid Serif

Above – Bitstream Vera

Above – Bitstream Vera

Above – Copse

Above – Copse

Leave a Comment

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