Type Is Not Decoration
Oliver Reichenstein's famous claim that "95% of web design is typography" is about information architecture, not aesthetics. Type is the primary vehicle for meaning on the web. Every other visual element exists in support of words.
Which makes typographic decisions more consequential than most designers treat them.
The Typeface Is a Voice
Every typeface carries associations built up over centuries of use. Serifs (Georgia, Playfair Display, Freight Text) carry associations with authority, tradition, and print journalism. Sans-serifs (Inter, Helvetica, Gill Sans) feel modern, clean, and functional. Display faces carry personality - which is a double-edged sword.
The mistake isn't picking the wrong typeface. It's picking a typeface at odds with the brand's actual voice. A law firm using a quirky display font isn't being bold; it's being incoherent.
The Four Variables That Matter
Size. Body text should sit between 16–18px for optimal readability on most screens. Headlines should scale dramatically - a 4:1 ratio between body and H1 is a reasonable starting point. Type that's too small signals inaccessibility. Type that's too similar in size signals a flat hierarchy.
Line height (leading). Body text needs 1.5–1.6× line height to be comfortably scannable. Tighter leading on small type creates visual congestion. Looser leading on large display type looks airy and crafted.
Line length (measure). Optimal line length for body text is 50–75 characters. Shorter than 45 characters and the eye is constantly leaping. Longer than 80 and it loses its place. This is one of the most frequently violated rules in web typography.
Letter spacing (tracking). All-caps text needs positive tracking to be legible. Body text needs zero to minimal tracking. Over-tracking normal-case body text is a common design error that signals visual inexperience.
The Pairing Problem
Most websites use two typefaces - one for headings, one for body. The pairing should have contrast without conflict: a high-personality display face with a neutral body face, or a serif heading with a sans-serif body. Avoid pairing typefaces that are too similar - they compete without differentiating.
Web Font Performance
Every font you add is an HTTP request and kilobytes of data. More importantly, web fonts can cause layout shift (CLS) and Flash of Invisible Text (FOIT) - both of which tank both UX and Core Web Vitals scores.
Best practice: 'font-display: swap' to prevent FOIT. Preconnect to font CDNs in the '<head>'. Self-host critical fonts where possible. Limit to two font families, with two or three weights each.
Variable Fonts Are the Future
Variable fonts pack multiple weights and styles into a single file, enabling responsive typography - type that scales its weight and width with viewport size - without the performance cost of multiple files. Fonts like Inter, Recursive, and Source Sans 3 offer variable versions that are worth using.
The Readability Test
Print your site. If it reads poorly on paper, it reads poorly on screen. Good typography is honest - it doesn't rely on background gradients or hero images to hide its weakness. The type should work in isolation.
