It’s about time we say “cheerio” to ye olde pixel-based unit
Pretty simple — If you’re working in software development you should NOT be using px units.
In fact, you’ll want to stay away from all absolute units — px, in, mm, cm, pt. They are bad news for accessibility. Originally the px represented a physical pixel on a screen, this is no longer the case. Most modern browsers nowadays are able to render hundredths of a pixel.
So why are pixel units so bad for accessibility?
Content is king and that is the main reason why a user is on your site — they want some content from you and it needs to be readable. But all users were not created equal, so what is the best size to serve up this content? Well, it all depends! Although you may think that it depends on what type of content you’re serving, it doesn’t, it depends on the user. Users can now customize their browser and system preferences to meet their needs. Having set their font-size preferences, they can now view everything without squinting. But what happens to their setting preferences if you’ve set everything to pixels? Nothing. When you build software and use px units you’re effectively turning off the user preferences.
Respect your user’s needs and preferences by using em’s and rem’s for font size when building any software that will be displayed on a screen.
But why are pixel units so bad for responsiveness?
Building software that is responsive really comes down to two things: the device and the content. Gone are the days when we could safely say that most mobile device screens are 320px wide, or that a standard desktop screen is 1024px wide — it’s just not the case anymore. Luckily, we have viewport-relative units (vh, vw, vmax, vmin) that respond correctly to all screen sizes, regardless of their physical dimensions.
When working with space around an element, like a button’s label, px units will only look good if the text is a certain size. What happens when the user increases or decreases the font size? Well, there goes your carefully designed padding and margin.
How do we deal with images?
Images are not meant to have their dimensions set in pixels. When styling a video or image, always use relative units and keep their aspect ratio to make sure that they are responsive.
Fine lines and small spacing
Most of the time the thinnest border we set is 1px. Most browsers can render very small rem units as 1px, so no need to stress that your hairline border will vanish when you convert from pixels to em. Margin and padding don’t round up to whole pixels and are allowed to be very small.
