Tailoring to the Pixel Grid

Tailoring to the Pixel Grid

Above is a magnified screenshot of a version of Six Caps font that is being tailored to better fit the pixel grid of digital screens. This method has grown out of experimentation to see how designing upon a screen’s pixel grid could effect the rendering of a font onto standard screens.

Six Caps is a face based upon the forms of classic woodblock grotesks. It’s a very stripped down geometric font that makes it ideal for this experiment. It is also highly condensed, that normally would create problems for a font on screen at small sizes.

Using the pixel grid of a 12pt Truetype font on a 96 dpi screen (still the general Windows standard) Six Caps was reworked so that at 12 pts its vertical stems, counters and sidebearings fitted exactly to the pixel grid. That looks like this in Fontlab’s truetype hinting mode.

The concept is that if a font already snaps to the pixel grid when unhinted at a small pt size (in this case 12pts) then it will comply with hinted environment better. Not only will this effect Windows screens that rely on accurate manual hinting in a font but also to Linux and OS X systems that utilise various ‘autohinting’ engines to render to screen. Even in OS X, where a font’s hinting instructions are disregarded, this tailored approach still creates clearer type on screen.

To get an idea how the unhinted font at 12 pts would snap to the pixel grid when rendered to a Windows screen we can use FontForge’s ‘gridfit mode’. This shows us the characters antialiased at a specific DPI and point size. Here is 12pts @ 96dpi, unhinted truetype.

Compare the unhinted characters above to the character below, the ‘p’ before Six Caps was readjusted to fit the pixel grid. At 12pts the counters have been lost and the stems have lost their definition;

In a web browser (Chrome) the situation looks like the screenshot below. The characters ‘DNHQNBOD’ and their metrics are tailored to the pixel grid. ‘CMPAGKU’ are from a version of Six Caps with untailored stem widths and metrics;

Left to right; OSX, Ubuntu (Freetype with full hinting & no autohinting)

This seems to make sense. A font tailored to fit the pixel grid will render clearer. Six Caps was designed for 12pts on a 96dpi screen. This means it will snap to the grid at 12pts, 24 pts, 36 pts, 48 pts… etc) The sizes in between will not be as perfect but they will render better than if there was no tailoring.  Add some basic hinting into the equation and things start to become much clearer (see below). When hinting was applied it was very clear that the tailored approach made the process of hinting very straightforward, stems would snap into a ‘correct’ position simply. Only on the more complex characters, specifically the ‘A’, were simple Delta hints needed to tame the pixels. The ‘A’ will need closer attention still, but overall the rest of the character set was hinted very simply. The screenshots below are taken from Chrome browser on Ubuntu using Freetype with autohinting switched off and hinting at ‘full’ (simular render effect to Windows GDI). Top line is the tailored version of Six Caps, lower line is standard version. The standard version would need a lot more manual hinting to equal the clarity in the tailored version. Tailoring a font to 12pts seems a good idea for a display font like Six Caps.


Leave a Comment

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