Reviewed by Misha Gavura, founder of Inclusely. Last reviewed . Written by the Inclusely team at EVDEV, Toronto.
The short answer
There is no ADA-approved font list. US, Canadian and EU rules point to WCAG, and WCAG asks how text behaves, not which font you pick. Use a plain font with clear letter shapes, body text of at least 16 pixels, contrast of 4.5:1, and a theme that still works when shoppers zoom to 200% or add extra spacing.
Is there an ADA compliant font?
No. The ADA itself does not mention fonts for websites. The US Justice Department's web guidance only says that people with vision disabilities may need to use the browser's zoom to make text bigger. WCAG, the standard used by courts, Ontario's AODA and the European Accessibility Act (through EN 301 549), does not name a font or a minimum size either.
Section508.gov, the US government's own accessibility site, says it plainly: neither WCAG nor Section 508 specifies typefaces or a minimum font size. The ADA font rules you may have read about are in the 2010 ADA Standards, and they cover physical signs and the screens on ATMs and fare machines, where text cannot be zoomed. Raised sign letters and ATM screens must be sans serif, and sign text must not be italic, script or highly decorative. That is a good hint, not a website rule.
So when an article lists “ADA compliant fonts”, read it as “fonts that make the real rules easier to meet”. Those rules are:
Level AA is the level laws point to. AAA is the strictest level and is not required, but it is full of good typography advice. For the whole standard in plain words, see WCAG 2.2 AA explained.
What makes a font readable
A readable font is one that people can tell apart letter by letter, at small sizes, on a phone, in bright light, with tired eyes or low vision. The W3C notes that some fonts are more readable than others and that people with low vision often need to change the font, so your theme should allow it. Look for these traits:
Serif or sans serif is less important than people think. Section508.gov says sans serif matters most for body text and that serif fonts are fine for headings. A plain serif at 18 pixels reads better than a light, condensed sans serif at 13 pixels.
Good body text choices in Shopify's font library include Inter, Open Sans, Lato, Roboto, Noto Sans, Source Sans Pro, Work Sans, Nunito Sans, Figtree, DM Sans and Assistant (the default in Dawn). The system font option is also good: it uses the font already on the shopper's device and loads instantly.
What font size should a store use?
WCAG sets no minimum font size. Success criterion 1.4.4 asks that text can be resized up to 200% without losing content or function. Section508.gov suggests 15 to 16 pixels for websites and says running text under 9 point is a barrier. The sizes below are our recommendations for a store, not legal limits.
Size also changes the contrast rule. WCAG calls text “large” at 18 point (about 24 pixels) or 14 point bold (about 18.5 pixels). Large text needs a contrast of 3:1. Everything smaller needs 4.5:1. That is why a pale grey sale price at 13 pixels so often fails. Test your colours with the free colour contrast checker.
Zoom has to work too. If a theme sets text in viewport units (vw) only, it may not grow when a shopper zooms, which WCAG lists as a failure (F94). Text sizes in rem or em, as Dawn uses, scale correctly.
Text spacing: what WCAG 1.4.12 asks
Some shoppers use a browser extension or their own style sheet to add space between lines, letters and words. It makes text easier to follow for many people with low vision or dyslexia. Success criterion 1.4.12 (level AA) says no content or function may be lost when a shopper sets all of these at once:
You do not have to design with these values, and you do not need to add a spacing button. Your theme just has to cope when the shopper applies them. What breaks is almost always a box with a fixed height: the text grows, the box does not, and words get cut off or overlap.
Two sample product cards. Turn on the WCAG 1.4.12 spacing and watch which one keeps all of its text.
Fixed heights
Linen shirt, sage green
$68.00 CAD
Add to cartFlexible heights
Linen shirt, sage green
$68.00 CAD
Add to cartSpacing test is off. Both cards look the same.
To test your own store, paste this into the Console in your browser's developer tools on any page:
document.head.insertAdjacentHTML(
"beforeend",
`<style>
* { line-height: 1.5 !important;
letter-spacing: 0.12em !important;
word-spacing: 0.16em !important; }
p { margin-bottom: 2em !important; }
</style>`
);Then look at the places Shopify themes most often clip text: the announcement bar, menu items, sale and sold out badges, buttons, product card titles that are cut to two lines, tabs, and the cart drawer. If you find a clipped box, the fix is to swap a fixed height for min-height and remove overflow: hidden where it hides text. In Online Store, Edit theme, Theme settings, Custom CSS, that looks like this (class names differ by theme):
/* Buttons and badges grow with text */
.button, .badge {
height: auto;
min-height: 44px;
}
/* No fixed height on card titles */
.card__heading {
max-height: none;
overflow: visible;
}Text cut to two lines with an ellipsis
Line length, alignment, capitals and italics
These come from WCAG 1.4.8 (level AAA) and the W3C's research on the needs of people with low vision. They are not required at AA, but they cost nothing and help everyone:
- Keep lines short. WCAG 1.4.8 says no more than 80 characters per line. Long product descriptions stretched across a wide screen are hard to follow. If your theme has a width setting for text sections, pick the narrower one.
- Align text to the left. Justified text (straight on both sides) leaves uneven gaps between words. Centred text is fine for one line, not for paragraphs.
- Go easy on capitals. The W3C notes that text in all capitals is harder to read for most people. Some themes have a setting that puts buttons and menus in capitals. Short labels are fine. Whole sentences are not.
- Do not set paragraphs in italics or underline. Use them for a word or two, not a block.
- Use real text, not images of text. Words baked into a banner image do not zoom, reflow or translate, and screen readers only get what the alt text says. See alt text examples for product images for banners you cannot avoid.
Dyslexia and ADHD fonts: what the research says
You will see fonts sold as dyslexia-friendly or ADHD-friendly. The evidence for a special font is weak. A 2017 study in Annals of Dyslexia tested the OpenDyslexic font with 12 students with dyslexia, aged 9 to 12, against Arial and Times New Roman. It found no improvement in reading speed or accuracy, and none of the students said they preferred it. We found no published research on fonts made for ADHD.
What dyslexia groups do suggest is plain layout: a plain, evenly spaced font, at least 12 point, 1.5 line spacing, a little extra letter and word spacing, and left-aligned text. Dyslexia Scotland's guidance also says no single font suits everyone. That is the same advice as the rest of this page.
The best thing a store can do is let readers choose. Some people set their own font in the browser or use a reading extension. A theme that passes the 1.4.12 spacing test and does not lock text into images lets those tools work. A font on your store cannot treat or fix a reading difficulty, and you should not say it does.
How to change fonts and sizes in a Shopify theme
In the Shopify admin, go to Online Store, then select Edit theme on the theme you want. Open Theme settings (the settings icon) and choose Typography. Most free themes have a Headings font and a Body font, each with a Change button that opens Shopify's font library. Work on a duplicate of your live theme first, then preview before you publish.
The size range above is from Dawn's settings file. Shopify's Help Center describes a font size scale of 100% to 150%. Newer themes, such as the Horizon family, group type settings differently, so the labels may not match. Look for Typography or Text in Theme settings.
If the font you want is not in Shopify's library, a developer can add it to the theme. Atkinson Hyperlegible, made by the Braille Institute for readers with low vision, is a common choice. It is free for personal and commercial use under the Braille Institute's licence, but it is not in the Shopify library. Upload the font file to the theme's assets, then load it in layout/theme.liquid, below the theme's own style block so your value wins:
<style>
@font-face {
font-family: "Atkinson Hyperlegible Next";
src: url("{{ 'AtkinsonHyperlegibleNext-Regular.woff2' | asset_url }}") format("woff2");
font-weight: 400;
font-display: swap;
}
/* Dawn reads the body font from this variable. Other themes name it differently. */
:root {
--font-body-family: "Atkinson Hyperlegible Next", sans-serif;
}
</style>Each extra font file is a download, which slows your store a little. Load only the weights you use, usually regular and bold. Theme updates can overwrite edits to theme.liquid, so note the change somewhere your team will find it.
Common font mistakes on Shopify stores
- A thin weight for body text. A font picker may offer Light or 300. Choose Regular (400) for anything longer than a heading.
- A script font for the product description. Keep decorative fonts for the logo.
- Sale text inside the banner image. Put the words in the section's heading and button fields instead.
- Tiny text on phones. Some themes shrink text on small screens. Check product pages on a real phone, not only in the editor preview.
- Light grey body text and fixed-height badges. Both pass a quick look in the editor and fail the contrast or spacing test.
- Blocking zoom on phones. If
theme.liquidhasmaximum-scale=1oruser-scalable=noin the viewport tag, shoppers cannot pinch to zoom. Remove it.
How to check the fonts on your store
Zoom to 200%
Open a product page on a computer and press Ctrl and + (Cmd and + on a Mac) until the browser shows 200%. All text should still be there, and nothing should overlap or get cut off.Run the text spacing test
Paste the spacing snippet from the text spacing section into your browser's developer tools, or use a text spacing bookmarklet. Look at buttons, badges, the menu, product card titles and the announcement bar.Check the colours
Put your body text colour and background into a contrast checker. Normal text needs 4.5:1. Check sale prices, small print and text on top of images too.Read it on a phone
Read a full product description on a phone, outdoors if you can. If you squint or zoom, your shoppers do too.
The free accessibility checker flags blocked zoom and other code problems on any public page, and the contrast checker covers your colours. Spacing, line length and how readable a font feels still need a person, which is why we explain what automated tests can and cannot find. If your theme is the problem, our scan of accessible Shopify themes shows how the free themes did.
How Inclusely will handle typography
Questions about accessible fonts
What fonts are ADA compliant?
None, and none need to be. The ADA does not name any font for websites, and neither does WCAG, the standard courts and regulators use. What matters is how text behaves: it can be zoomed to 200%, it has enough contrast, it survives extra spacing, and it is real text rather than a picture of text. A plain, well-made font makes those easier.
What is the most accessible font?
There is no single most accessible font. Plain sans-serif fonts with clear letter shapes, such as Inter, Open Sans, Lato, Roboto, Noto Sans or the system font, are safe choices for body text. Atkinson Hyperlegible, made by the Braille Institute for low vision readers, is another good option. Size, spacing and contrast matter more than the font name.
What font size is required for ADA compliance?
There is no required size. WCAG 1.4.4 asks that text can be resized up to 200% without losing content, and it sets no minimum. Section508.gov suggests 15 to 16 pixels for websites. For a store, 16 pixels for body text is a sensible floor, with nothing important below 14 pixels.
Is serif or sans serif more accessible?
Both can work. Section508.gov says sans serif matters most for body text, and serif fonts are fine for headings. A plain serif at a good size is easier to read than a thin or condensed sans serif. Avoid script, handwritten and very decorative fonts for anything longer than a few words.
What is the best font for dyslexia?
Research does not back one font. A 2017 study in Annals of Dyslexia found that the OpenDyslexic font did not improve reading speed or accuracy for the students with dyslexia it tested. Dyslexia Scotland suggests a plain, evenly spaced font, 1.5 line spacing and left-aligned text, and says no one font suits everyone. Readers who prefer a special font can set it in their browser, as long as your theme lets their settings work.
What does WCAG 1.4.12 text spacing require?
Level AA criterion 1.4.12 says no content or function may be lost when a shopper sets line height to 1.5 times the font size, paragraph spacing to 2 times, letter spacing to 0.12 times and word spacing to 0.16 times. You do not have to use those values. Your theme just has to cope when someone else does.