fonts Archives - NEWTYPOGRAPHY /

Ttfautohint – Free Truetype Fonts Hinting – Improved Cleartype Rendering

Posted by | Automation, Free Truetype Fonts, ttfautohint | No Comments

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.
free truetype fonts autohinter
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.

free truetype fonts autohinter

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

free truetype fonts autohinter

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
free truetype fonts autohinter

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.

free truetype fonts autohinter
Ubuntu Font – WinXP – GDI ClearType | Original manual hinting
free truetype fonts autohinter
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

Nobile & Mako as Android System Fonts

Posted by | Google Webfonts | No Comments

 

One long-ish term project is to create versions of Nobile and Mako (above) customised for Android devices. This is likely to result in an amalgamation of features from both fonts into a new face, to give three GUI fonts for portable and handheld devices.


(above – Mako in progress on Android 2.3.3)


(above – Nobile in progress on Android 2.3.3)


Oswald adopted as the alt-capitalism font of choice.

Posted by | Google Webfonts | 5 Comments

It seems that the Occupy Movement has adopted Oswald Font as the movement’s default protest font. I am honoured and intrigued. Ironically i had already started on a font to donate to OccupyDesign before i realised Oswald had already been adopted and used for a while.

In fact Oswald was semi-inspired by the condensed gothics often favoured by the 1960s underground political presses. Because the posters, magazines and pamphlets were made on old presses, ‘Letrasetted’ or simply cut and pasted, the type of the political underground had an urgent, punchy and ‘unauthorised’ feel (and it was of course all 3 of those things).

‘Ponyland Light’

Posted by | Sketches | One Comment

‘Ponyland’ started as a mash-up of Francois, Open Sans, and Cantarell (see post here). A light version has been started, being further based on aspects of Novarese’s ‘Recta’ face (see below as ‘Chumba Bikes’ and ‘Now Open, Welcome’). The next phase is to bring this light font and the regular weighted original ‘Ponyland’ together into a single face. The regular weight of this can be seen below (as ‘DESGARÇON’ and ‘Oceanside Los Angeles’). The likelihood is that the face will keep the slightly extended uppercase of the light font but introduce some of the less rounded curves of Ponyland’s original lowercase curve-to-stem junctures (see lower, below) eg found on the ‘n’, ‘u’, ‘b’, ‘d’, ‘p’ and ‘q’. The light Recta-esque font will be kept for cross-breeding into future font designs.

 

 

‘optimizeLegibility’ issue with OSX Safari and Chrome.

Posted by | Google Webfonts | No Comments
Please note – this issue has been confirmed and is now fixed in nightly builds of Webkit. Hopefully the fix will reach stable releases asap.

The following raises a possible issue when rendering text via the “text-rendering:optimizeLegibility” function within CSS stylesheets on WebKit based browsers on Mac OSX (e.g. Chrome, Safari). The following screenshots are taken from Chrome 14 running on OSX 10.6.8. Identical results are seen from Safari. Firefox (not WebKit based) does not show this issue. Chrome and Firefox were also tested on Windows 7, Ubuntu and Chrome OS have all been tested and the issue does not occur on those OS’s. Further tests are at http://newtypography.co.uk/fonttests/renderfonttest.html

(above) top text is with ‘text-rendering:optimizeLegibility’, on. Lower line is same text rendered with ‘text-rendering:optimizeLegibility’ toggled off. The lower line is correct letter spacing for the font. Letter spacing of upper line is inferior. See the ‘þjóða’ of ‘þjóðarinnar’, and, ‘geome’ of geometrísk.
(below) same screenshot enlarged to clarify differences between having text-rendering:optimizeLegibility on or off. Top line is on, lower line is off.


(below) Magnified even greater the difference in text rendering can be seen clearly. Upper line is with ‘text-rendering:optimizeLegibility’, on. Lower line is with ‘text-rendering:optimizeLegibility’, off.