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.
On this plate
Reach for this when
- Setting display and label styles.
- Working with uppercase text.
Common mistakes
- Tracking applied to body text.
- Uppercase used for long strings.
- Layouts that break when letter spacing is overridden.
- Setting tracking in absolute units, so it does not scale when the reader enlarges text.
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.
When to touch tracking at all
Do
- Tighten large display type slightly, where the default spacing looks loose.
- Open up uppercase runs, which are spaced for lowercase by default.
- Leave body text alone. The typeface was drawn for it.
Do not
- Track out small text to fill a space.
- Apply a global tracking value across every size.
- Use letter spacing in place of a font with a different width.
In practice
- i.
Tightening display headings
MarketingA large heading at default tracking looks loose. Around -0.02em restores optical evenness without being noticeable as an adjustment.
- ii.
The uppercase label habit
Where tracking is actually neededSmall uppercase labels at default tracking read as a solid block. A small positive value separates the letterforms, and it is one of the few places tracking is doing necessary work rather than decoration.
Local chart
FND·035 · Region II · Grid D2
This entry and the entries it is stated to connect with. Each line is labelled with what the connection means.
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.
Short definition
The one-paragraph version, for when that is all you need.
Related concept
Connected closely enough to change how you apply this.
- Text SpacingA11Y·015 · Accessibility
- Font SelectionFND·030 · UI foundation
- Line HeightFND·034 · UI foundation
- ReadabilityFND·036 · UI foundation
- Type ScaleFND·031 · UI foundation
- Typographic HierarchyFND·032 · UI foundation