A sleek modern workspace featuring a graphic tablet, stylus, keyboard, headphones, and camera.

22 October 2026Updated 27 October 2026

Typography That Makes Your Website Easy to Read

“Can we make the text a bit smaller so it all fits?” A training provider wants all twelve course dates visible without scrolling, so the text shrinks, the grey gets paler and the lines stretch right across a wide screen. It looks tidy in the mock-up. Then a learner opens it on the bus with their phone brightness turned down and gives up halfway through the second paragraph. Typography is how your words look on the screen. Get it wrong and good copy goes unread.

In brief

Body text should start around the browser default, usually 16px, and be set in relative units so visitors can make it bigger.
Keep lines to a comfortable width. Somewhere near 66 characters is a good place to aim.
Contrast has a pass mark, so measure it.
Headings need to be proper headings in the code. Bold text that looks the part won’t do.

Start with a sensible text size

Browsers usually set body text at 16px unless they’re told otherwise. Treat that as the floor. Plenty of designs go smaller because it looks refined, and we often see 13px pale grey text on professional-services sites. On a laptop it’s tiring. On a phone held at arm’s length it’s a squint.

How the size is set matters as much as the number. Some people turn up the default text size in their browser because they need bigger text. If your site’s fonts are fixed in pixels, some browsers won’t let that setting take effect, which is why MDN calls pixel font sizes “not accessible”. Relative units such as rem and em scale with the visitor’s own setting instead. Ask whoever built the site whether they’re in use.

WCAG 2.2 also sets a second test at level AA. Text has to be resizable up to 200 percent without content or functions going missing. Hold Ctrl (Cmd on a Mac) and tap the plus key until the browser shows 200 percent. Does the menu still open? Has the ‘Add to basket’ button slid behind something? An online shop that breaks at that size is turning away the very customers who zoom.

Line length and line spacing

Long lines are hard work. Your eye has to travel all the way back across the screen to find the start of the next one, and on a big monitor that’s quite a trek. About 66 characters a line, spaces included, is widely regarded as ideal, and Google’s web.dev course quotes the typographer Robert Bringhurst on it. The stricter AAA level of WCAG asks that readers can get blocks of text down to 80 characters or fewer. AA is the level usually targeted, but that limit costs nothing to meet.

The fix is usually a maximum width on the text column. A physio clinic’s treatment page can keep its full-width photos and still hold the paragraphs to a readable width. Nobody needs prose running edge to edge on a 27-inch screen.

Spacing between lines matters too. Cramped lines blur into each other, and the W3C names some people with cognitive, language and learning disabilities, and some low vision users, as readers who lose their place. The same AAA criterion asks for line spacing of at least one and a half within paragraphs.

There’s a separate AA rule that catches more sites out. Some readers override a site’s spacing with a browser extension or their own style settings, because it helps them read. WCAG 2.2’s Text Spacing criterion says nothing should be lost when someone raises line height to 1.5 times the font size, paragraph spacing to twice the font size, letter spacing to 0.12 times and word spacing to 0.16 times. You don’t have to design at those values. The site just has to survive them. Fixed-height boxes are a common casualty. Picture a charity’s donate buttons, each label squeezed into a box one line tall. Space the text out and the words get clipped.

Contrast is a number, so check it

Under WCAG 2.2 AA, normal text needs a contrast ratio of at least 4.5 to 1 against its background. Large text gets a lower bar of 3 to 1, and ‘large’ has a specific meaning. It’s 18 point, or 14 point if bold, which works out at roughly 24px and 18.5px on screen. Logos are exempt. Your body copy isn’t.

Pale grey on white is the usual offender. White text over a photo is close behind, because the contrast shifts across the picture. A hotel’s ‘Book your stay’ line over a bright sky might pass against the trees and fail where the clouds are. Background images that don’t give enough contrast with the text are on the W3C’s list of documented failures. A darker overlay behind the words usually sorts it.

You won’t need to work ratios out by hand. Free contrast checkers let you paste in two colours and tell you whether they pass. Run your body text, your links and your button labels through one. Brand colours are where people come unstuck. A manufacturer’s pale lime may look brilliant on the side of a van and still fail as link text on white. Our article on what WCAG 2.2 means for a business website covers the rest of the standard.

Headings that do a job

Headings break a page into chunks people can scan. They matter even more for people who can’t scan by eye. Screen reader users can jump from heading to heading with a single keystroke. People with low vision often lean on larger headings to work out what a page covers.

That only works if the headings are real ones in the code. Bold text that looks like a heading is just text to a screen reader. So is a sentence somebody made bigger by hand. The W3C’s headings tutorial asks you to nest headings by rank and avoid skipping levels where you can. In practice, for most business pages, that usually means one H1 for the page topic, H2s for the main sections and H3s beneath those. If an H2 looks too big, the fix is in the styling, and the heading level stays where it is.

Wording matters too. ‘Our approach’ could sit above anything. ‘How we price a house clearance’ tells the reader exactly what’s coming. There’s more on that in our piece on writing website copy people actually read.

Fonts, images of text and speed

Custom fonts have a speed cost too. A web font has to download before text can show in it, and browsers typically hold the text back while they wait. Google’s web.dev guidance says that can sometimes delay Largest Contentful Paint. If the fallback font and the real one take up different amounts of space, the page jumps when the swap happens. Both problems feed straight into the measures covered in our guide to Core Web Vitals for business owners.

The fastest font is one you never load. Every extra family and weight is another file, and a café site with three decorative typefaces in four weights each is asking a lot of a phone on patchy signal. Two families is plenty for most businesses. System fonts can do the body text. Ask your developer to serve fonts as WOFF2, which compresses around 30 percent better than the older WOFF format.

Then there’s text baked into pictures. Opening times on a banner graphic. A price list exported as a JPEG. A course timetable screenshotted from a spreadsheet. People can’t resize, recolour or respace text inside an image, so WCAG 2.2 AA asks for real text wherever it can achieve the same look. And when the prices change, someone has to remake the picture.

A ten-minute readability check

Open your most important page on your phone, outside, in daylight. Can you read a full paragraph without pinching? Zoom a laptop browser to 200 percent and click round the menu and the contact form. Put your text, link and button colours through a contrast checker. Look at a long page on the widest screen in the building and roughly count the characters in a line. Well over 80 means the column wants narrowing. Then ask your developer whether the headings are proper heading tags.

None of it is glamorous. It still decides whether somebody reads far enough down a page to find your phone number, which is why readability sits so close to conversion rate optimisation.

Getting the type right on your site

Most of these fixes are small styling changes that won’t need a rebuild. If a new site’s on the way, put WCAG 2.2 AA readability in the brief from day one. Our guide to planning a business website from first idea to launch shows where typography fits alongside structure, content and accessibility. Readable type is built into our website design for businesses, whatever the sector. Want a second pair of eyes on yours? Get in touch and we’ll tell you what we’d change.

Keep reading

Sources

Scott Woodfield

Founder of TWA. Scott has spent 17 years in web design and digital marketing, nine of them inside agencies and eight running his own practice. He plans, designs and builds the sites himself, from single landing pages to full ecommerce builds, and he's the person you speak to when you call.

Let’s have a chat