Good website typography is mostly invisible. Readers notice the content, find what they need and keep reading. Bad typography makes them work: they squint, lose their place or cannot tell what is important. These eight principles cover the decisions that matter most.
1. Hierarchy shows what matters
Readers scan before they read. A clear hierarchy lets them see the structure of a page at a glance: the page title, the main sections, supporting details and actions. Create hierarchy with a small set of tools used consistently:
- Size: the most obvious signal, best managed with a type scale.
- Weight: bold and semibold distinguish headings and labels without changing size.
- Colour and contrast: secondary text can be slightly lighter, as long as it still meets contrast requirements.
- Space: more space above a heading than below it ties the heading to the content it introduces.
Use as few levels as you need. Most pages work with three or four heading levels.
2. Consistency builds trust
Every size, weight and spacing value should come from a defined set. When a site has twelve slightly different font sizes, readers sense the inconsistency even if they cannot name it. Define your type system once, for example as CSS custom properties, and use it everywhere. The Website Typography Preview exports such a system.
3. Restraint beats variety
One or two font families, a handful of sizes and two or three weights are enough for almost any website. Every additional font or style dilutes the hierarchy and adds download weight. Express personality through one well-chosen heading font rather than many decorative ones.
4. Comfortable line length
Lines that run across a wide monitor are tiring to read. Keep paragraphs to roughly 45 to 75 characters per line, using a maximum width on text containers. Wide layouts can still use the space for images, sidebars or multiple columns of cards.
5. Vertical rhythm
Consistent spacing between lines, paragraphs and sections gives a page a calm rhythm. Base spacing on the body line height or a simple scale, and keep the same spacing for the same kind of element everywhere. Avoid stacking margins from several sources, which creates unpredictable gaps.
6. Contrast for everyone
Light grey text on a white background may look elegant in a mock-up, but it is hard to read for many people, especially on mobile screens outdoors. WCAG 2 requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text at level AA. Check your colours with the contrast indicator in the Font Playground. Weight matters too: very thin weights reduce effective contrast even with dark colours.
7. Alignment that supports reading
For body text in left-to-right languages, left alignment is the safest choice. It gives every line the same starting point. Centred text works for short headings and calls to action but becomes hard to read over several lines. Justified text can create uneven gaps between words on the web, especially in narrow columns, because browsers’ hyphenation and justification are less refined than print layout software.
8. Responsive by default
Typography has to work from small phones to large monitors. Use relative units, let headings scale down on small screens, keep tap targets large enough, and test long words and headlines on narrow screens to make sure they wrap instead of overflowing. The mobile view in the Website Typography Preview is a quick way to check.
Putting the principles together
A practical order of work is: choose the body font and size, set line height and line length, define a type scale for headings, choose weights and colours, and finally add personality with the heading font. Our guides on choosing fonts, readable sizes and line height cover each step in detail.