How to Make Website Typography Accessible?

A client forwards you an email from a customer: "I can't read your pricing page. The text is tiny, gray, and when I zoom in, the menu covers everything." The site passed the design review and looked clean in every mockup. But the customer has low vision, and for them, as for many readers with dyslexia or other reading difficulties, the page simply doesn't work. Typography is the first place accessibility succeeds or fails, because nearly every piece of content on the web is text.

This article is a practical checklist for accessible typography. It covers which WCAG criteria apply to text, how to pick fonts and sizes that scale, contrast and spacing requirements, semantic structure, and the CSS patterns that respect user preferences. Each section links to a deeper post in this series where a topic needs more room.

What Does Accessible Typography Mean?

Accessible typography is text that people can perceive, read, and understand regardless of their vision, reading ability, device, or settings. In practice that means four things:

1. Legible letterforms that are easy to tell apart.
2. Sufficient size and contrast so text is visible to people with low vision.
3. Adaptability, so text responds to zoom, user font sizes, custom spacing, and high-contrast modes without breaking.
4. Structure, so headings, lists, and emphasis are conveyed in markup, not just appearance, for screen reader users.

The Web Content Accessibility Guidelines (WCAG) 2.2 turn those goals into testable success criteria. These are the ones that apply most directly to typography:

Criterion	Level	What it requires
1.3.1 Info and Relationships	A	Headings, lists, and emphasis must be in the markup, not only visual
1.4.1 Use of Color	A	Color can't be the only way to identify links or meaning
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, not pictures of text, except for logos
1.4.6 Contrast (Enhanced)	AAA	7:1 for normal text, 4.5:1 for large text
1.4.8 Visual Presentation	AAA	Line width no more than 80 characters, no justified text, line height 1.5
1.4.10 Reflow	AA	Content works at 320 CSS px wide without horizontal scrolling
1.4.12 Text Spacing	AA	Content survives user-applied spacing overrides

Most legal standards, including the European Accessibility Act and ADA case law in the US, point to WCAG 2.1 or 2.2 Level AA. Treat AA as your baseline and use AAA guidance where you can.

Choose Legible Typefaces

Not all fonts are equally legible. Legibility is about whether individual characters can be distinguished, which is the foundation of everything else. When evaluating a typeface for body text, check these traits:

• Distinct ambiguous characters. Type Il1 O0 rn m and look closely. Capital I, lowercase l, and the numeral 1 should each look different. So should rn and m.
• Large x-height. Lowercase letters that are tall relative to capitals stay readable at smaller sizes.
• Open counters and apertures. The enclosed and partially enclosed spaces in letters like a, e, c, and s should be generous.
• Moderate stroke contrast. Extreme thick-thin contrast loses its thin strokes at small sizes and low contrast.
• No mirror-image letters, where b, d, p, and q are simply flipped copies. Subtle differences help readers with dyslexia.

Fonts built with these goals include Atkinson Hyperlegible (from the Braille Institute), Lexend, Inter, Source Sans 3, and Verdana. Avoid decorative, script, condensed, or ultra-light fonts for body text. They can work for a short display heading at a large size, but never for paragraphs.

Use Relative, Scalable Font Sizes

WCAG 1.4.4 requires that text can be resized to 200% without losing content or functionality. Browser zoom handles most of this automatically, but many users with low vision instead set a larger default font size in their browser settings. Fonts declared in px ignore that setting entirely.

Declare font sizes in rem so they inherit the user's default:

html {
  font-size: 100%; /* respects the browser default, usually 16px */
}

body {
  font-size: 1.125rem; /* 18px at default, 27px if the user picked 24px */
}

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

Never use vw alone for font sizes. A heading set to font-size: 5vw doesn't grow when the user zooms, because zoom changes the viewport width in CSS pixels proportionally. Combine vw with rem inside clamp() instead. The details are in why you should use rem instead of px and the guide to supporting browser zoom and user font preferences.

Meet Contrast Requirements

Low contrast is the single most common accessibility failure on the web. The WebAIM Million report has found low-contrast text on roughly 80% of the top million home pages year after year.

The thresholds under WCAG 1.4.3:

• 4.5:1 for normal text.
• 3:1 for large text, defined as at least 24px regular or about 18.66px (14pt) bold.
• 3:1 for focus indicators and UI component boundaries (1.4.11).

Practical rules that keep you safe:

1. Use dark gray or near-black for body text, not mid-gray. #595959 on white is about 7:1 and still looks soft.
2. Check placeholder text, disabled states, captions, and footer text. These are where failures hide.
3. Check text over images and gradients at the lightest point behind the text, not the average.
4. Check both light and dark themes separately.

The full rules, including how the ratio is calculated and what's exempt, are covered in WCAG contrast requirements for text.

Set Comfortable Spacing and Line Length

Spacing is where accessibility and good typography overlap almost perfectly. WCAG 1.4.8 (AAA) recommends line height of at least 1.5 within paragraphs, paragraph spacing at least 1.5 times larger than line spacing, and lines no longer than 80 characters.

.prose {
  max-width: 70ch;
  line-height: 1.6;
}

.prose p + p {
  margin-block-start: 1em;
}

.prose p {
  text-align: start; /* avoid justify */
}

