Typography is most of what people mean when they say a website "feels" expensive or cheap. It is also the thing most sites get subtly wrong — not with a dramatic error, but with a series of small decisions that add up to something slightly uncomfortable to read.
Here is what actually matters, roughly in the order it affects the result.
Hierarchy comes before font choice
Before anyone picks a typeface, the page needs a clear answer to "what should someone read first, second and third?"
Hierarchy is made with size, weight, spacing and colour, and the most common failure is too many levels. If a page has six different text treatments, none of them mean anything. Most pages need four: a main heading, a section heading, body text, and something small for captions and labels.
Getting this right with one typeface produces a better result than getting it wrong with three beautiful ones.
Choosing typefaces
You need fewer than you think. One family used well, across a few weights, is a perfectly good answer, and it is what a lot of the best-looking sites do.
If you pair two, pair for contrast rather than similarity: a distinctive display face for headings, something quiet and highly readable for body. Two similar sans-serifs just look like a mistake.
Things worth checking before you commit:
- Does it have the weights you need? A family with only regular and bold limits your hierarchy.
- How does it read at 16px? Plenty of typefaces that look wonderful at 80px are mushy at body size.
- Does it have the characters you need? Currency symbols, accents, the languages you publish in.
- What is the licence? Web fonts are licensed separately from desktop, usually by monthly page views.
Setting body text properly
The body text is where people spend their time, and it responds to a handful of rules.
Size: 16px minimum, and 18px is often better for long reading. Mobile browsers zoom inputs below 16px, which is jarring.
Line height: around 1.5 to 1.7 for body text. Headings want less, usually 1.1 to 1.25, because large type already has visual space.
Line length: 45 to 75 characters. Text that stretches the full width of a desktop screen is genuinely tiring to read, and it is the most common reason a page feels like hard work.
Contrast: at least 4.5:1. Mid-grey body text on white is the design world's favourite accessibility failure.
Paragraph spacing: space between paragraphs rather than indents, and enough of it that the page has rhythm.
Build a scale, do not pick sizes
Choose a ratio and generate your sizes from it. A 1.25 scale from a 16px base gives you 16, 20, 25, 31, 39, 49 and so on.
Two benefits. The sizes relate to each other, which is what makes a page look composed rather than assembled. And when you need to change the feel of the site later, you change the ratio rather than forty individual values.
Use rem units rather than pixels so your type respects the reader's own browser settings. Someone who has increased their default font size has done so for a reason.
Responsive type
Headings almost never work at the same size on mobile. A 72px hero becomes four lines on a phone and swallows the screen.
Either set explicit sizes per breakpoint, or use a fluid approach with `clamp()` so type scales smoothly between a minimum and a maximum. Whichever you choose, check the longest real heading you will publish, not the short one in the design.
Performance
Fonts are render-blocking, which means badly loaded type is both a design problem and a speed problem.
- Load only the weights and styles you use. Three weights, not nine.
- Use `font-display: swap` so text is readable while the font loads.
- Self-host or preconnect to the font service.
- Use variable fonts where you need several weights — one file instead of five.
A page that shows nothing for two seconds because it is waiting for a font has failed at the only job typography has.
The details that separate good from fine
- Curly quotes and apostrophes, not straight ones.
- Proper dashes — en dashes for ranges, em dashes for asides.
- Non-breaking spaces so a heading does not leave one word stranded on its own line.
- Tabular figures in tables and prices, so numbers line up.
- Tighter letter-spacing on large headings, slightly looser on small caps and labels.
Individually invisible. Collectively, the difference between a site that looks designed and one that looks assembled.
Accessibility
Do not set text in images. Do not rely on colour alone. Keep contrast above the thresholds. Avoid all-caps for anything longer than a label, because it is measurably slower to read. Make sure focus states are visible.
None of this restricts good typography. Most of it is good typography.
The short version
One or two families, a real scale, sensible line lengths, generous spacing, decent contrast and only as many weights as you need. Do that and your site will read better than most of the ones you are competing with.
Licensing, briefly but importantly
Web fonts are licensed separately from desktop fonts, and usually priced on monthly page views. A few things worth knowing before you fall in love with a typeface:
- Google Fonts and Fontshare are free for commercial use, including self-hosting. The quality at the top end is genuinely good.
- Foundry fonts are usually a one-off or annual fee per domain, with page-view tiers.
- Adobe Fonts is included with Creative Cloud, but the licence ends when the subscription does — which is a risk if your site outlives your subscription.
- The licence should be in the client's name, not the agency's.
Budget a few hundred pounds a year if you want something distinctive. It is often the cheapest way to make a site look unlike everyone else's.
Questions we get asked
How many typefaces should a site use?
One or two. Three is usually a sign that nobody made a decision.
Is a custom font bad for performance?
Only if it is loaded badly. Two or three weights, `font-display: swap`, preconnect or self-host, and the cost is negligible.
Should headings be uppercase?
For short labels, fine. For headlines and anything longer, it is measurably slower to read and tends to look shouty.
If your site feels somehow not quite right and you cannot say why, type is usually where to look first. Send us the link and we will tell you what we would change.