Kerning, Tracking, and Leading: The Three Spacing Controls Every Designer Needs

You pick a great typeface, set the right size, and the text still looks off. The headline "WAVE TOYS" has a gap between the "A" and the "V" big enough to drive through. The small uppercase labels look cramped. The paragraphs feel either crowded or like a list of disconnected lines. None of these are problems with the font. They're spacing problems.

Typography has three basic spacing controls. Kerning adjusts the space between specific pairs of letters. Tracking adjusts the space evenly across a whole run of text. Leading sets the vertical distance between lines. Each one solves a different problem, and confusing them is one of the most common reasons type looks amateurish.

This post explains what each control does, how it maps to CSS, and sensible starting values. Several of these topics have their own dedicated posts, which are linked where they go deeper.

The Three Controls at a Glance

Control	What it changes	Scope	CSS property
Kerning	Space between two specific letters	One pair at a time	font-kerning
Tracking	Space between all letters, evenly	A word, line, or block	letter-spacing
Leading	Distance from one line to the next	A paragraph or block	line-height

A useful mental model: kerning fixes individual awkward gaps, tracking changes the overall density of the text, and leading controls how lines stack.

Kerning

What Kerning Is

Every glyph in a font has a fixed width, including some built-in space on either side, called sidebearings. Most of the time, those widths produce even spacing. But certain letter combinations create gaps or collisions because of their shapes.

Think about "AV." The diagonal strokes of both letters leave a big triangle of empty space between them, so the pair looks farther apart than, say, "HI." Other classic problem pairs include "To," "Wa," "LT," "Yo," "r." and "P," (P followed by a comma). Kerning fixes these by moving specific pairs closer together, or occasionally farther apart.

Type designers build kerning into the font as a table of pair adjustments. A well-made text font can contain thousands of kerning pairs. That data is the font's metric kerning, and it's what you get on the web by default.

Kerning in CSS

Browsers apply the font's kerning automatically. The property that controls it is font-kerning:

body {
  font-kerning: auto; /* the default: browser decides */
}

.headline {
  font-kerning: normal; /* always apply the font's kerning */
}

.code-sample {
  font-kerning: none; /* never kern, useful for monospaced alignment */
}

With auto, browsers may choose to skip kerning in some situations, historically for very small text on some platforms. Setting font-kerning: normal on headings and body text makes sure the font's kerning is always used. There's rarely a reason to turn it off, except in monospaced contexts where every character should occupy the same cell.

Manual Kerning

CSS doesn't have a pair-kerning property. If a specific pair in a logo or large headline still looks wrong, you can wrap one letter in a span and nudge it with a small negative letter-spacing or margin:

<h1 class="logo">W<span class="kern-tight">A</span>VE</h1>

.logo .kern-tight {
  letter-spacing: -0.04em;
}

Keep this for logos and one-off display text. In body text, the font's kerning is much better than anything you'd do by hand, and spans split words for screen readers in some cases. The differences between the font's built-in kerning and automatic kerning generated by design tools are covered in optical kerning vs metric kerning.

Tracking

What Tracking Is

Tracking adds or removes the same amount of space between every letter in a selection. Unlike kerning, it doesn't care which letters are next to each other. It makes text looser or tighter as a whole.

Fonts are spaced for a particular size range, usually body text. When you move far outside that range, the default spacing stops looking right:

• Large display text tends to look too loose, because the fixed sidebearings become big visible gaps at large sizes. A small negative tracking tightens it up.
• Small text can look cramped, because the letters run together. A little positive tracking helps.
• All-caps text almost always needs positive tracking. Capitals are designed to sit next to lowercase letters, not each other.

Tracking in CSS

In CSS, tracking is letter-spacing. Always set it in em, so it scales with the font size:

.hero-title {
  font-size: clamp(2.5rem, 6vw, 5rem);
  letter-spacing: -0.02em;
}

.body-small {
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
}

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

A fixed value like letter-spacing: 2px is too much at 12px and barely noticeable at 48px. Ems keep the proportion consistent across a fluid type scale.

Converting Design Tool Values

Design tools express tracking in different units, which is a common source of mismatches between a design and the built page:

Tool or convention	Unit	Example	CSS equivalent
InDesign, Illustrator	1/1000 em	25	letter-spacing: 0.025em
Figma (percent)	Percent of font size	-2%	letter-spacing: -0.02em
Figma or Sketch (pixels)	Pixels at that size	0.5px at 20px	letter-spacing: 0.025em

To convert a pixel value, divide it by the font size it was specified at. That gives you an em value that will keep working when the size changes.

Things to Know About letter-spacing

• Most browsers add the space after every character, including the last one. That makes centered, tracked text sit slightly left of center. If it's noticeable in a button or badge, compensate with a matching padding-inline-start or a small negative margin-inline-end.
• Optional ligatures turn off when letter-spacing isn't zero. That's correct behavior, so letters don't end up spaced unevenly.
• Tracking body text heavily hurts readability. Readers recognize words partly by their shape. Spreading letters apart weakens that.

