Kerning

Now that we know how important white space is, let's learn how to see it and create it. Good spacing is a telltale sign that you have selected a well-designed typeface. But what is good spacing? A typeface is well spaced when letter pairs, words, sentences, and paragraphs form an even color. They should appear an even gray without any light or dark spots. The right amount of space is different for every typeface as it is dependent on form.

In the days of metal type, each font was cast with the right amount of space. Some letters would hang off the block, the overhanging part was called a kern. Kerning as we know it was impractical in metal type. A typesetter would have to alter the physical block to reduce the space and therefore the only practical solution was to increase the spacing by inserting a spacer. A typesetter would only reduce the spacing on extreme problems like the AV pair. Because of this, early type had looser spacing than we are accustomed to today. If you want your type to look 'classic' you can loosen up the spacing to mimic early printing.

When type went digital, a font could be created with relative spacing or spacing specific to ranges of point sizes. We can control this space by kerning it. Kerning is the adjustment of space between two characters; this is why you will often hear typographers refer to kerning pairs. Kerning pairs in a font adjusts the spacing between character pairs — a fonts built in kerning. Some fonts have 500 kerning pairs built in and a pro font may have thousands. Therefore, the level of manual kerning is completely dependent on the typeface and the size of your type. There is a reason kerning was placed under the Word chapter and not Text. Generally, kerning is something we do when setting display type. We track running text and kern display text.

General Rules

• The number one rule: less is more. Spacing should be invisible. Many of the finer elements of typography share this rule; you actually want your efforts to go unnoticed by the reader. In terms of spacing this means not too tight or too loose.
• The point size of your type informs the space. Type needs looser spacing at text sizes than display sizes. If a text face is too tight it will clog up in print and join on screen.
• It is common to set a sans serif face tighter; this is because we don't have to worry about serifs colliding, joining, or clogging.

Internal Spacing

Spacing is a two part process in typeface design. First, spacing is set by sidebearings; then kerning is added to address problematic letter pairs.

Sidebearings

From metal type until today, sidebearings — the space or padding around a glyph — set a character's initial letter-spacing. Each character has a left and right bearing. When two letters sit next to each other, the sidebearings define the space between the two characters. In digital type, sidebearings are free from the physical block; they can be adjusted to any width. Because there are many different shapes in a typeface, there are many different sidebearings.

We will not get into setting up sidebearings; this lesson is not about typeface design but typesetting. The point you want to take away from this is that good spacing, especially in a text face, is within the typeface you select. Therefore, knowing when a face has good internal spacing is vital to typeface selection.

The search for good spacing

A fonts spacing can be tested by looking at a particularly problematic groups of letters. There are two widely used methods, one from Stephen Moye and another from Emil Ruder. I prefer Ruder's test as it truly measures the overall quality of spacing by examining color. Problematic words in the left column are contrasted against non-problematic words in the right column. The trick to using this system is to set your point size at the size you will be using. The following app lets you pick a font from your system and set a point size to measure the quality of spacing.

However, no matter how good a typeface design may be, sidebearings alone can not resolve the color. Certain pairs are problematic, especially at display sizes, and may need to be manually kerned.

Learn to Kern

Kerning is a lot like a game where you adjust characters that appear too open or too tight, and like a game, it takes practice and experience to master. Luckily there are some tricks that can help get you to the top of your game.

Units

In digital typography, kerning is applied to letter pairs as a positive or negative number that will increase or decrease spacing. This number represents fractions of an em, usually 1/1000 of an em. Typically a kerning value of 15 means an increase of 0.015em.

Kern in groups

In order to kern you must first understand the spatial relationship between characters. In type design, there are methods we can use to help see the spacial relationships that exist between characters. Every typeface has three main sidebearings:

The spaces get slightly smaller in each relationship to achieve optical spacing. The reason this is important to kerning is that similar letterforms have similar spacing. OpenType fonts, rather than a table of kerning pairs, use class-based kerning. Kerning is set by groups of similar letterforms that share the same internal spacing. What this means for us is that groups of characters should have the same spacing. It wasn't until I designed my first typeface that I became a player in the kerning game. We already defined a typeface as a group of stylistically related characters, but we can take that further by saying it is a group of groups of stylistically related characters.

Know your enemy

The most problematic groups to space are open-sided and diagonals. Here is a list to keep in the back of your head:

• Diagonal-to-diagonal: AV
• Open-sided-to-round: LO
• Diagonal-Square: VE (watch the serifs)
• Capital T-to-lowercase: To (T=tuck)
• Unusual Combinations: Vs Ws Wx Vz

When we manually kern we mostly reduce the space between characters…but not always. The classic kerning example is the space between a capital A and V. The internal spacing of these two are usually spaced to align their diagonal strokes with the vertical strokes in the adjacent letter. However, when A and V are set next to each-other this space is often too open. We reduce this space, kern it, to be optically correct. This is the most important thing to know about kerning, it is a game of optical balance.

Enough talk, let's kern something.

TotallyType has kept me so busy my grass has grown too high. Consider this example, MANY YAWN AT MY LAWN, a line of text with more diagonal forms than you want to see.

• Blur your eyes.

  

  This allows you to focus on white space of the letterforms without becoming distracted by the characters themselves. Notice how the space between the YA and AW pairs are too loose.

• Turn the type upside-down.

  

  This allows you to focus on the form of the characters rather than getting distracted by the actual word or characters. Notice how the space between the WN and AT pair is too tight.

• Be consistent. If you kern a pair kern all instances of that pair. This is especially vital in display type or headlines, at large sizes any variance is obvious. Let's kern the AT, YA and two AW and WN pairs we found to be problems.

  

  Looks much better!

  

The Un-kernable Web

Kerning is possible but not very practical on the Web. Therefore, it is vital that you select a font with good internal spacing when setting Web type. However, the Web is not a complete no Kern zone; both the font-kerning and text-rendering (when set to optimizeLegibility) CSS property enable a webfonts built-in kerning. When using OpenType, like this website does, font-kerning allows you to turn off the built-in kerning and manually kern using the letter-spacing property.