Skip to: Navigation | Content | Sidebar | Footer


Weblog Entry

Type: the Extra Mile

January 18, 2004

A few typographic terms before we get started. Kerning is the process of optically adjusting the spacing between letters, by hand in most cases, to produce a more even end result. Hinting is the adjustment of type outlines, a willful distortion of the letterforms to help them fit the pixel grid. The difference is that you will most likely never need to hint (it’s done by the designer/foundry before font distribution) but kerning is an essential monkeywrench for your toolbox. And finally, anti-aliasing is the softening of jagged pixellated curves through interpolation.

Kerning example

The two lines of text pictured above show the difference between type set simply by entering and forgetting about it (top), and type that has been manually kerned (bottom). As digital type has matured, the defaults are getting rather good. Hinting of the more common professional typefaces is generally done well, but manual work by the designer is often still needed to take it the extra mile.

However, when you hit a certain size with your type, it becomes hard to apply traditional kerning reliably. 12 pixel high type rarely benefits, unless the gaps are too obvious to ignore.

This is because when working with small enough sizes, a whole new set of problems is introduced. The algorithms used to generate type hit the pixel barrier: no stroke or curve can be reduced smaller than a single pixel in width. Anti-aliasing offers a method around this, by half-toning two or three pixels instead of setting one to full intensity. The optical effect is a smoother curve, which will often appear thinner.

Blurred text

But anti-aliasing is problematic, as the extra pixels add blur. And since it’s an all-or-nothing proposition, you will find them blurring in spots that you really would rather they didn’t.

Photoshop Dialogue -- kerning

In the above image, you’ll notice the stems (vertical strokes on either side) of the U are two grey pixels thick, instead of a single black pixel. The type display algorithm has essentially decided the center line for each stroke falls between the two pixels, so each is shaded. It’s hard for the software, but easy for us to see that this results in a blurry U. Fortunately the tools exist that allow us to fix it.

The Photoshop dialogue at right highlights the adjustment tool you’ll be looking for. By specifying a positive or negative integer, you control how much space displays between each letter. This is the same spot you’d go to kern. Note that your cursor has to be placed between two letters in order to work, without either highlighted.

For the purposes of our aliasing however, we’re not so much concerned about the letter spacing as we are of where the type falls on the pixel grid. By playing with the values, it’s possible to bump each letter off whatever axis is causing it to render sloppy, and tighten up the letters.

The dropdown shown above has some default values you can choose from, but often times you’ll want to add a number in between those, which you have to type. That gets tedious. I just discovered this week that by hitting Option + (left or right arrow) [Mac] or ALT + (left or right arrow) [Win], you can adjust the spacing in increments of 20, which in most cases is good enough.

Blurry textSharper text

Compare and contrast the above images. Subtle changes can make a world of difference to final legibility.