How to make typography accessible?

You make typography accessible by choosing clear typefaces, setting text in relative units so it scales with user preferences, giving it enough colour contrast, and spacing it generously enough that people can read it comfortably. Accessible typography also means the layout keeps working when users zoom to 200% or more, override your line height and letter spacing, or view the page on a narrow screen. Structure matters as much as style: real headings, real lists and real text instead of images of text let assistive technology understand the page. The Web Content Accessibility Guidelines (WCAG) 2.2 turn most of this into testable criteria you can check.

Text is the main way most websites communicate, so typography problems shut people out quickly. Low vision, dyslexia, colour vision deficiency, ageing eyes, tiredness and bright sunlight all make poor type harder to read, and good type helps everyone. In this article you'll learn which WCAG criteria apply to typography, how to choose and size fonts, how to handle contrast, spacing and line length, how to make sure your layout survives user adjustments, and how to test it all.

The WCAG Criteria That Apply to Typography

WCAG doesn't prescribe a font or a font size, but several success criteria directly affect how you set type. The table summarises the main ones:

Criterion	Level	What it requires
1.4.3 Contrast (Minimum)	AA	4.5:1 for normal text, 3:1 for large text
1.4.4 Resize Text	AA	Text can be resized to 200% without loss of content or function
1.4.5 Images of Text	AA	Use real text rather than images of text where possible
1.4.6 Contrast (Enhanced)	AAA	7:1 for normal text, 4.5:1 for large text
1.4.8 Visual Presentation	AAA	Width of no more than 80 characters, no justified text, generous line and paragraph spacing
1.4.10 Reflow	AA	Content works at a width of 320 CSS pixels without two-dimensional scrolling
1.4.12 Text Spacing	AA	No loss of content when users increase line, paragraph, letter and word spacing

Most organisations aim for Level AA, which is also what many accessibility laws reference. The AAA criteria are still useful as design targets, especially for long-form reading.

Choose Typefaces That Are Easy to Read

No single font is "the accessible font", but some features consistently help:

• Distinct letterforms: Characters such as capital I, lowercase l and the digit 1 should look different. So should O and 0, and rn and m.
• A generous x-height: Lowercase letters with a larger x-height stay legible at smaller sizes.
• Open apertures: Letters like c, e and a with open counters are easier to tell apart when blurred.
• Moderate stroke contrast: Very thin hairlines disappear at small sizes, on low-quality screens and for people with low vision.
• Normal proportions: Very condensed or extended fonts slow reading down.

Atkinson Hyperlegible, designed for the Braille Institute, was made specifically to make similar characters easier to distinguish. Many everyday fonts such as Inter, Source Sans 3, Verdana and Georgia also perform well for body text. Save decorative, script and very thin fonts for short display text, and never use them for paragraphs, form labels or instructions.

Avoid Thin Weights for Body Text

Weights of 300 and below often look elegant on a designer's high-resolution monitor and wash out everywhere else. Keep body text at 400 or above, and if your brand font is light, pair it with a heavier weight for anything people need to read.

Size Text With Relative Units

Browsers let users choose a default font size, and some people set it larger than the usual 16 pixels. If you set text in pixels, you override that choice. If you use rem, your text scales with it.

html {
  /* Don't set a pixel value here; leave the user's default in place. */
  font-size: 100%;
}

body {
  font-size: 1rem; /* 16px at the default setting */
  line-height: 1.5;
}

h1 {
  font-size: 2.25rem;
}
h2 {
  font-size: 1.75rem;
}
h3 {
  font-size: 1.375rem;
}

small,
.caption {
  font-size: 0.875rem; /* 14px at the default setting */
}

WCAG doesn't set a minimum font size, but 16 pixels is a sensible baseline for body text, and small print shouldn't go much below 14 pixels. For a fuller discussion, see what the minimum font size for accessibility is.

Fluid Sizes Must Still Respond to Zoom

Fluid typography with clamp() is fine, but if the preferred value relies only on viewport units, text may not grow when users zoom. Always mix in a rem component:

/* Risky: vw alone doesn't respond to text zoom or the user's default size */
h1 {
  font-size: 5vw;
}

/* Better: the rem part scales with user settings */
h1 {
  font-size: clamp(2rem, 1.5rem + 2vw, 3.5rem);
}

One more check: WCAG 1.4.4 requires that text can reach 200% of its default size. If your maximum in clamp() is less than double the minimum and the browser's zoom shrinks the viewport, text can stop growing. Test at 200% zoom to confirm it still gets larger.

Get Colour Contrast Right

Low-contrast text is one of the most common accessibility failures on the web. WCAG 1.4.3 requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text, which WCAG defines as at least 18 point (24 CSS pixels) or 14 point bold (about 18.66 CSS pixels).

:root {
  --text: #1f2937; /* about 14.7:1 on white */
  --text-muted: #4b5563; /* about 7.6:1 on white */
  --bg: #ffffff;
}

body {
  color: var(--text);
  background-color: var(--bg);
}

.meta {
  color: var(--text-muted);
}

Mid-grey "muted" text is where most failures happen. The lightest grey that passes 4.5:1 on white is around #767676. Contrast also applies to placeholder text that conveys information, text in buttons, and text on coloured or image backgrounds. We cover the calculation in detail in how much colour contrast text needs for WCAG.

Don't Rely on Colour Alone

If links are distinguished from surrounding text only by colour, people who can't see the difference miss them. Underlines are the simplest fix:

