Letter spacing on caps

How to apply it

1. 1

   Apply tracking-wider (0.05em) to any uppercase text.

2. 2

   Never leave uppercase at tracking-normal (0em).

3. 3

   Pair uppercase treatments with a smaller font size, since tracking adds visual width.

4. 4

   Check condensed and bold uppercase styles first, since they collide most.

Why it works

Uppercase letters are all the same height with no ascenders or descenders, so words lose the silhouette readers rely on for fast recognition. Tight tracking makes letters visually collide, compounding the loss. Adding tracking, around 0.05em, opens breathing room between letters so the eye can still separate them.

What breaks

Uppercase labels at default tracking look cramped and letters visually merge, especially in condensed or bold weights. Small uppercase text like tab labels or badges becomes noticeably harder to parse at a glance.

Review questions

1. 1

   Does every uppercase text element have added letter-spacing?

2. 2

   Do uppercase labels avoid feeling cramped or merged together?

3. 3

   Is tracking consistent across all uppercase instances in the UI?