123 Design StudioWeb typography is where most of the perceived quality of an interface is won or lost, because text is the bulk of nearly every screen. Good type is not about exotic fonts; it is about scale, rhythm, measure and performance working together. This practical guide covers the decisions that make body copy comfortable and headings purposeful.
Build a type scale, not a list of sizes
Start with a defined type scale rather than picking sizes ad hoc. A scale is a small set of sizes derived from a base (commonly 16px for body) multiplied by a consistent ratio. A modest ratio gives calm, content-heavy interfaces; a larger ratio creates dramatic editorial contrast.
- Anchor body text around 16–18px for comfortable reading.
- Derive headings from the same ratio so relationships feel intentional.
- Expose the scale as design tokens so design and code never drift.
Line length and measure
Measure — the number of characters per line — strongly affects readability. The long-standing typographic guidance, echoed by the Nielsen Norman Group, is to keep body text in a comfortable range, roughly 45–75 characters per line. Too wide and the eye loses its place returning to the next line; too narrow and reading becomes choppy.
- Constrain text containers with
max-widthinchunits (e.g.65ch). - Don't let paragraphs stretch full-width on large screens.
Vertical rhythm and spacing
Line height (leading) and spacing create the texture of a page. Body text generally reads well at a line height around 1.5; tighter for large headings, looser for small print. Establish a consistent spacing scale and relate paragraph spacing to line height so the page breathes evenly.
Typography is mostly negative space. The relationships between letters, lines and blocks matter more than the shapes themselves.
Variable fonts
Variable fonts pack an entire family — weights, widths, sometimes optical sizes — into a single file with continuous axes. This unlocks fine control: you can dial in exactly the weight a heading needs, animate weight on interaction, or use the optical-size axis so small text and large display text are each shaped appropriately. One well-chosen variable font can replace several static files while reducing total bytes.
Font loading and performance
Type is a Core Web Vitals concern. Poorly loaded fonts cause a flash of invisible text or, worse, layout shift when the fallback and web font have different metrics.
Performance checklist
- Self-host fonts and
preloadthe critical ones. - Use
font-display: swapto avoid invisible text. - Subset fonts to the characters you actually use.
- Match fallback metrics with
size-adjustand the f-mods to cut layout shift. - Prefer modern
woff2and limit the number of weights.
Pairing typefaces
Most interfaces need only one or two typefaces. A common, reliable approach is a single versatile family used across the system, with weight and size doing the differentiation. If you pair, seek contrast with harmony: a characterful serif for headings against a clean sans for body, or two families that share similar proportions but differ in voice. Avoid pairing two fonts that are almost-but-not-quite the same; the tension reads as a mistake.
Putting it into practice
Strong web typography is systematic, not decorative. Define a scale, control your measure, set a consistent rhythm, exploit variable fonts where they help, and load everything so it never blocks rendering or shifts the layout. Get these fundamentals right and even a single, well-set typeface will make your work feel considered and trustworthy.