Accessible Fluid Typography

Nick Gard
2 min readDec 30, 2020
Photo by Dmitry Ratushny on Unsplash

Accessibility is not just about Blind people using Screen Readers. It is about providing access to your content in any way that the user may want or need it. Browsers come with a lot of accessibility features built in: auto-translations, keyboard navigation, zooming, user-supplied CSS overrides, and so on. A commonly engaged feature is text-zooming. People who would never consider themselves disabled turn on this preference, especially on mobile devices with small screens.

Text-zooming supplies the browser with a new base font-size (most default to 16px) and websites that avoid absolute units (px, pt, in, mm) in favor of relative units (em, rem, ch, ex) will display their textual content larger. This is important in giving users access to your site’s content. Websites that use absolute units are ignoring the user’s declared preference — an accessibility failure!

Accessibility Tip: Do not use absolute units (px, pt) or screen-relative units (vw, vh, vmin, vmax) for font-sizes. Let users change the font-size of their browser and your site to what they need by only using relative font-size units, preferably rem.

When using Fluid Typography, you may think, “it’s responsive, so it’s accessible!” but that is not the case. Fluid typography is responsive to the screen size but not to the user’s preferences. You can still use fluid typography in an accessible way by doing two things:
1. Replace all absolute units with rem units. (You could use em units but they are only relative to the parent’s font-size, which may not be relative to the browser’s text settings.)
2. Join all screen-relative units (vw, vh, vmin, vmax) with a rem unit to keep it relative to the browser’s text settings.

--

--