Body
Updated: 7/6/26
Quick Navigation
Overview
Accessible typography ensures web content is readable for users with visual, motor, or cognitive disabilities. To comply with Web Content Accessibility Guidelines (WCAG), use relative font sizes (allowing users to zoom up to 200%), ensure a contrast ratio of 4.5:1, and maintain line heights of at least 150%.
Understanding the core principles of accessible typography involves examining several specific web design elements.
Typeface Selection
While WCAG does not mandate specific fonts, accessible typography guidelines suggest using clean sans-serif (e.g., Arial, Helvetica) or readable serif fonts (e.g., Georgia). Avoid decorative, highly stylized, or heavily italicized fonts as they can severely reduce character legibility.
Return to Top
Font Sizing
A minimum size of 16px is the standard starting point for body text, but you should always use scalable units like rem or em rather than fixed px to accommodate browser text-resizing tools.
Important: Pixels (or px) are fixed and absolute. If you set your text to 16px, it tells the browser: "I don't care what the user whats, make this exactly 16 pixels tall." This causes issues with users who need or want to zoom in to read text.
Text Spacing
Proper spacing is critical to prevent text from bunching up. WCAG 2.1 AA mandates that content should not break when users customize their text spacing. Recommended standards include a line height (line spacing) of 1.5, paragraph spacing that is 2 times the font size, letter spacing at 12%, and word spacing at 16%.
Color Contrast
The minimum contrast ratio between regular text and its background must be at least 4.5:1 (for large text, such as 18pt or 14pt bold, the minimum is 3:1).
Return to Top
Content Structure and Hierarchy
Ensure that headings (H1-H6) are used to convey logical outlines rather than just for their styling. Avoid justifying text, as the uneven spacing between words creates "rivers" of white space that are difficult for individuals with cognitive impairments to read.
Return to Top
Avoid Images of Text
Don’t use images of text. When you turn words into a picture, screen readers can’t read them aloud, and the text becomes blurry or jagged when zoomed in. Instead, always type your content as real HTML text and style it using CSS.
Return to Top
See Also
Return to Top
Contact Information
Please email the UAH Accessibility Mailbox or visit the Accessibility at UAH Website (opens in a new tab) for more resources.
Return to Top