Accessible typography is where many design systems quietly fail their audit. A type scale can look immaculate in a static mockup and still clip text the moment someone bumps their browser font size, increases line spacing, or zooms to 400%. The difference between type that merely looks good and type that is genuinely readable comes down to a handful of specific, testable decisions.
This guide is for designers who set the values everyone else inherits. It covers the five things accessible typography depends on: a base font size that survives zoom, a controlled line length, line height and spacing that satisfy WCAG 1.4.12, why you should never bake copy into images, and contrast ratios that pass at the thresholds auditors check. Each section gives concrete numbers and the WCAG criterion behind it.
Font size: design in rem, never lock pixels
Accessible typography starts with respecting the user's own settings. A reader who has set their browser default to 24px instead of 16px has told you, explicitly, that they need larger text. If you size everything in px, you override that choice. Size body and UI text in rem (or em) so it scales with the user's root font size.
WCAG 1.4.4 Resize Text (Level AA) requires that text can be enlarged to 200% without loss of content or functionality, and without horizontal scrolling on a normal page. Browser zoom helps, but rem-based sizing is what makes a user's font-size preference actually take effect. Set html { font-size: 100% } and let the cascade do the rest; do not reset the root to a fixed px value, which silently disables the preference.
A practical baseline: 16px (1rem) minimum for body copy on the web, often 18px for long-form reading. Avoid going below 14px for any text a user needs to read, and never below 12px for legal or footnote text. Caption-sized type at 11px may look refined in a hero, but it is the first thing to fail a real readability test.
Line length (measure): the number you forgot to set
Line length, which typographers call measure, controls how far the eye travels before it snaps back to the next line. Lines that run too wide make readers lose their place on the return sweep; lines too narrow chop sentences into fragments. For continuous text, aim for roughly 45 to 75 characters per line, with about 66 as a comfortable target.
In CSS the cleanest control is the ch unit, which is tied to character width: max-width: 66ch on your text container caps the measure regardless of viewport. This matters for people with cognitive and reading disabilities, and it is part of WCAG 1.4.8 Visual Presentation (Level AAA), which calls for no more than 80 characters per line. Even though that is a AAA criterion, capping measure costs nothing and improves reading for everyone.
Watch the interaction with WCAG 1.4.10 Reflow (Level AA): at 320 CSS pixels wide (equivalent to 400% zoom on a 1280px viewport), content must reflow into a single column with no two-dimensional scrolling. A fluid max-width in ch reflows gracefully; a fixed px width does not.
Line height and spacing: WCAG 1.4.12 Text Spacing
WCAG 1.4.12 Text Spacing (Level AA) is the criterion designers most often misread. It does not dictate your defaults. It is a resilience test: when a user applies all four of the following overrides at once, no content may be clipped, overlapped, or cut off, and nothing may stop working.
- Line height (line spacing) of at least 1.5x the font size
- Spacing after paragraphs of at least 2x the font size
- Letter spacing (tracking) of at least 0.12x the font size
- Word spacing of at least 0.16x the font size
You can ship any line height your brand calls for, as long as the layout tolerates these values when pushed. The number-one failure is putting a fixed height on a container that holds text, for example a button or card with height: 40px. When spacing grows, the text needs more vertical room and a hard height refuses to give it, slicing off a descender or a second line. Use min-height plus padding instead of height, and let containers grow.
As a sensible default that already sits inside the tolerance band, set line-height: 1.5 on body copy (a unitless value, so it scales with font size), tighten to roughly 1.2 to 1.3 on large headings, and use margin (not a fixed gap on a fixed-height box) for paragraph spacing. You can see how the text criteria map to the full standard on the WCAG 2.2 reference.
Avoid images of text
Baking words into a PNG or JPG (a headline, a pricing table, a quote graphic, a banner with the offer in it) breaks accessible typography in several ways at once. The text cannot be resized without going blurry, it ignores the user's font and spacing preferences, it does not reflow, screen readers cannot read it unless someone writes accurate alt text, and translation tools skip it entirely.
WCAG 1.4.5 Images of Text (Level AA) requires that you use real text rather than images of text wherever the same visual presentation can be achieved with markup and CSS. Modern CSS makes the old excuses obsolete: web fonts, gradients, text-shadow, background-clip, and SVG with live <text> elements cover almost every case a designer used to flatten into a raster. The narrow exceptions are logotypes and text where a specific visual presentation is essential, such as a brand wordmark.
When an image legitimately contains text, the alt text must convey that text. The free alt text checker helps you catch images that are missing it before you ship.
Contrast: the thresholds auditors actually check
Type can be perfectly sized and spaced and still fail if it does not stand out from its background. WCAG 1.4.3 Contrast (Minimum) (Level AA) sets the bar by text size:
- 4.5:1 for normal text
- 3:1 for large text, defined as 18pt (about 24px) regular, or 14pt (about 18.66px) bold
- 3:1 for graphical objects and active UI components, under WCAG 1.4.11 Non-text Contrast (Level AA)
Two traps catch designers repeatedly. First, placeholder text and disabled-looking states are often light gray that misses 4.5:1; if it conveys meaning, it must pass. Second, text over photographs or gradients has no single contrast value, so add a scrim or solid plate behind it until the worst-case pixel meets the ratio. A light scrim is invisible to most users and decisive for the audit.
Check pairs as you design rather than at the end. The contrast checker computes the ratio for any foreground and background and tells you which size threshold it clears.
Why this matters beyond the spec
These criteria are not just best practice. Under the European Accessibility Act (Directive (EU) 2019/882), which applies from 28 June 2025, WCAG 2.2 Level A and AA via EN 301 549 is the baseline for products and services including e-commerce, banking, e-books and e-readers, electronic communications, and transport. The text criteria above (1.4.3, 1.4.4, 1.4.5, 1.4.10, 1.4.12) are all in scope. Germany applies the EAA through the Barrierefreiheitsstaerkungsgesetz (BFSG), France through the RGAA, and Italy through the Legge Stanca. Good typography is now also a compliance requirement.
You can audit your live pages against WCAG 2.2 with a free accessibility scan, then work through a structured accessibility checklist before you ship.