It’s time we say goodbye to pixel units
Why responsive and accessible websites don’t really need ‘em.
If you design or develop websites, do not use px units. Absolute units (px, in, mm, cm, pt, and pc) are as bad for accessibility and responsive design as using tables for layout. Of all the available absolute units, pixels (px) are the only ones stubbornly sticking around. We have collectively (and rightly!) abandoned all of the other units for styling digital content.
Designers and developers are able to see the absurdity of physical distance measurements being applied to digital content, but px just seem… “digital?” They’re not. Originally px was intended to represent a physical pixel on a device screen, the smallest area capable of being colored. They are no longer tied to this definition. See A pixel is not a pixel is not a pixel, written all the way back in 2010. Modern browsers can render spaces measured in hundredths of a pixel.
Why are pixels bad for accessibility?
Users come to your site for the content, so it needs to be readable. That means it needs to be… at least 12px? Maybe 16px? The truth is, it depends. It doesn’t depend on your content, it depends on the user. They can customize their operating system or browser to set a preferred font-size that meets their needs. Having set their larger font-size preference, they can now view their contact lists and emails without squinting. If your site is authored using px font-sizes, they’ll still be squinting because pixels don’t scale when the browser changes the root font-size. (This isn’t entirely true — Safari ignores pixel measurements and scales the font anyway.)
Respect your user’s needs and preferences by authoring your font-sizes with rem units. These measurements will scale nicely. For fluid typography, include a rem measurement in your calculations.
Why are pixels bad for responsive design?
Responsive design is about responding to two things: devices and content. For layout that depends on screen size, we can no longer assume that mobile devices are 320px wide, or that 1024px is the full width of a screen. We have viewport-relative units (vh, vw, vmax, and vmin) to respond correctly to screen sizes, regardless of their physical dimensions.
For layout that depends on content, such as giving space around a button’s label, px units only look appropriate if the text is a certain size. Change the font-size, and you’ll have to re-author the padding or margin or column width or whatever to accommodate the new font-size. For layout measurements authored with font-relative units (em, ch, ex, and rem), changing font-size automatically changes the spacing. This is handy for flexible designs, keeping the breathing room around copy appropriate to the copy’s size, and this also helps preserve layouts when the user changes their font-size preference to a much larger number.
But what about…?
Images? Aren’t we supposed to specify their dimensions in pixels, as Jen Simmons has advised? Yes, but you specify that in the HTML, not in the CSS. When styling an img or video element, use relative units and aspect-ratio to keep them responsive.
Clamped font-sizes? Is it ok to write font-size: clamp(12px, 10vw, 22px)? No. This ignores the user’s preferences in two ways. First, using vw units for font-size doesn’t scale with the user’s preferences. Second, what if the user has their base font-size set to something larger than 22px? It’s ignored. Instead, include font-relative units in each argument: font-size: clamp(0.75rem, 0.5rem + 8vw, 1.375rem).
Media queries? Zell Liew answered this in PX, EM or REM Media Queries? back in 2016. TLDR: use em not rem or px for a consistent experience across browsers and that responds well to text-zooming changes.
Fine lines and small spacing? Normally, a “hairline” border is authored as 1px wide. Browsers will still render very small rem measurements as 1px, so you don’t need to worry that your hairline border will disappear when you convert it from 1px to 0.0625rem. (Experimentally, Firefox rounds up any measurement from 0.001, or 1⁻³, and Webkit browsers much more generously round up 0.000000000000000000000000000000000000000000000000000000001rem, or 1⁻⁵⁶.) Spaces (like padding and margin) don’t round up to whole pixels and are allowed to be very small. If it is imperative that a space be at least 1px, then I recommend using max(1px, really_small_relative_unit).
Now for a catch-phrase…
Every campaign needs a catchy slogan, so my quest to rid the web of pixels needs to be bumper-sticker-ized. Here are some I thought of:
- Absolute units are absolute trash!
- Just say no to pixels!
- Absolutely no absolute units!
- Design is better relatively!
I’m not printing up T-shirts just yet. If you think of a better slogan, let me know.
