letter-spacing and word-spacing: the CSS properties doing optical work

Two properties control spacing between characters and words, and they are the difference between a headline that whispers and one that shouts. The rules by size:

The size-spacing inverse law

As type gets bigger, tracking gets tighter (large letters need less space to read as separate); as it gets smaller, tracking opens. The scale:

  • Display (48px+): -0.02em to -0.03em
  • Headings (24-48px): -0.01em to -0.02em
  • Body: 0 (the font is designed for its body size)
  • Small caps/overline labels: +0.05em to +0.1em (uppercase letters especially need air)
  • Micro text (under 10px): +0.01em to +0.03em

Em units, always: letter-spacing: -0.02em scales with the font-size, staying proportional. Px letter-spacing breaks the moment the size changes - the classic design-token bug.

Uppercase demands tracking

All-caps text reads ~10% slower than mixed case (no ascender/descender shapes) and needs +0.05em or more. Buttons, nav labels, overlines, and badge text in caps without tracking is the most common spacing sin in product UI. If the button label is uppercase and the letter-spacing is 0, the design system has a bug.

word-spacing: the paragraph setter

For justified text, word-spacing adjustments fix rivers (those accidental white channels). Combined with hyphens: auto, moderate word-spacing variance produces even color without the gaps justification leaves.

Negative tracking has a floor

Below -0.04em, letters collide and reading speed collapses - the tight-display look has a hard limit. If the design wants tighter than that, the typeface is wrong (some display faces are drawn tight; tracking a body face to look like one never works).

The verification habit

Spacing bugs interact with font substitutions: a fallback font has different built-in sidebearings, so your tuned -0.02em becomes -0.05em-equivalent overnight. When spacing looks suddenly wrong on a live page, identify what is actually rendering: screenshot and check on-device - Typeye names the real typeface locally (typeye.com) - then re-tune.

letter-spacing is the cheapest optical polish in CSS: one em-based token per size step, and the whole product reads more deliberately.