When people think about web accessibility, they often think about alt text, keyboard navigation, and screen readers. Typography is not always the first thing that comes to mind. But think about it: text is the primary way most users interact with your website. If your text is hard to read, your site is hard to use. For people with visual impairments, cognitive disabilities, or reading disorders like dyslexia, typography can be the difference between a site that works and a site that shuts them out.

Good typography is not just about aesthetics. It is about making sure every visitor can read and understand your content. In this guide, we will cover the principles of accessible typography, the specific WCAG requirements that apply to text, and practical steps you can take to make your website’s text readable for everyone.

Why Typography Matters for Accessibility

Text is the backbone of the web. Articles, instructions, navigation labels, form fields, button text, error messages, and product descriptions all rely on words. When those words are presented in a way that is difficult to read, you create barriers for your users.

Consider these scenarios:

  • A user with low vision needs to enlarge text to 200% to read it. If your font size is too small or your layout breaks when zoomed, that user cannot access your content.
  • A user with dyslexia struggles with certain fonts and tight spacing. If your text uses a decorative font with minimal line spacing, reading becomes exhausting.
  • A user with color blindness cannot distinguish text from its background if the contrast is too low, even if the font size is adequate.
  • A user with cognitive disabilities benefits from clear, well structured text with generous spacing. Dense paragraphs with long lines and cramped layout overwhelm them.
  • A user on a mobile device in bright sunlight needs sufficient contrast and font size to read your content on a small screen.

Typography affects all of these users. When you get it right, you make your site more usable for everyone, not just people with disabilities. When you get it wrong, you exclude people who need your content.

WCAG Requirements for Text Accessibility

The Web Content Accessibility Guidelines (WCAG) include several success criteria that directly address typography. Understanding these requirements gives you a concrete framework for making your text accessible.

1.4.3 Contrast (Minimum) - Level AA

Text must have a contrast ratio of at least 4.5:1 against its background. For large text (18 point or 14 point bold, which is roughly 24px or 19px bold), the minimum ratio is 3:1. This ensures that users with low vision or color vision deficiencies can distinguish text from the background.

For a deeper look at color related accessibility, see our guide on color blindness and web accessibility.

1.4.4 Resize Text - Level AA

Users must be able to resize text up to 200% without losing content or functionality. This means your layout should not break, text should not overlap, and horizontal scrolling should not be required when the user zooms in. This is critical for users with low vision who rely on zoom to read.

1.4.8 Visual Presentation - Level AAA

For sites pursuing AAA compliance, text blocks must allow users to override certain styles: no fixed font sizes, line spacing at least 1.5 times the font size, paragraph spacing at least 2 times the font size, and text width no more than 80 characters. While AAA is not required for most sites, these guidelines are excellent best practices that improve readability for everyone.

1.4.12 Text Spacing - Level AA (WCAG 2.1)

Users must be able to override the following text spacing properties without loss of content or functionality:

  • Line height to at least 1.5 times the font size.
  • Spacing following 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.

This ensures that users who need more generous spacing (such as people with dyslexia or low vision) can adjust it using browser settings or assistive technology without your layout breaking.

1.4.4 and 1.4.10 Reflow

Related to typography, the reflow requirement means content should reflow to a single column at 320 CSS pixels wide without horizontal scrolling. This ensures text remains readable on small screens and when zoomed.

For more on how your site should adapt to different screen sizes, see our guide on mobile web accessibility.

Choosing an Accessible Font

Font selection has a real impact on accessibility. Here are the principles to follow.

Use Legible, Familiar Fonts

Choose fonts that are easy to read on screen. Sans serif fonts like Arial, Helvetica, Verdana, Tahoma, and Open Sans are generally considered the most legible for body text on screens. Their clean, simple letterforms are easy to distinguish at small sizes and on low resolution displays.

Serif fonts like Georgia and Times New Roman can work well for body text in print, but on screens, the small details (serifs) can blur at smaller sizes, especially on older displays. That said, modern high resolution screens have reduced this issue, and some serif fonts are perfectly readable on screen.

The key is to choose a font designed for screen reading. Many web fonts from Google Fonts and other foundries are specifically designed for screen legibility.

Avoid Decorative Fonts for Body Text

