# Tracking vs kerning vs leading: the spacing trio

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

Three words for three different gaps. Mix them up and you end up fixing the wrong one. Here is what each controls, which to reach for first, and the numbers that work as a starting point.

## The short version

- Tracking changes the space between every letter in a line or block of text at once.
- Kerning changes the space between one specific pair of letters, such as A and V.
- Leading is the vertical distance between lines of text, called line height in CSS and most apps.
- Set leading and tracking for a whole style first, then kern individual pairs only in large type.
- Large headlines usually want slightly tighter tracking and leading, while all capitals and small text want more tracking.

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.

| Term | What it changes | Scope | Called in CSS |
| --- | --- | --- | --- |
| Tracking | Space between all letters | A word, line or paragraph | `letter-spacing` |
| Kerning | Space between one pair of letters | Two characters | `font-kerning` (on or off only) |
| Leading | Space between lines | A paragraph or text box | `line-height` |

The spacing trio at a glance. Two run horizontally, one vertically, and only one works on a single pair.

## 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](https://gradiently.design/guide/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](https://gradiently.design/guide/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](https://gradiently.design/guide/line-height-and-line-length) explains why.

A portrait post with a spaced capital eyebrow reading NEW SEASON above a tightly set headline reading Spring collection now in

Where each setting belongs: open tracking on the capital eyebrow, tight tracking and leading on the headline, normal spacing on the detail line.

A portrait editorial post with a small tracked label reading ISSUE 04 and a title reading Notes from the studio

An editorial layout. Its small type, the label and the subtitle, reads more calmly with generous leading and slightly open tracking.

## 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. **Choose size and weight** Spacing depends on both. Set them first, because a heavier weight or bigger size needs different values.
2. **Set leading** Decide how tightly the lines stack. Headlines go tighter, paragraphs looser.
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. **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. **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.

| Text role | Tracking (CSS) | Tracking (Adobe units) | Leading |
| --- | --- | --- | --- |
| Body text, 14 to 20 px | 0 | 0 | 1.4 to 1.6 |
| Headline, 48 px and up | -0.01em to -0.03em | -10 to -30 | 1.0 to 1.15 |
| Huge display type, 120 px and up | -0.02em to -0.04em | -20 to -40 | 0.9 to 1.05 |
| All capital labels | 0.06em to 0.12em | 60 to 120 | 1.2 to 1.3 |
| Small text under 13 px | 0.01em to 0.02em | 10 to 20 | 1.4 to 1.5 |

Tracking in CSS em and in Adobe's thousandths of an em say the same thing: 0.05em equals 50 units. Leading is shown as a multiple of font size.

### Common mistakes

- Kerning every pair when the tracking is wrong
- Tracking body text tighter to fit more words
- Default leading on a three line headline
- Capitals at zero tracking
- Different tracking on every headline in a set

### Better

- Fix tracking first, then kern what remains
- Edit the copy instead
- Pull headline leading down to about 1.1
- Open capitals by 0.06em or more
- One value per style, written down in your brand rules

## Tracking, kerning and leading in CSS

```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;
}
```

Write `line-height` without a unit so it scales with the font size, and `letter-spacing` in em for the same reason.

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

## FAQ

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

Tracking changes the spacing between all letters in a selection. Kerning changes the spacing between one specific pair of letters.

### Is leading the same as line height?

Yes, in practice. Leading is the traditional print term and line height is what CSS and most design apps call the distance between lines.

### Should I adjust tracking or kerning first?

Tracking first. It sets the overall spacing; kerning then fixes the few pairs that still look uneven, and only in large type.

### What is tracking called in CSS?

`letter-spacing`. Write it in em, such as `0.05em`, so it stays proportional when the font size changes.

### What line height should body text have?

Around 1.4 to 1.6 times the font size for body text, and around 1.0 to 1.15 for large headlines.