Avoid justified text. It creates uneven gaps called rivers that make it harder for readers with dyslexia to track lines. Keep text left-aligned for left-to-right languages, and use text-align: start so it flips correctly for right-to-left languages.

Support User Spacing Overrides (WCAG 1.4.12)

Many readers use browser extensions or user stylesheets to increase spacing. WCAG 1.4.12 requires that no content or functionality is lost when users set:

• Line height to 1.5 times the font size
• Paragraph spacing to 2 times the font size
• Letter spacing to 0.12 times the font size
• Word spacing to 0.16 times the font size

You don't have to apply these values by default. You only have to make sure your layout doesn't break when someone else applies them. The usual culprits are fixed heights and overflow: hidden on cards, buttons, and navigation. Use min-height instead of height, and let containers grow.

You can test it with this snippet in the DevTools console:

const style = document.createElement("style");
style.textContent = `
  * {
    line-height: 1.5 !important;
    letter-spacing: 0.12em !important;
    word-spacing: 0.16em !important;
  }
  p { margin-bottom: 2em !important; }
`;
document.head.appendChild(style);

Structure Text with Semantic HTML

Screen reader users navigate by headings far more than by reading top to bottom. If your headings are styled div elements, those users lose the outline of the page. WCAG 1.3.1 requires that visual structure is also present in the markup.

• Use one h1 per page and nest h2 through h6 in order without skipping levels for visual effect.
• Separate meaning from size. If you want an h3 that looks like an h2, use a class, not a different element.
• Use real ul, ol, and li for lists, not lines that begin with a dash.
• Use strong and em for meaningful emphasis. Use CSS for purely visual bolding.
• Set the page language with the lang attribute on the html element so screen readers pick the right pronunciation and browsers hyphenate correctly.

<html lang="en">
  <body>
    <main>
      <h1>Pricing</h1>
      <h2 class="text-xl">Starter plan</h2>
      <p>Everything you need to <strong>launch in a day</strong>.</p>
    </main>
  </body>
</html>

Avoid Common Typographic Barriers

Several popular styling choices create real barriers:

• Images of text. Text baked into a banner image can't be resized, recolored, translated, or read by many assistive tools. Use real HTML text over a background image instead.
• Long all-caps passages. Uppercase removes word shape, slows reading, and some screen readers spell out short all-caps words letter by letter. Use text-transform: uppercase in CSS rather than typing in capitals, and keep it to short labels.
• Italic paragraphs. Long stretches of italic text are harder to read. Keep italics for short emphasis and titles.
• Links identified only by color. Underline links in body text, or provide a 3:1 contrast against surrounding text plus a non-color indicator on hover and focus.
• Auto-scrolling or animated text. Respect prefers-reduced-motion and give users a way to pause anything that moves for more than 5 seconds (WCAG 2.2.2).
• Truncated text with no way to see the rest. If you clamp lines, make sure the full content is available elsewhere.

Respect User Preferences in CSS

Modern CSS gives you media queries that reflect user settings. Use them.

/* Honor reduced motion for animated headings or text effects */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Strengthen contrast when the user asks for it */
@media (prefers-contrast: more) {
  :root {
    --text-muted: var(--text);
  }
}

/* Windows High Contrast and other forced color modes */
@media (forced-colors: active) {
  .badge {
    border: 1px solid CanvasText;
  }
}

In forced colors mode, the browser replaces your colors with the user's system palette. Text set with color adapts automatically, but anything that relies on background color alone, such as a pill-shaped badge, needs a border to stay visible.

Test Your Typography

Automated tools catch only a fraction of accessibility issues. For typography, combine them with manual checks:

1. Automated scan with Lighthouse, axe DevTools, or WAVE to find contrast failures and missing language attributes.
2. Zoom to 200% and 400% in the browser. At 400% on a 1280px window, you're testing 1.4.10 Reflow at 320px.
3. Set the browser default font size to 24px and check that text grows.
4. Apply the text spacing bookmarklet or the snippet above.
5. Navigate by headings with a screen reader (VoiceOver rotor, NVDA's H key) to confirm the outline makes sense.
6. Enable forced colors in Chrome DevTools Rendering panel.

For a structured process that goes further, read how to test typography for low-vision users.

Accessible Typography FAQ

Conclusion

Accessible typography is not a separate design style. It's good typography held to measurable standards: legible typefaces, sizes in rem, contrast of at least 4.5:1, comfortable line height and measure, semantic structure, and layouts that bend instead of breaking when users change their settings. Each of these choices also makes the page easier for everyone else to read.

Start by auditing the basics on your most visited pages: contrast, font units, heading structure, and behavior at 200% zoom with spacing overrides applied. Fix what fails, then build those rules into your design tokens and component library so new pages are accessible by default instead of by later repair.

Here are some useful references for going deeper on accessible typography:

1. W3C WAI: Web Content Accessibility Guidelines (WCAG) 2.2 — the full normative text of every success criterion mentioned above.
2. W3C WAI: Understanding Success Criterion 1.4.12: Text Spacing — the exact spacing values and how to test them.
3. WebAIM: Typefaces and Fonts — practical guidance on choosing and styling accessible fonts.
4. MDN Web Docs: prefers-contrast — reference for responding to users who request higher contrast.
5. WebAIM: The WebAIM Million — annual data on the most common accessibility failures, led by low-contrast text.