Kerning, Tracking, and Leading: Mastering Type Spacing

Spacing is one of the most powerful — and most neglected — tools in typography. You can choose the perfect typeface and still produce bad typography if the spacing is wrong. Conversely, careful attention to kerning, tracking, and leading can transform mediocre font choices into something that reads beautifully.

The three fundamental spacing concepts are distinct: kerning adjusts space between specific letter pairs, tracking adjusts uniform space across a range of characters, and leading controls the vertical space between lines. Each operates independently, each affects legibility and aesthetics differently, and each has its own CSS implementation. Getting all three right together is what separates professional typography from amateur work.

Kerning: The Art of Letter Pair Spacing

Kerning refers to the adjustment of space between specific pairs of letters. It exists because the geometry of letterforms creates optical illusions — certain letter combinations appear to have too much or too little space between them even when the spacing is technically equal.

The Problem Kerning Solves

Consider the pair "AV". The diagonal sides of both letters create a large wedge-shaped space between them. If you set "AV" with the same sidebearings (the space built into either side of a character) that work for "AB", the "AV" pair will look like it has a gap. The eye reads the white space, not the mathematical measurement.

Type designers solve this by building kern pairs — specified adjustments for combinations that cause problems. A font file might contain thousands of kern pairs: "AV", "Av", "av", "AT", "Ty", "Te", "fa", "ry", and so on. High-quality typefaces like Inter and EB Garamond ship with extensive kern tables built in.

How Browsers Apply Kerning

