Typography for developers — type scale, line length, and readability

Most of any real interface is text — labels, body copy, headings, button text. Picking font sizes ad hoc, one element at a time, produces a page with no consistent rhythm and no clear hierarchy (the previous lesson's subject directly). A small, defined type scale — a fixed set of sizes used consistently everywhere — fixes this by removing "what size should this be" as a per-element decision.

A practical type scale is usually 5-7 sizes total, each used for a specific role, reused consistently across the entire product:

Picking sizes from a fixed scale — rather than choosing a new size for every new component — is what makes an interface feel visually coherent rather than arbitrary, and makes future changes (adjusting the whole scale) trivial compared to hunting down every one-off size in the codebase.

Text set at a very wide line length (a paragraph stretching the full width of a wide monitor) is measurably harder to read — the eye has to travel further and more easily loses its place tracking to the correct next line. The commonly cited, well-supported target: roughly 45-75 characters per line for comfortable reading, which is why well-designed reading interfaces constrain body text to a maximum width (max-width in CSS, often expressed in ch units, which are sized relative to character width specifically for this purpose) rather than letting it stretch to fill an arbitrarily wide container.

Line height (the vertical space between lines, line-height in CSS) that's too tight makes lines feel cramped and harder to visually separate; too loose and a paragraph starts to feel disconnected, like separate fragments rather than one flowing block. A commonly effective starting point for body text: line height around 1.4-1.6× the font size — tight enough to read as one cohesive paragraph, loose enough that each line is easy to track independently.

Using more than two type families in one interface usually reads as inconsistent rather than intentionally varied. A common, effective pattern: one face for headings/display text (can have more character/personality) and one for body text (prioritizing pure readability at small sizes) — sometimes the same face for both, which is also a perfectly valid, simpler choice.

Text set below roughly 16px for anything a user is expected to actually read (not just glance at, like a timestamp) measurably strains readability, especially on mobile devices and for users with any visual impairment. This specific threshold is worth treating as a hard floor for body copy, not a loose guideline — an easy, concrete rule that improves real accessibility with zero design skill required.