Typography
Letter Spacing
Letter spacing is the horizontal gap between each letter within a word, a subtle adjustment that shapes how a heading or label reads and feels.
Definition
Letter spacing (also called tracking) is the horizontal gap between each letter within a word. Start from the default and pull that gap tighter with a negative value, and the letters pack together for a solid, tidy look; push it wider with a positive value, and each letter separates for a crisp, airy feel. If line height is the vertical space between rows of text, letter spacing is the horizontal space between letters on the same row — same idea, different direction. On screen it's a tiny adjustment measured in fractions of a pixel, but those small differences add up and quietly shift how a heading or label reads and feels.
Why does it matter?
Letter spacing matters most when the font size gets very large or very small. Big headings left at the default tend to look loose and a little scattered, because the gaps read as too wide at that scale. Very small text or all-caps labels have the opposite problem: the letters bunch together and get hard to read, and nudging the spacing a touch wider pulls each one apart so the label reads clearly. All-caps is especially prone to this — the letters are wide and evenly built, so even at default they can feel cramped, and opening the spacing just a little instantly makes them breathe. In short, letter spacing fine-tunes the visual density that changes with font size. Well-tuned spacing never draws attention to itself, but it makes headings tidier and labels easier to read. Get it wrong and you can't quite name what's off, yet the result feels a little amateurish — which is why it's a good value to check during the final tidy-up on a screen.
Common mistakes
- Touching the letter spacing of body text for no reason. Body fonts already have comfortable spacing built in, so widening it scatters the words and tightening it jams the letters together — either way it gets harder to read. Unless you have a specific reason, leave body text at the default.
- Applying English-style wide letter spacing to scripts that don't want it, such as CJK characters. Each of those characters is already a solid square block, so opening the spacing wide leaves gaping holes between them that look awkward and sparse.
- Setting one blanket letter-spacing value for every piece of text. Large headings and small labels need adjustments in opposite directions, so a single unified value will always make one of them look wrong.
Practical tips
- Tighten large headings a little (around -1 to -2%) so the letters draw together for a tidy, well-set look. Small all-caps labels and button text go the other way — widen them (around +5 to +10%) to make them crisp. Body text is usually most natural left at the default (0).
- Specify letter spacing in a size-relative unit like em rather than a fixed value like px. When the font size changes, the adjustment stays proportional, so you can apply one consistent rule across text of many different sizes.
- Adjust letter spacing in very small increments. Instead of one big change, move it a little at a time and check on the actual screen — that way you avoid overshooting into scattered words or over-tightening into jammed-up letters.