a {
  color: #0b57d0;
  text-decoration-line: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

a:hover {
  text-decoration-thickness: 0.15em;
}

Space Text Generously

Tight lines and dense paragraphs are harder to track, particularly for people with dyslexia or low vision. Good starting values for body text are:

• Line height: About 1.5 for paragraphs. Headings can be tighter, around 1.1 to 1.3.
• Paragraph spacing: At least as large as the line height, often 1em to 1.5em.
• Line length: Roughly 45 to 80 characters. WCAG 1.4.8 suggests no more than 80.
• Alignment: Left-aligned (or start-aligned) text with a ragged right edge. Justified text creates uneven gaps between words.

.prose {
  max-width: 68ch;
  line-height: 1.5;
}

.prose p {
  margin-block: 0 1.25em;
}

.prose h2 {
  line-height: 1.2;
  margin-block: 2em 0.5em;
}

The ch unit is based on the width of the zero character, so 68ch gives a measure of around 70 to 80 average characters in most fonts.

Make Layouts Survive User Overrides

People use browser extensions, user stylesheets and reading modes to change type to suit their needs. WCAG 1.4.12 Text Spacing requires that nothing is cut off or overlaps when users set:

• Line height to at least 1.5 times the font size.
• Spacing after paragraphs to at least 2 times the font size.
• Letter spacing to at least 0.12 times the font size.
• Word spacing to at least 0.16 times the font size.

You can test this with a small bookmarklet or by pasting the following into your browser's developer tools as a temporary stylesheet:

* {
  line-height: 1.5 !important;
  letter-spacing: 0.12em !important;
  word-spacing: 0.16em !important;
}

p {
  margin-bottom: 2em !important;
}

The most common failures are buttons, tabs and cards with fixed heights, which clip text once it grows. Use min-height and padding instead of height, and let containers expand:

/* Fragile */
.button {
  height: 40px;
  line-height: 40px;
  overflow: hidden;
}

/* Robust */
.button {
  min-height: 2.5rem;
  padding: 0.5rem 1rem;
  line-height: 1.25;
}

Reflow and Zoom

WCAG 1.4.10 Reflow requires that content can be read at a width of 320 CSS pixels, which is what a 1280-pixel-wide window looks like at 400% zoom, without scrolling in two directions. Long words, URLs and code can break this. Let them wrap:

.prose {
  overflow-wrap: break-word;
}

pre {
  overflow-x: auto; /* code blocks may scroll horizontally on their own */
}

Use Real Text and Real Structure

Typography isn't only about appearance. Assistive technologies rely on the underlying markup.

• Use real headings: Mark headings up as h1 to h6 in order, rather than styling a paragraph to look big and bold. Screen reader users navigate by headings.
• Use real lists: Use ul, ol and li for lists so their length and position are announced.
• Avoid images of text: Text in images can't be resized, restyled or translated, and it blurs when zoomed. Use live text with CSS for banners and buttons.
• Set the page language: The lang attribute on the html element helps screen readers pronounce words correctly and lets browsers hyphenate properly.
• Use emphasis sparingly: Long passages in italics or all caps are harder to read. Use strong and em for meaning, not decoration.

A minimal, well-structured article looks like this:

<!doctype html>
<html lang="en-GB">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Planning your garden</title>
  </head>
  <body>
    <main class="prose">
      <h1>Planning your garden</h1>
      <p>Start by checking how much sun each area gets.</p>
      <h2>What you'll need</h2>
      <ul>
        <li>A soil testing kit</li>
        <li>A tape measure</li>
      </ul>
    </main>
  </body>
</html>

Never disable zooming with maximum-scale=1 or user-scalable=no in the viewport meta tag. Many people rely on pinch zoom to read.

Respect User Preferences

Some operating system settings are exposed to CSS. Honour them where they affect reading:

@media (prefers-contrast: more) {
  :root {
    --text: #000000;
    --text-muted: #1f2937;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

Animated or scrolling text, typewriter effects and auto-advancing carousels can be distracting or impossible to read for some users, so give them a reduced or static version.

How to Test Accessible Typography

A short, repeatable test routine catches most problems:

1. Zoom to 200% and 400%: Use the browser's zoom. Check that text grows, nothing overlaps and you don't need to scroll sideways at 400%.
2. Change the default font size: In browser settings, set the default to "Very large". Text set in rem should grow; text in px won't.
3. Apply the text spacing styles: Use the CSS above and look for clipped buttons, labels and cards.
4. Check contrast: Use your browser's developer tools, which show a contrast ratio in the colour picker, or an automated checker such as axe or Lighthouse.
5. Check structure: Use a headings outline tool or a screen reader such as VoiceOver or NVDA to navigate by headings.
6. Read it on a phone outdoors: Real-world glare quickly exposes pale grey text and thin weights.

Automated tools find contrast problems and missing language attributes reliably, but they can't judge whether text is comfortable to read. Manual checks remain essential.

---

FAQ: Accessible Typography

---

Conclusion

Accessible typography rests on a handful of practical choices: readable typefaces with distinct letterforms, sizes in rem that respect user settings, contrast of at least 4.5:1 for body text, comfortable line height and line length, and real HTML structure instead of styled lookalikes. WCAG 2.2 gives you concrete criteria for most of these, from Resize Text and Reflow to Text Spacing.

The other half of the job is flexibility. Assume people will zoom, enlarge, respace and recolour your text, and build components that stretch rather than clip. If you test with browser zoom, larger default sizes and the text spacing overrides as part of your normal workflow, accessible typography stops being a special project and becomes how you set type.