Typography basics for websites: readability, line length and hierarchy

Most of a website is text, so typography decides whether people read it or skim past it. Getting the basics right does not need a design degree or an expensive typeface. It comes down to four settings you can check in an afternoon: text size, line length, line spacing and a clear hierarchy of headings.

This guide covers each one with the numbers that published guidance supports, from the W3C’s accessibility criteria, the GOV.UK Design System, Baymard Institute and Matthew Butterick’s Practical Typography. It is about readability. Visual polish, such as pairing typefaces for character, is a separate job.

Start with a comfortable body size

Body text is the size everything else is measured against, so set it first. Small text is the most common reason a site feels hard to read, especially on phones.

Published defaults give a useful range. The GOV.UK Design System’s type scale uses 19px for body text with a 25px line height. Apple’s Human Interface Guidelines list 17pt as the default text size on iPhone. Many sites settle somewhere around 16px to 20px for body copy; test your choice on a real phone held at a normal distance rather than on a large monitor.

Whatever size you pick, people must be able to enlarge it. WCAG success criterion 1.4.4 Resize text (level AA) requires that text can be resized up to 200% without losing content or functionality. In practice, set font sizes in relative units such as rem and check the page still works when you zoom.

Keep lines a readable length

Line length, sometimes called measure, is the number of characters across a line of text. Lines that are too long make it hard to find the start of the next line. Lines that are too short break the reader’s rhythm with constant jumps.

The sources broadly agree:

Baymard’s explanation is that long lines feel intimidating, so people are less likely to read them. The most common cause on websites is letting text stretch across a full-width layout on a large screen. The CSS fix is one line: give the text container a maximum width in ch units (roughly one character wide), for example max-width: 70ch.

Give lines room to breathe

Line spacing (leading, or line-height in CSS) is the vertical space between lines. Too little and lines blur together; too much and paragraphs fall apart.

Two WCAG criteria give useful reference points. 1.4.8 Visual presentation (AAA) asks for line spacing of at least one and a half within paragraphs, paragraph spacing at least 1.5 times larger than line spacing, and text that is not justified. 1.4.12 Text spacing (AA) is narrower: it does not set your defaults, but requires that nothing breaks when a user overrides spacing to line height 1.5 times the font size, paragraph spacing 2 times, letter spacing 0.12 times and word spacing 0.16 times.

A body line height of about 1.4 to 1.6 is a sensible starting point, with less for large headings, which look loose when spaced like body text. Avoid justified text on the web. Browsers hyphenate poorly, which leaves uneven gaps between words.

Build a clear hierarchy

Hierarchy tells readers what matters and lets them scan. It comes from differences in size, weight and space, used consistently.

1. Use a small scale. Three or four heading sizes plus body text is plenty for most sites. GOV.UK’s scale has four heading styles, from 48px down to 19px on large screens.
2. Make steps obvious. If a subheading is only slightly larger than body text, it reads as a mistake. Combine a size change with a weight change.
3. Use space to group. Put more space above a heading than below it, so it belongs to the text it introduces.
4. Match the visual order to the HTML. Use real heading tags (h1, h2, h3) in order, not bold paragraphs styled to look like headings. Screen reader users jump between sections using them.
5. Limit typefaces. One well-made family with a few weights covers most needs. Each extra font adds download weight and visual noise.

A worked example

An example (illustration only). An accountancy practice’s blog uses 14px light grey text across a full-width page on desktop, with a line height of 1.2 and justified paragraphs. On a laptop, lines run to roughly 150 characters. Headings are bold body text at the same size.

The changes:

• Body text raised to 18px, set in rem, in a darker grey that passes contrast checks.
• Text column limited to max-width: 68ch, bringing lines down to the 50 to 75 range.
• Line height increased to 1.5 and paragraphs left-aligned.
• Three heading sizes introduced, each a clear step apart and using real h2 and h3 tags.
• A test with browser zoom at 200% and a text spacing bookmarklet to confirm nothing overlaps or gets cut off.

None of this changes the brand. It changes whether people get past the first paragraph.

Common mistakes

• Choosing type on a large monitor and never checking it on a phone.
• Light grey text on white for an elegant look, which often fails contrast requirements.
• Thin font weights for body text. Apple’s guidelines suggest going larger than the recommended sizes if you use a thin weight.
• Full-width text blocks on wide screens.
• Fixed-height containers that clip text when users enlarge it or change spacing.
• Too many sizes, so nothing stands out.
• Text inside images, which can’t be resized, translated or read by screen readers.

When the rules flex

These numbers are for running text: articles, product descriptions, policies. Short elements behave differently. A pricing table, a navigation menu or a button label doesn’t need a 70-character measure, and a large hero headline can take tighter line spacing. Dense data tools used by trained staff may use smaller text than a public site would. Start from the defaults above for anything people read in paragraphs, and depart from them on purpose rather than by accident.