Web typography & font pairing.
Type does most of the heavy lifting on a website, and it's where amateur sites give themselves away. Here's how to get it right without a typography degree.
How many fonts should a website use?
Two is the safe default: one font for headings and one for body text. When in doubt, a single well-chosen typeface used in different weights and sizes looks more intentional than a risky pairing.
How do you pair a heading and body font?
Pair for contrast with harmony: let the heading font carry character — a distinctive sans or a serif — and the body font carry readability with a clean, neutral sans. Avoid two fonts that are similar but not identical; the small mismatch reads as a mistake.
What makes body text readable?
- Size — 16–18px for body on the web; smaller text loses readers.
- Line length — 50–75 characters per line is the comfortable range.
- Line height — around 1.5 for body text gives the eye room.
- Weight — use weight, not color, to create emphasis.
What is a type scale?
A type scale is a fixed set of font sizes — for example 14, 16, 20, 24, 32, 48 — that every piece of text draws from. It replaces arbitrary sizes with a rhythm, and that rhythm is what makes professional sites feel consistent from page to page.
How do you keep type consistent as the site grows?
The same way you keep color consistent: define the fonts and the scale once, then make every heading and paragraph pull from that set rather than one-off sizes. SketchXFlow sets a coherent type scale when it generates a site and holds it across every page and edit, so headings and body never drift out of rhythm.
Frequently asked
How many fonts should I use on a website?
Two is the safe default — one for headings, one for body. A single typeface in multiple weights also works well and is hard to get wrong.
What font size should body text be?
16–18px on the web, with a line height around 1.5 and 50–75 characters per line for comfortable reading.
What is a good font pairing strategy?
Pair a characterful heading font with a highly legible body font, or use one neutral typeface across both in different weights.