Zen or the Art of Hinting

Type designers create wonderful, nice curved outlines for each single glyph in a font. In the testing process, the fonts are printed several times at a high resolution (300, 600 or 1200 dpi). Everything looks great after lots of hours of work. Each glyph is modified and improved several times. Finally, the Gestalt of each glyph is perfect.

When a font is displayed on a screen, there is always a component – the rasterizer or rendering engine – that translates the outlines into pixels in the grid. Simply described, the rasterizer turns on a black pixel when the center of the pixel is within the outlines; otherwise, it stays white. This works fine in a high-resolution environment.

Today's screens have a standard (low) resolution of 72 dpi. In text sizes used for body copy, a tiny grid is available to render a glyph on screen, sometimes just six or eight pixels in the y-direction. See image below of the unhinted "g" and the hinted "g." The "hinter" – a highly trained specialist that makes aesthetic changes within each glyph so they look good at different sizes within the constraints of the screen – has modified the outline of the glyph in the respective point size.

The image of the glyph "s" below shows the outline before and after the hinting process.

This needs to be done with all glyphs in several sizes until we reach a size where there are enough pixels available. At that point, the result of the rasterizer works without applying these manual "hints." As you can see in the example with the series of "m," it takes a reasonable amount of pixels until the shape and characteristics of the glyph become visible. All these examples are based on black and white hinting. If you were to print a hinted glyph in large scale in a high-res environment, it might look weird.

So, the hinter "destroyed" the nice Gestalt of the glyphs to make them look good on screen. It is a constructive destruction of what had been created. This is the "art of hinting." A highly specialized skill, hinting is one of the "unknown" professions of design.

In future posts of this series, I will talk about greyscale, subpixel rendering and other challenges of displaying fonts on various kinds of screens.