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.
Ask your AI
In the CSS/JSX I'm pasting below, find the letter-spacing on large headings (H1/H2, roughly 32px and up) and tighten it to about -0.01em to -0.02em (around -1 to -2%) so the letters draw together and read tidier. Use a size-relative em value, not a fixed px, so the adjustment stays proportional as the size changes. Don't touch body text — leave it at the default 0. Move in small increments rather than one big jump, and give me a table of each heading's old value, new value, and the reasoning.
The small all-caps labels, buttons, and tags in this UI feel cramped because the letters bunch together. Widen their letter-spacing to about +0.05em to +0.1em (roughly +5 to +10%) so each letter separates and reads crisply. Set it in em so the ratio holds as sizes change, and apply this wide spacing only to the caps and small labels — don't carry it over to body text or running sentences. Based on the code I'm pasting below, list which elements you changed and by how much.
In the code I'm pasting below, clean up any letter-spacing that's hardcoded in px (like 2px) or set as one blanket value across all text. Reset it per role in em units, in opposite directions: tighten headings to around -0.01em to -0.02em, widen small all-caps labels to +0.05em to +0.1em, and keep body text at 0. If there's any CJK text (Korean, Chinese, Japanese), don't carry English-style wide spacing onto it — those square characters end up with gaping, sparse holes, so keep them near 0. Return a mapping table of old value to new value alongside the updated code.