Letter Spacing

Letter spacing (tracking in typographic terms) controls the uniform space between all characters in a text block. Unlike kerning (which adjusts specific letter pairs), tracking affects every character equally. It's a subtle but powerful tool: increasing tracking improves legibility at small sizes and gives ALL-CAPS text breathing room, while decreasing it tightens large headlines for visual impact. Type designers optimize default spacing for body text sizes (12-18pt), so adjustments are most beneficial at extremes—very small or very large. CSS letter-spacing is measured in em or px, with typical adjustments ranging from -0.02em to 0.15em.

stellae.design

Visual Design

Why It Matters

Letter spacing — also called tracking — controls the uniform horizontal space between characters and has a direct impact on legibility, tone, and visual hierarchy. Proper letter spacing ensures that characters remain distinct at every size, preventing the cramped collisions that make small text unreadable and the loose drifting that fragments words at large sizes. Beyond functionality, letter spacing is a powerful brand signal: tight tracking conveys density and sophistication, while open tracking communicates airiness and modernity.

Real-World Examples

All-caps navigation labels with increased tracking

Apple's website uses uppercase navigation labels with noticeably increased letter spacing, making each word legible and giving the navigation bar an airy, premium feel. The added space compensates for the loss of word-shape recognition that lowercase lettering provides, ensuring that scan speed remains high. Without the extra tracking, the uppercase labels would feel dense and harder to parse at a glance.

Display headings with optical tightening

The New York Times website applies negative letter spacing to large headline text, pulling characters closer together to create visual cohesion at display sizes where default spacing appears too loose. This optical tightening gives headlines a punchy, authoritative presence that contrasts with the relaxed spacing of body paragraphs. The technique is standard in editorial design but requires careful per-typeface calibration.

Counter-example

Tight tracking on small legal text

A financial application applies negative letter spacing to 10px legal disclaimer text at the bottom of a contract page, cramming characters together to minimize the space the disclaimer occupies. Characters bleed into each other on lower-resolution screens, making the text nearly impossible to read without zooming. Reducing letter spacing on already-small text trades legal compliance and user trust for a marginal space savings.

Role-Specific Guidance

Common Mistakes

• Teams frequently apply the same letter-spacing value across all text sizes, not realizing that tracking needs to increase at small sizes for legibility and decrease at large sizes for visual cohesion. Another common mistake is adjusting letter spacing without considering the typeface's built-in metrics — some fonts are already optimized for tight or loose spacing, and additional tracking compounds the effect in unintended ways. Designers also overlook the interaction between letter spacing and word spacing, creating situations where loose tracking makes individual words hard to distinguish from each other.