# Kerning: fixing the gaps between letters

[Canonical HTML page](https://gradiently.design/guide/kerning)

Most text never needs a manual touch, because good fonts carry their own kerning. Large headlines and wordmarks are different: at that size every awkward gap shows. Here is how to find them and fix them.

## The short version

- Kerning is the adjustment of space between one specific pair of letters, such as A and V or T and o.
- Well made fonts include hundreds or even thousands of kerning pairs, so ordinary body text rarely needs manual kerning.
- Manual kerning matters most in large headlines, logos and wordmarks, where uneven gaps become visible.
- The aim of kerning is even visual space between letters, not equal measured distance.
- In CSS, `font-kerning: normal` turns on a font's built-in kerning, and browsers usually apply it by default.

**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.

| Pair | Why it gaps | Usual fix |
| --- | --- | --- |
| AV, VA, AW, WA | Two diagonals lean away from each other | Pull together noticeably |
| To, Ta, Te, Ty | The arm of the T hangs over empty space | Tuck the lowercase under the arm |
| LT, LY, LV | The foot of the L leaves a hole above it | Pull together, often a lot |
| Yo, Ya, Wo, Vo | Diagonal capital over a round lowercase | Tuck in like the T pairs |
| P., F., T., Y. | Punctuation sits under an overhang | Move the full stop or comma in |
| r and n, r and m | Can merge into one letter when tight | Open slightly if they touch |
| f followed by ), ? or ' | The hook of the f collides | Push apart a touch |

The pairs that cause most kerning problems. Fonts already adjust many of these; check them by eye at headline size anyway.

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](https://gradiently.design/guide/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.

A portrait poster with the single word WAVE set large in capitals with even letter spacing

A word built almost entirely from diagonals, the hardest case for spacing. Check that W, A and V nest evenly before you export.

A portrait event post with the headline Tonight at The Yard set large over a gradient

To, Th and Ya all appear in one short headline. At this size each pair is worth a look before export.

## 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. **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. **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. **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. **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. **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. **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.

### Avoid

- Kerning body text letter by letter
- Measuring gaps with a ruler
- Kerning before setting tracking
- Tightening until letters touch
- Trusting a free font's spacing without checking

### Do

- Leave body text to the font's own kerning
- Judge by eye, three letters at a time
- Set tracking, then fix individual pairs
- Keep a hairline of space, especially r and n
- Check AV, To, LT and Yo in every headline

## Kerning in CSS

Browsers apply a font's kerning automatically for most text, but you can make it explicit. The [font-kerning](https://developer.mozilla.org/en-US/docs/Web/CSS/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.

```css
/* 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;
}
```

Use em units for manual nudges so the correction scales with the type. Only hand kern headlines; never body copy.

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](https://gradiently.design/guide/tracking-vs-kerning) explains how the two work together with leading, and [letter spacing](https://gradiently.design/guide/letter-spacing) gives starting values for capitals, labels and headlines.

For more on making big type look deliberate, see [display fonts](https://gradiently.design/guide/display-fonts) and [typography basics](https://gradiently.design/guide/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.

## FAQ

### What is kerning in typography?

Kerning is the adjustment of space between two specific letters, such as A and V, so that a word looks evenly spaced.

### What is the difference between kerning and tracking?

Kerning changes the space between one pair of letters. Tracking changes the space between all the letters in a line or block at once.

### Do I need to kern body text?

Rarely. Good fonts include their own kerning pairs, which handle body text well. Save manual kerning for headlines, logos and large display type.

### Should I use metric or optical kerning?

Use metric for a well made font, since its pairs were set by the type designer. Try optical when a font's built-in kerning is poor or you are mixing fonts.

### How do I kern text in CSS?

`font-kerning: normal` turns on the font's built-in pairs. To adjust one pair, wrap a letter in a span and nudge it with a small negative margin in em units.