Kerning, Tracking & Letterspacing: The Craft of Horizontal Spacing

The Core Distinction: Pair-Specific Kerning vs Uniform Tracking

While amateur designers frequently conflate the two, kerning and tracking operate on entirely distinct mathematical dimensions. Kerning is an adjustment made to the spacing between two specific adjacent letterforms whose geometric contours create an awkward optical void (such as the diagonal strokes of A and V, or the overhanging crossbar shelf of T over lowercase o). In contrast, tracking (known in web standards as letter-spacing) applies an identical, uniform offset between every character across an entire range of text regardless of glyph anatomy.

How Web Browsers Handle Kerning vs Tracking in CSS

On the modern web, frontend engineers must know how the CSS specification maps to OpenType tables. The CSS property font-kerning: normal enables the browser to read the font file’s internal GPOS (Glyph Positioning) or legacy kern tables to automatically position complex letter pairs. Meanwhile, the CSS property letter-spacing: 0.05em modifies the advance width of every character uniformly. If you apply letter-spacing without understanding font-kerning, you can accidentally amplify spacing distortions in already-kerned pairs.

Contextual Spacing Rules Across the Visual Hierarchy

Horizontal spacing must adapt dynamically to scale and typographic role: (1) All-Caps UI Labels: Capital letters lack the visual ascenders and descenders that make lowercase text recognizable. Adding slight positive tracking (+0.05em to +0.10em) restores breathing room and prevents letters from fusing together. (2) Display Headlines: At 48px and above, natural sidebearings appear optically loose. Applying slight negative tracking (-0.01em to -0.03em) binds the headline into a cohesive visual unit. (3) Continuous Body Text: Body paragraphs should maintain default 0em tracking. Increasing tracking on body copy breaks the subconscious "word-shape envelopes" that our brains read during saccadic eye movements.

Copyable Production CSS Implementation

/* Recommended Production Spacing CSS */

/* 1. Large Display Headlines */
.display-heading {
  font-size: clamp(2.5rem, 2rem + 2.5vw, 4.5rem);
  line-height: 1.1;
  letter-spacing: -0.02em; /* Tighten loose optical voids */
  font-kerning: normal;    /* Preserve OpenType pair adjustments */
}

/* 2. All-Caps Micro-Navigation and Badges */
.nav-label-caps {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;  /* Restore legibility to cap strings */
  font-weight: 600;
}

/* 3. Continuous Body Reading */
.body-paragraph {
  font-size: 1.125rem;
  line-height: 1.6;
  letter-spacing: 0em;     /* Never distort body word shapes */
}