Letter Spacing
The uniform space added or removed between all characters in a block of text.
Plain English
Letter spacing (also called tracking in print design) fine-tunes how dense or airy text feels. Tight negative spacing on large headings makes them feel confident and modern — like premium brand typography. Wide positive spacing on small uppercase labels improves readability and adds a polished, editorial feel. The key rule: large text benefits from tighter tracking; small text often benefits from looser.
Technical
Set via the letter-spacing CSS property. Accepts em, rem, or px values. Positive values spread characters apart; negative values compress them. em units are preferred because they scale with font-size. Pairs with text-transform: uppercase for UI labels, captions, and section headers. The browser default is 0 (normal). Do not confuse with word-spacing, which only adjusts inter-word gaps.
Live Demo
Letter-spacing scale
Large display headings
Body text — default
Small labels & subheadings
ALL CAPS labels & badges
Tight tracking for display type; wide tracking for small caps labels — never the reverse.
Usage
✓ Good usage
Set letter-spacing: -0.03em on a 48px hero headline to make it feel tight and confident, and letter-spacing: 0.08em on uppercase section labels to improve legibility.
✗ Bad usage
Applying letter-spacing: 0.2em to body copy — widely spaced body text is hard to read because inter-word space loses its meaning.
Recommended values
- -0.04em to -0.02em — large display headlines (40px+)
- -0.02em to -0.01em — section headings (24–36px)
- 0 (normal) — body copy, standard UI text
- 0.02em to 0.05em — UI labels at 14px
- 0.05em to 0.12em — uppercase labels and captions (all-caps text needs extra space)
- 0.15em to 0.2em — decorative subheadings in all-caps
Common mistakes
- Adding positive letter-spacing to body text — reduces readability significantly.
- Using px instead of em — px values break when font-size changes.
- Forgetting to pair wide letter-spacing with uppercase text — lowercase text looks odd with wide spacing.
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
Use letter-spacing: -0.03em on all headings 24px and above. Use letter-spacing: 0.08em on uppercase labels (CATEGORY, SECTION). Keep body copy at letter-spacing: normal.