Decorative, script, and display fonts are fine for headings or decorative elements, but they should never be used for body text. These fonts have irregular letterforms that slow down reading and can be impossible to decipher for users with visual or cognitive impairments.

Consider Dyslexia Friendly Fonts

Some fonts are specifically designed to be easier for people with dyslexia to read. These include OpenDyslexic, Dyslexie, and Lexie Readable. These fonts use heavier bottoms on letters to prevent visual confusion (for example, making it easier to distinguish b from d and p from q).

However, research on dyslexia friendly fonts shows mixed results. Some dyslexic users find them helpful, while others prefer standard sans serif fonts. The best approach is to allow users to choose their own fonts through proper text spacing and resize support, so they can use whatever font works best for them. You can offer a dyslexia friendly font as an option, but do not force it on all users.

Keep Font Families to a Minimum

Using too many different fonts on a page creates visual clutter and makes the page harder to scan. Stick to one or two font families: one for headings and one for body text. This creates a clear visual hierarchy and makes the page easier to navigate.

Make Sure Characters Are Distinguishable

Choose a font where commonly confused characters are clearly different:

  • Capital I, lowercase l, and the number 1 should be distinguishable.
  • Capital O and the number 0 should be distinguishable.
  • The number 3 and capital E should look different.
  • Lowercase b and d should be mirror images, not identical shapes.

Some fonts do this better than others. Test your chosen font by looking at these character pairs to make sure they are clearly distinct.

Font Size: Bigger Is Usually Better

Small font sizes are one of the most common accessibility problems on the web. Here is what you need to know.

Minimum Body Text Size

There is no single WCAG requirement for a minimum font size in pixels, but best practices and user testing consistently show that body text should be at least 16px (equivalent to 12pt). Many accessibility experts recommend 18px or even 20px for body text, especially for sites that serve older adults or users with visual impairments.

Here is a practical guideline for font sizes:

  • Body text: 16px minimum, 18 to 20px preferred for general readability.
  • Secondary text (captions, footnotes): 14px minimum.
  • Headings: Significantly larger than body text, with a clear hierarchy (for example, h1 at 32px, h2 at 26px, h3 at 22px).
  • Form labels and input text: At least 16px. Smaller input text is a common accessibility problem.

Use Relative Units, Not Fixed Pixels

WCAG requires that text can be resized. To support this, use relative units like rem, em, or percentages instead of fixed pixel sizes. Relative units scale based on the user’s browser settings, while fixed pixel sizes do not.

For example, instead of font-size: 16px;, use font-size: 1rem;. This allows users who have set a larger default font size in their browser to have your text respect that preference.

Setting the base font size on the html element (for example, html { font-size: 100%; } or html { font-size: 16px; }) and then using rem units throughout your site ensures that all text scales proportionally when the user changes their browser font size.

Do Not Disable Zoom

Never use user-scalable=no or maximum-scale=1.0 in your viewport meta tag. This prevents users from zooming in on mobile devices, which is a direct violation of WCAG 1.4.4. Some developers add this to prevent layout issues on mobile, but the correct solution is to fix your layout, not to prevent zooming.

Line Height and Spacing

Spacing has a significant impact on readability. Here is how to get it right.

Line Height

Line height (also called leading) is the vertical space between lines of text. Too little line height makes lines of text feel cramped and hard to follow. Too much makes it difficult for the eye to track from the end of one line to the beginning of the next.

For body text, a line height of 1.5 to 1.6 times the font size is generally recommended for readability. This means if your font size is 16px, your line height should be 24px to 26px. WCAG 2.1 Success Criterion 1.4.12 requires that users be able to set line height to at least 1.5 times the font size without breaking your layout.

For headings, a slightly tighter line height (1.2 to 1.3) is usually appropriate since headings are larger and shorter.

Paragraph Spacing

Space between paragraphs helps users distinguish separate ideas. WCAG 2.1 requires that users be able to set paragraph spacing to at least 2 times the font size. A practical default is to set paragraph margin to at least 1 to 1.5 times the font size.

Letter and Word Spacing

Most websites do not need to explicitly set letter spacing (tracking) or word spacing for general users. But your layout must not break if a user overrides these values. This is the WCAG 1.4.12 requirement.