Modern browsers support two types of kerning from font metrics: standard kerning pairs (built into the font's kern table) and OpenType GPOS kerning (a more sophisticated approach in modern OpenType fonts). By default, most browsers enable kerning for text. However, you can explicitly control it:

/* Enable kerning explicitly (recommended for all text) */
body {
  font-kerning: normal;
}

/* Disable kerning — for performance on very large text volumes or specific cases */
.no-kern {
  font-kerning: none;
}

/* Let browser decide (default — may disable at small sizes) */
.auto-kern {
  font-kerning: auto;
}

For most web typography, font-kerning: normal on your body element is the right approach. The browser will apply the font's built-in kern pairs wherever rendered.

Optical Kerning vs. Metric Kerning

These terms come from desktop publishing applications but have conceptual relevance to web typography as well. Metric kerning uses the font's built-in kern pairs — exactly what the type designer specified. Optical kerning uses algorithms to analyze the actual shapes of characters and adjust spacing accordingly, which can be useful when using fonts that have sparse kern tables or when mixing fonts.

Web browsers primarily use metric kerning from the font's tables. If you find that a particular font's kerning looks off, the problem is usually in the font file itself, and no amount of CSS will fix it — you may need to choose a better-quality typeface.

When to Manually Adjust

In web typography, you rarely need to manually kern individual character pairs — that level of control is better handled in design tools for static assets like logos or hero text. For web text, trust the font's built-in kerning and focus your energy on the typographic system as a whole.

Tracking: Uniform Spacing Across Text

While kerning adjusts the space between individual letter pairs, tracking (called letter-spacing in CSS) adjusts the space uniformly across all characters in a range of text. This is a blunter instrument, but an important one.

When to Increase Tracking

Uppercase text and abbreviations almost always benefit from increased tracking. All-caps text set at zero tracking feels cramped and difficult to read — the rhythm of alternating letter shapes that creates legibility in lowercase text is absent, and letters start to blur together. A small positive track (0.05–0.1em is a typical starting point) opens uppercase text up considerably.

/* Uppercase labels and abbreviations */
.label-uppercase {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.75rem;
}

/* Navigation items in all caps */
.nav-link {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.8rem;
}

Small text can also benefit from slightly positive tracking. When type is rendered very small, letters can appear to run together due to screen aliasing. A small amount of tracking gives each character room to be read distinctly.

Display and headline text sometimes benefits from slightly negative tracking. Very large type often looks loose because the same sidebearings that work at body text sizes become proportionally excessive at display sizes. Tightening the tracking at large sizes can make headlines feel more cohesive and intentional.

/* Large display headings benefit from tighter tracking */
.display-heading {
  font-size: clamp(2.5rem, 5vw, 4rem);
  letter-spacing: -0.02em;
}

/* Subheadings: slightly tighter than body, not as tight as display */
h2 {
  font-size: 1.75rem;
  letter-spacing: -0.01em;
}

When to Decrease Tracking

Body text should almost never have positive tracking applied — it disrupts the natural rhythm of reading. If your body text font feels too tight, the solution is either a different font or checking whether the browser is applying any default letter-spacing that needs to be reset.

Negative tracking on body text is almost always a mistake. It reduces the space between letters below the font designer's intended minimum, causing legibility problems.

Tracking Units in CSS

Always use em units for letter-spacing, not px. Using em means the tracking scales proportionally with the font size — a 0.05em track will look consistent whether the text is 12px or 48px. Using px creates tracking that is proportionally huge at small sizes and proportionally tiny at large sizes.

/* Correct: em-based tracking scales with font size */
.spaced {
  letter-spacing: 0.1em;
}

/* Avoid: px-based tracking doesn't scale */
.spaced-wrong {
  letter-spacing: 2px; /* Too loose at small sizes, too tight at large */
}

Leading: Vertical Space Between Lines

Leading (rhymes with "bedding") is the vertical space between lines of text. The term comes from the strips of lead that typesetters used to insert between rows of metal type to increase vertical spacing. In CSS, leading is controlled by the line-height property.

How Line-Height Works

CSS line-height is one of the more nuanced properties in the language. It can accept unitless values, percentage values, length values, or the keyword normal. The differences matter significantly.

/* Unitless (recommended): proportional to the element's font-size */
p {
  line-height: 1.6;
}

/* Percentage: calculated from element's font-size, but NOT inherited proportionally */
p {
  line-height: 160%; /* Equivalent to 1.6 at this element, but child elements
                        inherit the computed pixel value, not the multiplier */
}

/* Normal: browser default, typically 1.2-1.4 — too tight for body text */
p {
  line-height: normal;
}

The unitless value is almost always the right choice. When you write line-height: 1.6, every child element inherits the multiplier 1.6, which it then applies to its own font size. This means headings and body text all maintain their proportional leading — exactly what you want.

What Line-Height Value Is Right?

There is no single correct value, but there are guidelines:

• Single-line text (buttons, labels, navigation): line-height: 1 or close to it
• Short text blocks (captions, metadata): line-height: 1.3–1.4
• Body text (paragraphs, articles): line-height: 1.5–1.7, depending on x-height and measure
• Display headings: line-height: 1.1–1.2

The relationship between line-height and x-height is important. Fonts with large x-heights (like Inter or Roboto) often need slightly more leading than fonts with smaller x-heights (like EB Garamond) at equivalent font sizes, because the larger x-height leaves less optical breathing room between lines.

/* System for a typical article layout */
:root {
  --line-height-tight: 1.2;    /* Headings */
  --line-height-snug: 1.4;     /* Subheadings, captions */
  --line-height-normal: 1.6;   /* Body text */
  --line-height-loose: 1.8;    /* Small text, high-density layouts */
}

h1, h2 { line-height: var(--line-height-tight); }
h3, h4 { line-height: var(--line-height-snug); }
p { line-height: var(--line-height-normal); }
small, caption { line-height: var(--line-height-loose); }

Vertical Rhythm

Vertical rhythm is the practice of aligning text baselines to a consistent underlying grid, creating visual harmony across a composition. A pure vertical rhythm approach establishes a base unit (often the line height of body text, e.g., 24px) and ensures that every typographic element's height and margin is a multiple of that unit.

While strict vertical rhythm can be difficult to maintain in complex web layouts — particularly with mixed font sizes and varying content — the underlying principle of consistent vertical spacing remains valuable. Keeping line heights and vertical margins consistent relative to your base type size creates a sense of visual order even if the baselines don't perfectly align across columns.

CSS Properties: letter-spacing, word-spacing, line-height

A quick reference for the three primary spacing properties in CSS:

letter-spacing

Controls the space added after each character. Positive values increase spacing; negative values decrease it. Zero means use the font's default spacing.

.tracking-tight { letter-spacing: -0.05em; }
.tracking-normal { letter-spacing: 0; }          /* Font's default */
.tracking-wide { letter-spacing: 0.05em; }
.tracking-wider { letter-spacing: 0.1em; }
.tracking-widest { letter-spacing: 0.15em; }     /* All-caps, labels */

word-spacing

Controls the space added between words (added to the space character's natural width). Less commonly used than letter-spacing, but useful for specific applications:

/* Justified text sometimes benefits from word-spacing adjustment */
.justified-text {
  text-align: justify;
  word-spacing: 0.1em;
}

/* Spaced-out taglines or navigation */
.nav-spaced {
  word-spacing: 0.3em;
}

line-height

Controls vertical space between lines. The shorthand property font allows setting both font-size and line-height together:

/* Longhand */
.body-text {
  font-size: 1rem;
  line-height: 1.6;
}

/* Shorthand: font-size/line-height font-family */
.body-text {
  font: 1rem/1.6 "Inter", sans-serif;
}

The Measure: Optimal Line Length

Spacing is not just about the space between characters and lines — it also includes the horizontal measure, or line length. The optimal measure for body text is approximately 45–75 characters per line (often stated as 66 characters as an ideal). Lines shorter than 45 characters create choppy reading; lines longer than 75 characters force the eye to travel too far to return to the beginning of the next line, causing tracking errors.

/* Constraining line length with ch units */
article p {
  max-width: 70ch; /* 70 character-widths — scales with font size */
}

/* Or with rem if you prefer fixed measurement */
article p {
  max-width: 680px;
}

The ch unit is elegant for this purpose because it is defined as the width of the "0" character in the current font — so 70ch will always produce approximately 70 characters per line regardless of font size.

Line length, line height, and font size interact in important ways. Longer lines need more leading to help the eye track correctly across the text block. Shorter lines can get away with tighter leading because the return to the next line is easier to find.

Spacing Recipes for Common Use Cases

Body Text (Articles, Long-Form Reading)

.article-body {
  font-family: "EB Garamond", Georgia, serif;
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  line-height: 1.7;
  letter-spacing: 0;
  max-width: 68ch;
}

Interface Body Text (Apps, Dashboards)

.ui-body {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.875rem;   /* 14px */
  line-height: 1.5;
  letter-spacing: 0;
}

Display Heading

.display-heading {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

All-Caps Labels and UI Tags

.label {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1;
}

Navigation Links

.nav-link {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1;
}

Good spacing is invisible when done correctly — readers do not notice it, they simply enjoy a comfortable reading experience. Bad spacing is immediately felt, even when readers cannot articulate exactly what is wrong. Mastering these three properties — kerning, tracking, and leading — gives you the control to make text that feels as right as it looks.

For how spacing interacts with font size and weight to create visual hierarchy, see the Typographic Hierarchy guide.