Pixels vs. Relative Units in CSS: Writing for 24 Accessibility

For the past several years, I have been integrating accessibility as a core feature of software applications. Some of that work has included researching how the browser handles specific CSS properties, engaging in spirited debates, and ultimately creating style architectures with the express purpose of being inclusive to users. At the time, I didn't make the time to write down my findings. Until I was invited to do so.

Finally writing it down

Last December — after wrapping up a series of conference talks about accessibility, React component libraries, and design systems — I had the privilege of being one of the article authors for the 2019 edition of 24 Accessibility. My topic of choice? Naturally, I gravitated towards writing about why using relative units in CSS is still a benefit for our users.

The article provides a bit of the background of how far browsers have come, the browzer zoom debate, and why it's important to use relative CSS units when creating a design system. It also features this CodePen example comparing how a block of text appears in the browser when zoomed in to 200% using different units for CSS and different default browser settings.

If you haven't read the article yet, head on over and check out Pixels vs. Relative Units in CSS: why it’s still a big deal.