Accessible typography is a system

Written and reviewed by Art and the City · Updated August 2026 · 7 minute read

Choose clear letterforms

Look for fonts that keep commonly confused characters distinct. Open counters—the interior spaces in letters—help shapes remain recognisable at small sizes. Decorative details that look beautiful in a large headline may disappear in instructions or labels.

There is no universal “accessible font”. Familiar structure can help, but context and implementation matter more than a fashionable list of approved names.

Use a comfortable base size

Start body text around the browser’s normal reading size and test with actual users and devices. Avoid locking text into containers that cannot grow. Captions may be smaller, but they still need strong contrast and enough spacing.

Control line length and spacing

Very wide paragraphs force the eye to travel too far; very narrow columns interrupt rhythm. Use a readable content width and increase line-height for longer text. Paragraph spacing should show structure without turning every sentence into a separate fragment.

All-capital text is useful for short labels but harder to scan in long phrases. Italics and very light weights should also be used sparingly.

Contrast is not optional

Typography must remain visible against its background in every state, including links, placeholders, disabled controls and error messages. Thin text on a pale photograph often fails even when the composition looks elegant. Add a solid background or overlay rather than relying on shadows.

Test behaviour, not screenshots

1. Zoom to 200 percent and check that text reflows without horizontal scrolling.
2. Increase the browser’s default text size.
3. Navigate links and form controls using only a keyboard.
4. Check focus indicators against every background.
5. Test dark mode or high-contrast settings if the product supports them.
6. Confirm that language changes do not overflow buttons or navigation.

Use hierarchy consistently

Heading levels should reflect document structure, not merely visual size. A screen reader and search engine both benefit from a logical sequence. Style the structure you need instead of choosing headings because they happen to look right.

A final human check

Automated tools catch contrast and markup problems, but they cannot fully judge reading effort or tone. Ask people to complete a real task. Notice where they slow down, misread a label or lose their place. Accessibility becomes stronger when it is part of design review rather than a final compliance pass.