Kerning is the space between two specific letters. When it is off, a word looks like it has a hole in it, or like two letters are about to collide. In body text the font takes care of it, but in big headlines, logos and all-caps labels a bad pair is the first thing people notice, even if they can't say why.
Spacing, kerning and tracking
- Spacing (sidebearings): the default room the type designer builds around every letter.
- Kerning: an adjustment for one specific pair, like AV or To, stored in the font's kerning table.
- Tracking (letter-spacing): the same adjustment added to every pair in a run of text.
So kerning fixes pairs and tracking changes texture. Mixing them up is the most common mistake: tightening the tracking of a whole headline to close one gap makes every other pair too tight.
The pairs that cause trouble
- Diagonal against diagonal: AV, VA, AW, WA, AY. The wedge between the strokes leaves a big triangle of white.
- Overhangs: T, V, W, Y and F next to lowercase letters (To, Ty, Yo, Wa). The lowercase letter has to tuck under the top of the capital.
- Round letters: o, c, e, O, C. They touch the gap at a single point, so they sit a little closer than straight letters like n or H.
- Punctuation: periods, commas and quotes after T, V, W and Y ("T.", "Y,").
How to judge it
Spacing is about area, not distance. The goal is that the white between every pair looks like the same amount of gray, even if the measured distances are different. Three habits help:
- Squint or blur the word: dark clumps and light holes jump out.
- Flip it upside down: you stop reading the word and start seeing shapes.
- Judge in threes: compare each letter with its neighbors on both sides, not one pair in isolation.
In Figma
Figma applies the font's kerning automatically. To adjust one pair, select the first letter of the pair and change its Letter spacing, or press Option + ← / → on Mac (Alt + ← / → on Windows). Letter spacing on a single character adds or removes space after it, which is exactly a kerning adjustment. Do it at the size the text will be used: kerning that looks right at 24px can look loose at 120px.
In CSS
Browsers apply the font's kerning table by default (font-kerning: auto, which some browsers switch off for small text). Keep it on, and only kern by hand in display text:
.headline { font-kerning: normal; }
/* one pair, e.g. the A in "AVATAR" */
.headline .tight { letter-spacing: -0.06em; }Use em, not px, so the adjustment scales with the font size. Wrapping single letters in spans is fine for a logo or one hero headline; for anything that changes often, choose a font with good kerning instead.
Tracking is a separate decision: large headlines usually want slightly negative tracking (around -0.01em to -0.03em) and all-caps labels want positive tracking (around 0.05em to 0.1em).
Practice
Kern Me gives you six words with one bad pair each and compares your eye with the kerning the font's designer built in. It takes two minutes, and after a few rounds you start seeing loose pairs everywhere.