Kerning: fixing the gaps between letters

Kerning is the adjustment of space between two specific letters so that a word looks evenly spaced. Some pairs of shapes leave a hole when they sit side by side: the diagonal of an A next to the diagonal of a V, the overhang of a T above a small o. Kerning pulls those pairs closer, or occasionally pushes a crowded pair apart, until the gaps look the same to the eye. It is different from tracking, which changes the spacing of every letter in a line at once.

Why some letter pairs need kerning

Every letter in a font sits in an invisible box with a little space built in on each side. That works for most combinations: n next to o, h next to e. It fails where shapes are open on one side. Diagonals, overhanging arms and round letters next to straight ones all create pockets of white that look like a missing letter.

The r and n case is the source of an old typographer's joke: set the word kerning too tightly and it reads as keming. It is a good reminder that kerning works in both directions.

When to kern by hand

Good fonts ship with a kerning table, a list of pairs and how much to adjust each, so body text and most interface type are already handled. Manual kerning earns its time when type gets big or permanent.

• Headlines above about 60 px on screen, where a 2 px gap becomes a visible hole.
• Logos and wordmarks, which will be seen thousands of times at every size. Wordmark design goes further.
• All capitals, where diagonals like A, V, W and Y line up more often.
• Poster and thumbnail lines, where three or four words carry the whole design.
• Free or display fonts with thin kerning tables, which may leave common pairs unadjusted.

How to kern a headline or wordmark by eye

The goal is even area between letters, not equal measured distance. Two straight stems, like H and I, need the most space between them. A straight next to a round, like H and O, needs a little less. Two rounds, like O and C, need the least. Diagonals and overhangs need the most correction of all.

1. 1

   Set the tracking first

   Decide the overall spacing of the line before touching pairs. Kerning a line and then changing its tracking undoes half your work.

2. 2

   Work in threes

   Look at three letters at a time and adjust the middle one so the two gaps either side of it match. Then slide along one letter.

3. 3

   Turn it upside down

   Flip the word or view it mirrored. Once you can no longer read it, you see shapes and gaps instead of letters.

4. 4

   Blur or squint

   A slight blur turns the spaces into grey blobs. Any blob noticeably lighter or darker than its neighbours is a pair to fix.

5. 5

   Check it small and large

   View the word at the size it will be used, and at the smallest size it will appear. A wordmark kerned only at poster size can clot at favicon size.

6. 6

   Leave it and look again

   Come back after a break. Kerning by eye drifts if you stare too long, and fresh eyes spot the pair you squeezed too far.

Most design tools let you kern by placing the cursor between two letters and nudging with a keyboard shortcut. In Adobe apps the unit is a thousandth of an em, so a value of minus 40 moves the pair closer by 4% of the type size, whatever that size is.

Metric vs optical kerning

Many layout tools offer two automatic modes. Metric kerning uses the pairs the type designer built into the font. Optical kerning ignores those and calculates spacing from the outlines of each letter. Metric is the better default for a well made font, because a person made those decisions. Optical can rescue a font with a poor or missing kerning table, and helps when you mix two fonts in one word.

Kerning in CSS

Browsers apply a font's kerning automatically for most text, but you can make it explicit. The font-kerning property switches the built-in pairs on or off. CSS has no property for adjusting one specific pair, so for a single headline or logo the usual route is to wrap a letter in a span and nudge it with a negative margin or letter spacing.

/* Use the font's own kerning pairs everywhere */
body {
  font-kerning: normal;
}

/* Hand kerning one pair in a large headline: <h1>A<span class="k-av">V</span>A</h1> */
.k-av {
  margin-inline-start: -0.06em;
}

/* Monospaced code should never be kerned */
code, pre {
  font-kerning: none;
}

If you want to change the spacing of a whole line rather than one pair, that is tracking, set with letter-spacing. Tracking vs kerning explains how the two work together with leading, and letter spacing gives starting values for capitals, labels and headlines.

For more on making big type look deliberate, see display fonts and typography basics. On a gradient or textured background, spacing is only half of legibility: a well kerned word can still break up where the colour behind it changes. A Gradiently Mark moves its calmest area behind your words and picks light or dark ink per line, so a carefully spaced headline reads evenly from its first letter to its last.