The short answer

Interface typography is not about beautiful fonts - it is about making text effortless to read and easy to scan. Two things carry most of the weight: a consistent scale of sizes, and enough space around and between lines. Everything else is refinement.

A type scale

Pick a small set of sizes and use only those. A common approach is a modular scale - each step a fixed ratio larger than the last - so sizes relate to each other instead of being chosen ad hoc. Five to seven steps covers almost any interface: caption, body, lead, and a few heading sizes. Store them as tokens so the scale is enforced, not remembered.

Line height and measure

  • Line height. Body text wants roughly 1.4-1.6× its size. Tight leading cramps; loose leading breaks the line into stripes.
  • Measure (line length). Aim for 45-75 characters per line. Too long and the eye loses its place returning to the next line; too short and it ping-pongs.
  • Size. 16px is the practical floor for body text on screens. Smaller reads as fine print, which people skip.

Choosing typefaces

One or two families is plenty - often a display face for headings and a workhorse for body, or a single family with a range of weights. When pairing, look for contrast in style but agreement in proportion. And weigh performance: every web font is a download, so subset to the weights you use and let text render with a fallback while it loads.

Building hierarchy

Hierarchy is how the eye knows what to read first. You have four tools, and the trick is to use the fewest that work:

  • Size - bigger reads as more important.
  • Weight - bold pulls forward without taking more space.
  • Color - muted text recedes; full-contrast text advances.
  • Space - grouping and gaps often do more than size ever will.

Common mistakes

  • Too many sizes and weights. If every element is emphasized, nothing is.
  • Body text too small or too light. Gray 12px looks elegant in a mockup and is unreadable on a phone in sunlight - see color and accessibility.
  • Centered long-form text. Ragged left edges slow reading; reserve centering for short, display moments.

References