# Letter spacing: when to open up type and when to tighten it

[Canonical HTML page](https://gradiently.design/guide/letter-spacing)

A few hundredths of an em decide whether a label looks considered or cramped. Here is where to add space between letters, where to take it away, and where to leave it alone.

## The short version

- Letter spacing, also called tracking, is the even amount of space added or removed between every letter in a run of text.
- Kerning is different: it adjusts the space between specific pairs of letters, such as A and V, and is usually built into the font.
- All caps and small labels almost always need extra letter spacing, typically around 0.05em to 0.12em.
- Large headlines usually look better slightly tightened, often by 0.01em to 0.03em, because the font's default spacing is drawn for smaller sizes.
- Body text should normally be left at the font's default letter spacing.

**Letter spacing** (tracking) is the uniform space added or removed between all the letters in a word or line. The short rule: add letter spacing to all caps and small labels, tighten it slightly on large headlines, and leave body text at the font's default. Most spacing problems in real designs come from doing the opposite: capitals left tight, big headlines left loose, and paragraphs spaced out to fill a box.

Letter spacing is one of three spacing settings that shape how text reads. The other two are [line height and line length](https://gradiently.design/guide/line-height-and-line-length), and all three are introduced in [typography basics](https://gradiently.design/guide/typography-basics).

## Tracking vs kerning: what is the difference

The two words get used interchangeably, but they do different jobs. **Tracking** changes the spacing of a whole selection evenly. **Kerning** changes the space between one specific pair of letters, because some shapes leave awkward gaps when set at their default spacing: think of *AV*, *To*, *Ty* or *LT*.

| Question | Tracking | Kerning |
| --- | --- | --- |
| What it changes | Space between every letter in a selection | Space between one pair of letters |
| Who usually sets it | You, per style: labels, headlines, captions | The type designer, inside the font's kerning tables |
| When you touch it | Every time you set caps, labels or display type | Rarely: logos, large headlines, awkward pairs |
| In CSS | `letter-spacing` | `font-kerning`, on by default in most browsers |

Tracking is a style decision you make often. Kerning is a craft detail you check at large sizes.

Good fonts ship with thousands of kerning pairs, so at text sizes you rarely need to kern by hand. At headline and logo sizes, small gaps become visible, and manual kerning of a pair or two is worth the minute it takes.

## Why all caps need more letter spacing

Lowercase letters are designed to sit next to other lowercase letters: ascenders, descenders and round shapes create a varied outline that the eye reads as a word shape. Capitals are blocky and similar in height, so at default spacing they crowd into a solid bar. A small amount of extra tracking separates them and makes each letter easier to recognise.

How much depends on size. Tiny caps, like a label or eyebrow at 11 to 13 px, can take 0.08em to 0.12em. Caps at subheading size need less, around 0.04em to 0.06em. Very large caps in a headline may need none at all, or even a touch of tightening.

A portrait announcement post with a small spaced-out capital eyebrow above a large headline

A tracked-out eyebrow in capitals sits above a headline at normal spacing.

A portrait event poster with a spaced capital label and a headline in sentence case

Small capitals with extra letter spacing read as a label, not as shouting.

## When to tighten letter spacing

Fonts are spaced for a particular range of sizes, usually text sizes. Blown up to 60 or 100 px, the same spacing looks airy and the word stops reading as one shape. Tightening large headlines slightly, often by 0.01em to 0.03em, pulls them back together. Fonts with an optical size axis or a separate Display cut often do this for you, which is one of the benefits covered in [variable fonts](https://gradiently.design/guide/variable-fonts).

Tighten carefully. Letters that touch, or round letters that start to merge, are a sign you have gone too far, especially with bold weights. Check the pairs at the edges of what the font does well, like *rn* (which can read as *m*) and *cl* (which can read as *d*).

### Avoid

- Default spacing on tiny capital labels
- Loose tracking on a 96 px headline
- Tracking body text to fill a line or box
- Negative tracking on small text to fit more words

### Do

- 0.05em to 0.12em on small caps and labels
- A slight tightening on very large type
- Default spacing for paragraphs
- Shorter copy or a narrower font when space runs out

## Letter spacing in CSS

Set `letter-spacing` in `em`, not pixels, so the spacing scales with the font size. A value that suits a 12 px label will then still be proportionally right if the label grows to 14 px. See MDN's reference for [letter-spacing](https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing) for the full behaviour.

```css
body {
  letter-spacing: normal; /* leave paragraphs alone */
  font-kerning: normal;
}

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

.button {
  font-size: 0.875rem;
  letter-spacing: 0.02em;
}

.display {
  font-size: clamp(3rem, 8vw, 6rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
}

/* Tracking also adds space after the last letter.
   Balance it when centring a short label. */
.eyebrow--centred {
  padding-inline-start: 0.1em;
}
```

Positive tracking for small caps, a little for buttons, a slight tightening for display type, and nothing for body text.

> **The trailing space** Browsers add letter spacing after the last character too. On a centred, heavily tracked label, that pushes the text slightly left. A matching bit of padding on the start side, as in the code above, rebalances it.

## Letter spacing for small text, labels and numbers

Small text benefits from a little extra space, because at small sizes letters blur together, especially light type on a dark ground. Many font families already open their spacing at small optical sizes. If yours doesn't, 0.01em to 0.03em on captions and fine print can help. Numbers in tables benefit more from tabular figures (`font-variant-numeric: tabular-nums`) than from tracking, because they line up in columns.

Two more cases need care. Connected scripts, such as Arabic, should not be letter spaced, because spacing breaks the joins between letters. And lowercase text should rarely be tracked out at all: spaced lowercase breaks up the word shapes that make it easy to read.

A square stat post with a large number and a small spaced capital label above it

Large numbers set slightly tight, with a small tracked label above them, keep a stat post compact and clear.

## A letter spacing starting point for every role

Use these as defaults, then adjust by eye for your font. Look at the result at the real size, on a real screen, because spacing that looks right zoomed in on a design canvas often looks different at 100 percent.

| Text role | Typical size | Letter spacing |
| --- | --- | --- |
| Eyebrow or label, caps | 11 to 13 px | 0.08em to 0.12em |
| Button text | 14 to 16 px | 0 to 0.02em |
| Body text | 16 to 18 px | Font default |
| Subheading, caps | 18 to 24 px | 0.04em to 0.06em |
| Headline | 32 to 56 px | 0 to -0.01em |
| Display headline | 64 px and up | -0.01em to -0.03em |

Starting values for Latin text. Wider fonts need less added space; condensed fonts can take more.

If your design sits on a gradient or photo, spacing also affects legibility: thin, tightly tracked letters disappear faster against a busy field than open ones. Pair these settings with the advice in [text on a gradient](https://gradiently.design/guide/text-on-gradient) and [font pairing](https://gradiently.design/guide/font-pairing) for designs that read at a glance.

## FAQ

### What is the difference between letter spacing and kerning?

Letter spacing, or tracking, changes the space between every letter in a selection evenly. Kerning adjusts the space between one specific pair of letters, such as A and V, and is mostly built into the font.

### How much letter spacing should all caps have?

Around 0.05em to 0.12em for small capitals such as labels and eyebrows, and less as the size grows. Very large capital headlines may need none.

### Should body text have letter spacing?

Usually not. Fonts are spaced for text sizes by their designers, so the default spacing is normally the most readable for paragraphs.

### Why use em for letter-spacing in CSS?

An em value scales with the font size, so the spacing stays proportional when the text gets bigger or smaller. A pixel value stays fixed and quickly becomes too tight or too loose.