Letter Spacing

When type was set by hand, thin slivers of metal went between the letters to open the spacing. On screen that value became a default the typeface already carries, and in most places using it untouched is correct.

The trouble is that the default was built around body text. The same value looks loose between the letters of a 48-pixel heading and cramped in an 11-pixel uppercase label. A design review where someone says a heading looks slightly off, and neither the size nor the typeface is the problem, is usually this. Each letter is drawn correctly; the six of them just aren't reading as one word, and the eye keeps stopping between them.

Set the value in a unit proportional to the font size, tightening as text gets larger and opening it as text gets smaller.

1. Use a unit relative to the font size. Written as 0.02em, one rule applies proportionally to 16-pixel body text and a 32-pixel heading alike. Fixed pixels have to be redecided every time a size changes, which is how a system ends up with nine unrelated values.
2. Give large text a negative value. Headings above about 32 pixels usually want -0.01em to -0.02em, which pulls the characters into a single block.
3. Give small uppercase labels a positive value. Capitals all share one height, so at close spacing they clot together; around 0.05em separates them. An 11-pixel category label is the typical case.
4. Leave body text at the default. If you're adjusting body letter spacing, the wrong choice is usually the typeface or the size. Tightening makes characters interfere and slows reading; opening it blurs where words end.
5. Check non-Latin scripts separately. Scripts whose characters fill a square cell can look like they're touching at a negative value that works fine in Latin text, and mixed-script headings show it first.

Values get recorded once per size step in the design system rather than chosen per screen, because this is a value nobody can eyeball consistently twice.

"Give the heading -2 percent. Right now the letters look scattered."

The default is too loose at that size and should be tightened.

"Don't touch body letter spacing. Changing the typeface is the right fix."

Treat the cause rather than the symptom, since the spacing is doing what it was designed to do.

"This label is uppercase, so it needs opening up to be readable."

Small capitals need the value pushed the other way, away from the heading rule.

Pagedeck's type scale carries a letter-spacing value on each of its six size steps. Before Noa put those values in the table, heading spacing varied by screen, so headings of identical size looked different in the document list and in settings.