If you do choose to set letter spacing, be careful. Increasing letter spacing slightly can help readability for some users, but too much can make text harder to read. Negative letter spacing (tightening) should be used cautiously, especially for body text.

Text Width (Measure)

The width of a block of text is called the measure. If lines of text are too long, the eye has difficulty tracking from the end of one line to the beginning of the next. If lines are too short, the text feels choppy and fragmented.

The ideal measure for body text is between 45 and 75 characters per line, including spaces. WCAG AAA recommends a maximum of 80 characters. You can control this with max-width on your text containers.

A common approach is to set a max-width of around 600 to 700 pixels on your main content area, which typically yields a comfortable line length for body text at 16px.

Color and Contrast

Text contrast is one of the most common accessibility failures on the web. Here is what you need to know.

Meeting Contrast Requirements

As mentioned above, WCAG AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1 for normal text and 4.5:1 for large text.

To meet these requirements:

  • Test your color combinations with a contrast checker tool before finalizing your design.
  • Be especially careful with gray text on white backgrounds. Light gray text is a common accessibility failure because it looks elegant but fails contrast requirements.
  • Do not rely on color alone to convey information. For example, do not use red text alone to indicate an error. Include a text label or icon as well.

For more on color in accessibility, see our guide on color blindness and web accessibility.

Background Considerations

Text on background images can be particularly problematic. If you place text over an image, you need to ensure sufficient contrast across the entire image area. Background images often have varying brightness, so text that is readable over a dark area of the image may be unreadable over a lighter area.

Solutions include:

  • Adding a solid or semi transparent overlay behind the text to ensure consistent contrast.
  • Using a text shadow to improve legibility (though this does not count toward WCAG contrast requirements).
  • Choosing images with consistent dark or light areas for text placement.

Links should be distinguishable from surrounding text without relying on color alone. This means either underlining links or using a visual indicator like a background or border. If you do use color to distinguish links, the link color must have sufficient contrast against both the background and the surrounding text.

Underlining links is the most accessible approach, and it is the one most users expect. If your design does not use underlines for links in body text, make sure there is another visual indicator (like a different font weight or background) and that the color contrast is sufficient.

Responsive Typography

Your text needs to work on every device. Here is how to make typography responsive.

Use Fluid Typography

Fluid typography scales smoothly between screen sizes using CSS functions like clamp(). For example:

font-size: clamp(1rem, 2.5vw, 1.25rem);

This sets a minimum of 1rem (16px), scales with viewport width, and caps at 1.25rem (20px). This approach ensures text is appropriately sized on both small mobile screens and large desktop displays.

Test on Real Devices

Emulators and browser resizing can give you a general idea, but nothing replaces testing on actual devices. Check your text on a small phone, a tablet, and a desktop computer. Look at your text in bright sunlight and low light. These real world conditions reveal readability problems that are invisible in a design tool.

Do Not Forget Landscape Mode

On mobile devices, users sometimes rotate to landscape orientation. Make sure your typography and layout work in both portrait and landscape. Check that text does not become too wide (exceeding the recommended 80 character measure) in landscape mode.

Typography for Specific User Needs

Different users have different needs. Here is how to serve them.

Users with Low Vision

Users with low vision need to be able to resize text, increase contrast, and sometimes change fonts. Make sure your text uses relative units, your layout does not break when text is enlarged to 200%, and you do not disable zoom. Providing a high contrast option can also help.

Users with Dyslexia

Users with dyslexia benefit from:

  • Larger text (18px or more).
  • Generous line height (1.5 to 2.0).
  • Short paragraphs and short lines (45 to 70 characters).
  • Left aligned text rather than justified text (justified text creates uneven spacing between words, which can be distracting and hard to follow).
  • Clear, simple fonts with distinguishable characters.
  • The ability to override text spacing through browser settings.

Users with Cognitive Disabilities

Users with cognitive disabilities benefit from:

  • Clear visual hierarchy with well structured headings.
  • Short paragraphs and sentences.
  • Generous white space around text.
  • Consistent typography throughout the site.
  • Plain language that is easy to understand.

For more on designing for cognitive accessibility, see our coverage of cognitive accessibility in our accessibility resources.

Older Users

Older users often experience a combination of reduced visual acuity, reduced contrast sensitivity, and slower reading speed. They benefit from:

  • Larger text (18px or more for body text).
  • High contrast between text and background.
  • Generous line height and spacing.
  • Clear, familiar fonts.
  • Simple, uncluttered layouts.

