Strategies for setting letter spacing: part one

At this point, all twenty-six lowercase letters have been drawn and packaged into a font file, but they lack any horizontal metrics, so they all print in their own em squares if you try to type with it.

Text credit: Wikipedia: Sun

We have to set the sidebearings (basically the width) of each letter to get the text to print more like this (again, capital letters and punctuation have been stripped since Floribunda doesn’t contain them yet) :

To determine how we want to space our font, we need to go back to the pangram we made and manually typeset.

This sentence was manually spaced letter by letter; what we want to do now is translate that into something the computer understands.

If, after reading the article on how type is set, you haven’t figured it out, fonts do not just “know” how much space to put in between each possible pair of letters. There would just be too many letter pairs to specify—over nine thousand just for the bare minimum ASCII set. Instead, each letter is given a pair of sidebearings which determine the width of a rectangle, and type is set by lining up a bunch of these rectangles. The space between two letters is determined by the right sidebearing of the first letter and the left sidebearing of the second letter, added together. So letter spacing is essentially finding the best sidebearings to put on each letter so that they will space nicely.

First we want to look at the space in between two vertical stems, like between ‘h’ and ‘i’. The optical spacing is marked in lighter pink, but because of the serifs, the actual spacing is much narrower, about 48 font units in this case (darker pink).

 If the spacing is negative, it’s a sign that your font is too tightly spaced. The top spacing might look fine, but the bottom version is much easier to read.

This becomes more and more evident as you decrease the font size. How easy is this paragraph to read?

Compared with this one?

In fact, overly tight letter spacing is a sign of a cheap font. Jus’ sayin’.

Either way, that space between the ‘h’ and the ‘i’ needs to be shared between the two letters, with slightly more going to the ‘i’ side, since it has two serif protrusions to the ‘h’s one. I broke it up 22–26 units.

Next we need to consider the spacing between round letters like ‘o’ and ‘e’, as well as the round sides of letters like ‘b’ and ‘d’. Although it’s something the opposite in sans serif type, in serif type, round letters generally need more space between them since they lack serifs to push them apart. Floribunda’s bowls take a spacing of 60 font units, which should be split evenly, with each letter receiving 30 font units of spacing on each side.

Then we have to consider what happens when a round letter occurs next to a stemmed letter. The word here looks best with 54 units in the stem–bowl pairing and 55 units in the bowl–stem pairing. But if you add the 30 unit bowl spacing to the 22 and 26 unit spacings on the ‘i’ and ‘n’, (the right side of the ‘i’ should get the same sidebearing as the right side of the ‘h’, at least initially, and similarly for the ‘n’) the letter spacing doesn’t add up to 54 and 55, respectively.

Since the stem–bowl spacing is too small, and the bowl–stem spacing too wide, an easy way to fix this is just to change the spacing distribution between the ‘h’ and the ‘i’. It only changes the stem–stem spacing by a single font unit (from rounding error), and fixes the stem and bowl spacing discrepancies.

More difficult compromises might have to be made regarding the diagonal letters ‘v’, ‘w’, and ‘y’. Because they have so much whitespace at their bottoms, they frequently need negative sidebearings to space them right.

This is perfectly fine, except they need to play nice with both stemmed and round letters. And the discrepancies can be significant.

In this case, we have no choice but to make a compromise, putting the sidebearings somewhere between what would be ideal with stems and what would be ideal with bowls.

Ultimately this is a job for kerning, a special part of a font stored in kern tables that tell the renderer to render certain problematic letter pairs closer or farther apart than they would normally be. Kern tables are a limited list of spacing exceptions stored in a font. Some fonts can contain hundreds, even thousands of kerns, though a very low or very high number of kerning pairs is a sign of a cheap font. A kern table might contain an entry to space ‘av’ closer and ‘vi’ farther apart than they would normally be. Kerning is considered “font polish”, and so it should usually be deferred to the end of font development.

But, kerning or no kerning, these six sidebearings we just resolved can be used as a basis to space a great deal of the lowercase alphabet. The ‘i’, for example, shares similar sidebearings with the ‘n’, ‘l’, and many other stemmed characters. In the next installment of this post, I’ll show you how to use fontforge to easily and accurately space the rest of the alphabet.

View part two »