Accessible Fluid Typography

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.

--

--

--

Web Developer, Oregonian, husband

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

One year long project

How It Looks Like For Planning To Create Prototypes

Best styleframes by Hound Studio

IXDA20, or how my coffee maker got a sibling

The Pepsi logo costs $1000000, has secrets ranging from the Mona Lisa to the Theory of Relativity

Simplifying the EBP Process:

Why Training in Human Centric Design Will Transform African Products

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Nick Gard

Nick Gard

Web Developer, Oregonian, husband

More from Medium

The 5 Short Frontend tips for June

JAWS can’t find the search using Insert+F3 keys on the Preply website because the search role is missed

Web Accessibility Best Practices on ‘Use of Color’

Image 1: Normal view which shows the Status Colors are indicated by different color along with Status Symbols to denote each status for an example ‘Standby’

HTML Accessibility — Programming with an Inclusive Perspective

Accessibility Tips, Tricks, and Resources for Web Devs

This image shows a wheelchair user at a computer.