Kerning & Spacing: The Craft of Letter Fit

It helps to think of these as a stack, applied in order. Side bearings set the baseline rhythm for every possible letter combination at once: a single number per side, per glyph, that has to work reasonably well next to anything. Kerning then steps in for the handful of pairs where "reasonably well" isn't good enough, nudging specific combinations closer or further apart. Tracking, finally, scales everything at once, uniformly, after the font has already done its job. It's a document-level decision, not a font-level one.

The practical difference: a font's designer controls the first two, permanently, once, for everyone who uses the font. Whoever is setting a headline or a paragraph controls the third, per situation, every time. Confusing the two is a common mistake: reaching for tracking to fix what's actually a bad kerning pair, or vice versa.

Every glyph in a font has an advance width: the total horizontal distance the cursor moves after typing it. That width is made of three parts: a left side bearing (empty space), the visible ink of the letterform itself, and a right side bearing (more empty space). The type designer sets both bearings by eye, glyph by glyph, aiming for one thing: every letter should look like it has roughly the same amount of air around it, next to any other letter, without the text ever being measured.

Side bearings are a compromise: one pair of numbers that has to work acceptably next to every other letter in the alphabet. For most letter combinations that's good enough. For a handful of combinations, usually involving diagonal or unusually shaped letters, the default spacing leaves a gap that reads as visibly too wide or too narrow. Kerning is the fix: a table of specific pairs, each with its own spacing adjustment, layered on top of the default bearings just for that combination.

Early digital fonts kerned pairs one at a time, by hand: tens of thousands of combinations in a large character set, each set individually. Modern font production almost always uses kerning classes instead: letters that behave the same way on a given side get grouped together: a class of round rights like C O G Q, a class of diagonal lefts like A V W Y, and a single kerning value is set between two classes rather than between every individual pair inside them. A type designer might define a few hundred class pairs and let the font compiler expand them into the thousands of individual pairs the font actually ships with. Autokerning tools can generate a reasonable first pass by comparing glyph outlines directly, but a trained eye still goes through and adjusts the results. Software is good at measuring, not yet reliably good at judging what looks right.

Tracking (called letter-spacing in CSS) adds or removes the same amount of space after every letter, uniformly, across a whole run of text. Unlike side bearings and kerning, it isn't stored in the font at all. It's applied by whoever is setting the text, which means the same font can be tracked differently in a headline, a logo, and a paragraph without ever being re-exported.

There's no single correct value. It depends on size, weight, and case. A few practical patterns type designers and typographers tend to agree on: tighten tracking slightly for large, bold display type and logotypes, where letters read as one solid shape rather than individual words. Open it up for all-capital text, especially at small sizes, where legibility depends on the reader distinguishing letters that would otherwise crowd together. And leave ordinary lowercase running text alone. Its rhythm was already tuned by the type designer, and uniform tracking on top of well-kerned lowercase text almost always makes it harder to read, not easier.

A close relative of tracking, but narrower in scope: word-spacing in CSS adjusts only the width of the space character itself, leaving letter-to-letter gaps untouched. It's used far less often than tracking, mostly in justified text, where a layout engine stretches or compresses word gaps to make every line reach the same width, or in display type where a designer wants more breathing room between words without loosening up the letters inside each word.

The three layers, where each one lives, and how to control it.