typography basics for websites: what non-designers need to know
typography is one of those design elements that's easy to get obviously wrong and hard to get subtly right. most people can't articulate why one website feels more professional than another, but font choices are often a big part of it.
you don't need to become a typographer. you need to avoid the common mistakes and understand the principles that make text readable and professional.
the font pairing principle
most websites use two typefaces: one for headings and one for body text. mixing more than two typefaces is almost always a mistake — it creates visual noise rather than hierarchy.
the classic reliable pairing: a slightly more distinctive or expressive typeface for headings, and a clean, highly readable typeface for body text.
google fonts has excellent free options. some reliable pairings that work for business sites:
- Playfair Display (headings) + Source Sans 3 (body) — elegant, good for professional services
- Montserrat (headings) + Lato (body) — modern, clean, versatile
- Raleway (headings) + Open Sans (body) — contemporary, approachable
- Inter + Inter — the same typeface at different weights and sizes. used by thousands of software products. extremely clean.
if you're not sure, using a single well-designed typeface (like Inter or DM Sans) at different weights (bold for headings, regular for body) is more reliable than an awkward pairing.
readability: the technical factors
font size. body text should be 16–18px. 14px is too small for comfortable reading on most screens, especially for older audiences. the trend in modern web design has been toward larger body text — 18–20px is common on professional sites.
line height. the space between lines of text significantly affects readability. a line-height of 1.5–1.7× the font size is the standard recommendation for body text. text that's too tightly spaced feels claustrophobic; too loosely spaced feels disconnected.
line length. very long lines of text (a full-width paragraph on a large monitor) are hard to track — your eye loses its place moving from the end of one line to the start of the next. the optimal measure is 50–75 characters per line, roughly 600–700px wide for typical body text.
colour contrast. text needs sufficient contrast against its background to be readable. black on white is 21:1 contrast ratio (maximum). the wcag accessibility standard requires at least 4.5:1 for normal text. light grey text on white (a common "minimal" design trend) often fails this standard and is genuinely hard to read for many people.
what to avoid
too many font sizes. establish a clear type scale — heading, subheading, body, caption, and label. having 8 different font sizes on a page creates visual chaos.
all-caps body text. headlines in all caps can work. paragraphs in all caps are exhausting to read.
decorative fonts for body text. script fonts, handwritten fonts, or display fonts are fine for a logo or one-word accent. they're illegible at small sizes in paragraph form.
default system fonts as a lazy shortcut. system fonts (arial, times new roman) aren't bad, but they signal "default" rather than "considered." loading a quality google font takes milliseconds and makes a visible difference.
fonts that don't load. if you're using a web font and it doesn't load (network issue, wrong url, browser blocking), the browser falls back to a system font. specify a sensible fallback font stack: font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
what browsers do with variable fonts
variable fonts are a modern format that contains multiple font weights and styles in a single file, rather than separate files for bold, light, regular, italic. for sites that use multiple weights of a typeface, variable fonts can reduce page load time. most major google fonts have variable font versions available.
the practical starting point
if you're building or redesigning your website and you're not a designer:
- pick one or two typefaces from google fonts — stick to the "popular pairings" suggestions they provide
- set your body text to 16–18px with a line-height of 1.6
- establish a clear hierarchy: one size for h1, one for h2, one for body — and don't deviate
- check your contrast ratios at webaim.org/resources/contrastchecker
getting these basics right puts you ahead of most small business websites.
nanushi applies systematic typography decisions in every site we build. if you'd like a visual design review of your current site, reach out.