Typography is most of what a website looks like and most of whether it can be read. It is also the area where small numerical decisions have outsized effects.
For body text use 16 to 18 pixels minimum, line height around 1.5 to 1.7, and line length between 50 and 75 characters. Use one or two typefaces, not five. Load fonts without blocking rendering, since font loading is a common cause of poor Largest Contentful Paint and layout shift.
The numbers that matter
| Setting | Body text | Headings |
|---|---|---|
| Size | 16 to 18px minimum | Scale up in clear steps |
| Line height | 1.5 to 1.7 | 1.1 to 1.3 |
| Line length | 50 to 75 characters | Shorter |
| Weight | 400 to 450 | 600 to 800 |
| Contrast | 4.5:1 minimum | 3:1 for large text |
The most commonly broken rule is line length. Text running the full width of a wide monitor is genuinely hard to read, because the eye loses its place returning to the start of the next line.
How many typefaces
One is fine. Two is common: one for headings, one for body. Three is usually a sign that nobody decided.
A single well-chosen family with several weights gives you all the hierarchy you need, loads faster, and looks more considered than a collection of borrowed choices.
Building a type scale
Pick a base size, then generate steps with a consistent ratio rather than choosing sizes ad hoc. A ratio between 1.2 and 1.33 works for most sites: 16, 20, 25, 31, 39 and so on.
Consistency is what makes typography look deliberate. Six arbitrary sizes read as sloppy even when each one is individually reasonable.
Font loading and performance
- Use WOFF2, which is the smallest widely supported format.
- Subset fonts to the characters you actually need.
- Load only the weights you use. Every extra weight is another file.
- Use font-display: swap so text renders immediately in a fallback rather than staying invisible.
- Preload the critical font file so it starts downloading early.
- Self-host rather than calling a third-party font service, which adds a connection to another domain.
Invisible text while a font loads directly worsens Largest Contentful Paint, and a fallback with different metrics causes layout shift when the real font arrives. Both are avoidable with the settings above.
Accessibility
- Never go below 16 pixels for body text.
- Do not disable zoom. It is still done and it is a genuine accessibility failure.
- Maintain 4.5:1 contrast for normal text against its background.
- Avoid long passages in all capitals, which are measurably slower to read.
- Use real text rather than text baked into images, which cannot be resized, selected or read aloud.
Frequently asked questions
What font size should website body text be?
At least 16 pixels, and 17 to 18 is often more comfortable. Anything smaller strains readers on phones and older screens. Headings should scale from that base using a consistent ratio rather than arbitrary sizes.
How many fonts should a website use?
One or two. A single family with multiple weights provides plenty of hierarchy and loads faster. Three or more usually indicates the type system was never decided, and it shows.
What is a good line height?
Around 1.5 to 1.7 for body text and 1.1 to 1.3 for headings. Tight line height on long paragraphs makes text hard to track; overly loose spacing breaks paragraphs into disconnected lines.
Do web fonts slow down my site?
They can, significantly. Each weight is a separate file, third-party font services add another connection, and poorly configured loading leaves text invisible or causes layout shift. Self-hosted, subsetted WOFF2 with font-display swap avoids most of it.
What is the ideal line length?
Between 50 and 75 characters including spaces. Longer lines make it hard to find the start of the next line; much shorter lines break reading rhythm. On wide screens this means constraining your text column rather than filling the viewport.