Common Typography Mistakes to Avoid

Here are the most common typography mistakes that hurt accessibility:

  1. Font size too small. Body text below 16px is a common problem. When in doubt, go bigger.

  2. Low contrast text. Gray text on white, or text over busy background images, fails contrast requirements.

  3. Fixed font sizes. Using px instead of rem or em prevents users from resizing text.

  4. Disabled zoom. Setting user-scalable=no in the viewport tag blocks users from zooming on mobile.

  5. Justified text. Justified text creates uneven word spacing and “rivers” of white space that are difficult to read, especially for users with dyslexia or cognitive disabilities.

  6. Lines too long. Text that stretches across the full width of a wide screen is hard to follow. Use max-width to limit line length.

  7. Tight line height. Line height below 1.4 for body text makes text feel cramped and hard to read.

  8. Too many fonts. Using three, four, or more font families on a page creates visual clutter and slows reading.

  9. Decorative fonts for body text. Script, handwriting, or display fonts should never be used for body text.

  10. Text as images. Using images of text instead of real HTML text prevents users from resizing, adjusting spacing, or using screen readers to access the content. WCAG requires that text should be resizable and selectable.

Testing Your Typography for Accessibility

To verify that your typography is accessible, test the following:

  1. Resize your browser text to 200%. Does your layout still work? Can you read all the content without horizontal scrolling?

  2. Test with a contrast checker. Use a tool like the WebAIM Contrast Checker or the axe DevTools browser extension to verify that all text meets WCAG AA contrast requirements.

  3. Zoom to 400% on mobile. Does your text reflow properly? Does the layout hold together?

  4. Override text spacing. Use a browser extension or developer tools to set line height to 1.5, paragraph spacing to 2x, letter spacing to 0.12em, and word spacing to 0.16em. Does your layout break?

  5. Test with real users. If possible, have users with low vision, dyslexia, or other conditions test your site and give feedback on the typography.

  6. Run an automated accessibility scan. Tools like Accessible Metrics can detect contrast failures, missing text alternatives, and other text related accessibility issues automatically.

For a comprehensive testing approach, see our guide on how to test the accessibility of your website.

Typography Accessibility Checklist

Use this checklist to make sure your typography is accessible:

  • Body text is at least 16px (1rem).
  • Text uses relative units (rem, em, or percentages), not fixed pixels.
  • Zoom is not disabled in the viewport meta tag.
  • Text can be resized to 200% without loss of content or functionality.
  • Text can be resized to 400% on mobile with proper reflow.
  • All text meets WCAG AA contrast requirements (4.5:1 for normal text, 3:1 for large text).
  • Line height is at least 1.5 for body text.
  • Paragraph spacing is at least 1 to 1.5 times the font size.
  • Line length is between 45 and 80 characters.
  • Layout does not break when text spacing is overridden per WCAG 1.4.12.
  • Fonts are legible and designed for screen reading.
  • No decorative fonts are used for body text.
  • No more than two font families are used on the page.
  • Text is left aligned, not justified.
  • Links are distinguishable without relying on color alone.
  • No text is embedded in images (except logos or decorative elements).
  • Headings create a clear, logical hierarchy.

The Bottom Line

Typography is one of the most impactful areas of web accessibility, and it is also one of the most overlooked. Every user interacts with your text, and every user benefits from text that is easy to read. By following the principles in this guide, you can make your website’s text accessible to people with low vision, dyslexia, cognitive disabilities, and a wide range of other needs.

The good news is that accessible typography is not complicated. Use legible fonts at adequate sizes with generous spacing and sufficient contrast. Let users resize and adjust text. Test your choices with real tools and real users. These steps will make your site more readable for everyone.

For a full overview of accessibility requirements that go beyond typography, see our complete ADA compliance website checklist.

Is your website’s text actually accessible? Do not guess when you can know. Run a free accessibility scan with Accessible Metrics and get a detailed report that checks your site against WCAG 2.1 AA standards, including text contrast, font sizes, and spacing issues. You will see exactly what needs fixing and get a clear roadmap for making your text readable for every user. Sign up for Accessible Metrics today and make your website work for everyone.