Tracking vs kerning vs leading: the spacing trio

In tracking vs kerning, the difference is scope. Tracking adjusts the space between every letter in a selection, so a whole headline opens up or tightens evenly. Kerning adjusts the space between one specific pair, such as the A and V in WAVE, to fix a gap the font left behind. Leading, the third of the trio, has nothing to do with letters side by side: it is the vertical space from one line of text to the next.

What is tracking in typography

Tracking is a uniform change. Select a line, add tracking, and every gap grows by the same amount. It is the tool for changing the texture of text: airy and formal, or dense and punchy. In design apps it is measured in thousandths of an em (Adobe) or as a percentage of the font size (Figma), and in CSS as letter-spacing, best written in em so it scales with the type.

Three situations call for it. Large headlines usually look loose at their default spacing, so a little negative tracking pulls them together. All capitals look cramped, because capitals were designed to sit beside lowercase letters, so they need positive tracking. And very small text, such as labels and legal lines, reads better with a touch more air. Letter spacing covers each case in detail.

What is kerning

Kerning is a local repair. Some letter pairs leave a visible hole or a collision even in a well spaced font: AV, To, LT, Yo, P followed by a full stop. Fonts include a table of these pairs and adjust them automatically, so for body text you can leave kerning alone. In headlines, logos and wordmarks you may still need to adjust a pair or two by hand. Kerning has the full list of troublesome pairs and a method for fixing them by eye.

What is leading in typography

Leading takes its name from the strips of lead that printers placed between lines of metal type. Today it is line height: the distance from one baseline to the next. Too little and ascenders crash into descenders; too much and the lines drift apart into separate thoughts. As a rule, the longer the line and the smaller the text, the more leading it needs. Line height and line length explains why.

Which to change first: tracking, kerning or leading

Work from the largest decision to the smallest. Leading and tracking define the style; kerning tidies up what is left. Change them in the wrong order and you will undo your own work.

1. 1

   Choose size and weight

   Spacing depends on both. Set them first, because a heavier weight or bigger size needs different values.

2. 2

   Set leading

   Decide how tightly the lines stack. Headlines go tighter, paragraphs looser.

3. 3

   Set tracking for the style

   Apply one tracking value to the whole headline style, label style or body style. Keep it consistent across the design.

4. 4

   Kern the pairs that still gap

   Only in large or permanent type. Look for AV, To, LT and similar pairs and adjust them one at a time.

5. 5

   Check at real size

   View the result at the size people will see it. Spacing that looks right zoomed in can look loose on a phone.

Starting values for tracking and leading

These are sensible defaults, not laws. Fonts differ, and a condensed display face behaves nothing like a wide geometric sans. Use them to start, then trust your eye.

Tracking, kerning and leading in CSS

:root {
  font-kerning: normal; /* use the font's own pairs */
}

body {
  font-size: 1.0625rem;
  line-height: 1.55;      /* leading */
  letter-spacing: 0;      /* tracking */
}

h1 {
  font-size: clamp(2.5rem, 6vw, 5rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
}

.eyebrow {
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

Keep these values in one place so every page uses the same spacing for the same role. That is the heart of a typography system. If you design social posts rather than web pages, the same idea applies: decide the spacing once, write it into your brand rules and reuse it. In Gradiently, the brand kit holds your heading and body fonts and the Designer applies it when it lays out new sizes, so the type stays consistent from a square post to a story.