Typography in UI: Choosing Type That Works
Practical typography principles for digital products. Font pairing, hierarchy, readability, and when to break the rules.
Typography in UI is 90% of the design. Get the type right and the rest of the interface can be plain. Get the type wrong and no amount of color or motion will save it. The principles are not complicated. They are just ignored a lot.
One display, one body
Most products need two typefaces. A display face for headings and a body face for everything else. Sometimes one face in two weights is enough. Adding a third face is almost always a mistake. Every additional face is another thing the eye has to reconcile, and the payoff is rarely worth the noise.
Hierarchy is contrast, not size
A common mistake is making headings big to show they are headings. Hierarchy comes from contrast in weight, color, and spacing, not just size. A 24px heading in a heavy weight with tight tracking reads as a heading next to a 16px body in a regular weight. Size is one lever, not the only one.
- Weight: heavy headings, regular body.
- Color: high-contrast headings, softer body.
- Tracking: tighter for headings, looser for body.
- Spacing: more air above a heading than below it.
- Size: the last lever, not the first.
Readability is non-negotiable
Body text exists to be read. Anything that gets in the way of reading is wrong, no matter how good it looks. That means line length between 45 and 75 characters, line height around 1.5 for body, and contrast that meets WCAG AA at minimum. A 12px gray on a gray background is a design crime, not a design choice.
If a user has to lean in to read your body text, you have already lost. The heading is decoration. The body is the product.