Letter Spacing
Small adjustments that matter most at the extremes of size, and that should be left alone in between.
Definition
Letter spacing, or tracking, is the uniform space added between characters. Kerning is the adjustment between specific pairs, handled by the typeface. Well-designed typefaces are correctly spaced at their intended sizes and need no intervention.
Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.
When to adjust
| Situation | Adjustment | Why |
|---|---|---|
| Display text, 40px and above | Negative, -0.01em to -0.03em | Large type appears loosely spaced at default tracking. |
| Uppercase labels | Positive, 0.05em to 0.1em | Capitals are designed to sit within lowercase and need opening up. |
| Small text under 12px | Slightly positive | Improves separation at small sizes. |
| Body text | None | The typeface designer already solved this. |
| Monospace and code | None | Spacing is intrinsic to the design. |
The uppercase label habit
Small uppercase labels with wide tracking are a strong visual signature, and they are also the most overused pattern in contemporary interface design. Uppercase reduces reading speed because word shape disappears, so keep such labels to one or two words and never use them for anything a reader must actually read.
In practice
Tightening display headings
MarketingA large heading at default tracking looks loose. Around -0.02em restores optical evenness without being noticeable as an adjustment.
Continue from here
Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.
Related concept
Connected closely enough to change how you apply this.
- Text SpacingAccessibility
- Font SelectionUI foundation
- Line HeightUI foundation
- ReadabilityUI foundation
- Type ScaleUI foundation
- Typographic HierarchyUI foundation