How much to track capitals is a big enough topic for its own post: see letter-spacing all-caps text.

Leading

What Leading Is

Leading (pronounced "ledding") is the vertical distance between lines of text. The name comes from metal type, where printers added thin strips of lead between lines to space them out. In digital typography, leading usually means the full distance from one baseline to the next.

Leading affects both readability and the feel of a page. Too tight, and the eye has trouble finding the start of the next line, while ascenders and descenders from neighboring lines crowd each other. Too loose, and lines stop reading as a paragraph and start looking like separate items.

Leading in CSS

In CSS, leading is line-height. Use a unitless number, which is a multiplier of the element's own font size:

body {
  font-size: 1.0625rem;
  line-height: 1.6;
}

h1,
h2 {
  line-height: 1.15;
}

.caption {
  font-size: 0.875rem;
  line-height: 1.45;
}

A unitless value is inherited as the ratio, so a child with a larger font size gets proportionally larger line height. A value with units, like 24px or 1.5em, is computed once on the parent and inherited as a fixed length, which causes cramped headings inside containers with a fixed line height.

CSS distributes the extra space evenly above and below the text on each line, called half-leading. That's why a single line of text with a large line-height has space above it as well as below, which sometimes makes headings look misaligned with neighboring elements.

Starting Values

Text type	Typical line-height
Body paragraphs	1.5 to 1.7
Small text, captions	1.4 to 1.5
Subheadings	1.2 to 1.35
Large headings	1.0 to 1.2
UI labels, buttons	1.2 to 1.3 (single line)

General rule: the larger the text, the smaller the ratio. The longer the line, the more leading it needs. Choosing a body line height for a specific font and measure is covered in detail in how to choose the right line height for body text.

For accessibility, WCAG 2.1 success criterion 1.4.12, Text Spacing, requires that content still works when users override line height to at least 1.5 times the font size, paragraph spacing to 2 times, letter spacing to 0.12 times, and word spacing to 0.16 times. You don't have to use those values, but your layout must not break when someone applies them. Avoid fixed heights on text containers so the text can grow.

How the Three Work Together

The three controls affect each other, so adjust them together rather than in isolation.

• Tracking and leading affect perceived density. Tight tracking with loose leading creates strong horizontal bands. Loose tracking with tight leading makes text look like a gray block. Body text usually wants default tracking and generous leading.
• Size changes all three. As text gets larger, reduce tracking and leading ratios. As it gets smaller, increase both slightly.
• Kerning comes first. Tracking adds the same space to every pair, so a badly kerned pair stays badly kerned no matter how you track. Make sure kerning is on before adjusting tracking.

Here's a heading and body combination that adjusts all three:

.article h1 {
  font-size: clamp(2.25rem, 1.5rem + 3vw, 4rem);
  font-kerning: normal;
  letter-spacing: -0.025em;
  line-height: 1.08;
  text-wrap: balance;
}

.article p {
  font-size: 1.125rem;
  font-kerning: normal;
  letter-spacing: 0;
  line-height: 1.65;
  max-width: 68ch;
}

.article .kicker {
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  line-height: 1.3;
}

The heading is large, so it gets tightened in both tracking and leading. The body text is left at its designed tracking with generous leading. The small capitals in the kicker get extra tracking to open them up.

A Note on Word Spacing

There's a fourth, less-used control: word-spacing, which adjusts the space between words. You'll rarely need it, but it's useful when heavy tracking makes word gaps look too small relative to the letter gaps. If you add letter-spacing: 0.15em to a line of capitals, a little extra word-spacing can keep the words distinct.

.spaced-caps {
  letter-spacing: 0.15em;
  word-spacing: 0.1em;
}

Common Mistakes

• Using tracking to fix kerning. Tracking spreads every pair equally. It won't close the gap in "AV" without loosening everything else.
• Setting letter-spacing in pixels. Pixel tracking breaks when font size changes. Use em.
• Tracking lowercase body text. Positive tracking on paragraphs makes words harder to recognize. Leave body text at the font's default.
• Forgetting to track all caps. Uppercase labels at default spacing look cramped. Add around 0.05em to 0.12em.
• Giving line-height units. line-height: 24px or 1.5em inherits as a fixed length. Use a unitless ratio.
• Using the same line-height for headings and body. A body value of 1.6 makes multi-line headings look disconnected. Tighten headings separately.
• Fixed-height text containers. Users who apply WCAG text spacing overrides will see clipped or overlapping text.

Conclusion

Kerning, tracking, and leading are the three basic spacing controls in typography. Kerning (font-kerning) fixes the space between specific letter pairs and is built into good fonts. Tracking (letter-spacing) loosens or tightens text evenly, and should be set in em. Leading (line-height) sets the distance between lines, and works best as a unitless ratio.

A practical default: keep kerning on everywhere, tighten tracking and leading slightly for large headings, leave body tracking alone with a line height around 1.5 to 1.7, and add tracking to small capitals. Those few adjustments fix most of the spacing problems that make type look unfinished.