Typography in Web Design: The Rules That Actually Matter
Type is 95% of web design, yet it's the most overlooked element. The principles that separate good typography from great — and from unreadable.
Oliver Reichenstein famously wrote that web design is 95% typography. After years of design work, we think he was understating it. Get the type right and everything else becomes easier. Get it wrong and no amount of colour or imagery will save you.
The scale problem
Most websites use too small a type scale. If your body copy is 14px and your headings are 22px, you don't have a hierarchy — you have noise. A clear scale (16px body, then a ratio of at least 1.25 between each step) creates visual order without effort.
Line length is non-negotiable
The optimal line length for reading is 55–75 characters. Count your characters. If your text column spans the full page width on a desktop, you're making reading work. Constrain it with max-width. Users will read more, not less.
Pairing fonts: the one rule
Pair a serif with a sans-serif, or two sans-serifs with clearly different weights and personalities. The mistake is pairing fonts that are too similar — they compete rather than complement. Contrast is the entire point.
Whitespace is type's best friend
More space between lines (line-height 1.5–1.7 for body), more space between paragraphs, more padding around text blocks. Whitespace isn't waste — it's the room type needs to breathe. Compressed text communicates cheapness, whether you intend it or not.
Variable fonts are worth using
Modern variable fonts let you use any weight and width in a single file, reducing HTTP requests and enabling creative use of weight transitions. Browsers support them well. The performance and design benefits are real.
Need help with this? See our Web design service.