Imagine you're reading a poster for a local pizza joint. Big, bold letters. Looks confident. But something's wrong — and it's not the pepperoni. The letters "AV" are practically touching each other while "nn" looks like it's had a row and stormed off to opposite ends of the room. That, dear reader, is a kerning disaster, and they're absolutely everywhere once you start looking.
Kerning is the process of adjusting the space between individual character pairs. Not all characters. Not even most characters. Specific. Individual. Pairs. Because here's the dirty truth that font designers know and the rest of the world ignores: the same amount of space between two letters doesn't look like the same amount of space depending on what those letters are.
The optical illusion at the heart of typography
Take the letters "H" and "I" side by side. Both vertical, both square-shouldered. Equal spacing looks equal. Fine. Now try "A" and "V". Their diagonal strokes lean toward each other like gossips at a wedding — leave standard spacing in place and there's a yawning chasm between them that makes the whole word look like it's falling apart. The eye doesn't measure space. It perceives it.
This is why type designers embed kerning tables into font files — essentially a lookup table of thousands of problematic letter pairings and exactly how much to nudge them closer or further apart. A well-kerned professional font might have upwards of 3,000 individual pair adjustments baked in. Comic Sans, presumably, has about four.
Kerning vs tracking vs leading — get them right
While we're at it: kerning is not tracking. Tracking adjusts the overall letter-spacing across an entire word or block of text uniformly. Kerning is surgical. One pair at a time. And neither of them is leading — that's the vertical space between lines, named after the actual strips of lead that hot-metal typesetters used to shove between rows of type. Yes, typography terminology is frozen in 1887 and nobody's fixing it.
- Kerning — space between specific letter pairs (surgical)
- Tracking — space across an entire selection (uniform)
- Leading — vertical space between lines (named after metal, not the element of surprise)
When kerning goes wrong in the real world
Bad kerning has torpedoed otherwise expensive design work for decades. The classic example — beloved of typography Twitter — is the infamous "FLICK" sign where the "LI" pair sits so tightly together that it reads as something rather different in certain typefaces. We'll let you work that one out yourself.
Then there's the kerning on "MEGAFLICKS" from a 2001 Wired article. Or virtually any van-written business name ever painted by someone who thought they'd save money by not hiring a designer. The combination of "CL" in all caps, depending on the font, can similarly create unwanted words. Kerning isn't just aesthetic — it's a legal matter, sometimes.
Does your web font handle it automatically?
Mostly, yes — and largely because browsers
are smarter than they used to be. Modern CSS includes font-kerning:
auto which is the default,
telling the browser to use the kerning tables embedded in
the font. For display type (anything big and important), you
can go further with text-rendering:
optimizeLegibility, which enables additional
OpenType kerning features. For body text at small sizes, you
can actually switch it off for performance — the differences
become imperceptible below about 14px anyway.
The upshot: if you're using a quality font with a decent kerning table, your browser handles the hard work. Where it falls apart is on cheap or free fonts with sparse kerning data, or on manually set display type where a human eye needs to make the call. Which brings us back to that pizza joint logo. Someone needs to have a word.