Still building in Pixels (px)?
Tobi Emmanuel
Building Exciting Web Experiences | Frontend Technical Manager @ Eastside Co | Web Accessibility Advocate | MDes. | Beta Gamma Sigma
The tale is as old as time (well not really, only about a decade), when designers started to gradually ditch REMs for Pixels in their deigns. They finally found a finite, controllable and reliable base unit they could provide to developers to get their designs translated exactly as it is in their designs.
The cost of this control? A tsunami of websites thrown into the world that are potentially inaccessible to some visually impaired users.
Definitions
Pixels: Picture Element -- is the basic unit of programmable colour on a computer display or in a computer image[1]
EM: Ephemeral Unit. A unit equal to the currently specified point size[2].
REM: Root Ephemeral Unit. A unit equal to the device specified root point-size.
Why is PX inaccessible? (doesn't every device support pinch-and-zoom these days?
Ok! I may have slightly exerggerated with the word 'inaccessible' earlier. The truth is, the improved pinch-and-zoom feature on most devices today has now made it almost impossible to force a user to view the page at only the size the author intended.
That being said, this feature isn't perfect from device to device. There has been reported issues of lost image and text quality, and pinch-and-zoom destroying the layout and structure of the page due to overflows, ruining the beauty you intended in the first place.
It also adds a layer of extra effort on a visually impaired user before your build can be usable to them, which could be costly: INCREASING BOUNCE RATE, especially when it's a page that requires the user to make a purchase.
EM vs REM
Unlike pixels, both EM and REM are scalable and relative size units. The difference between them lie in the base relation.
REM values are relative to the root font size of the page/device, while EM values are relative only to the immediate parent element on the DOM.
In the example below...
<!DOCTYPE html>
...
<head>
...
<style>
.all-cats {
font-size: 30px;
}
.all-cats__cat1 {
font-size: 2em;
}
.all-cats__cat2 {
font-size: 2rem;
}
</style>
...
</head>
<body>
...
<div class="all-cats">
<div class="all-cats__cat1">
My cat 1
</div>
<div class="all-cats__cat2">
My cat 2
</div>
</div>
...
<body>
</html>
... '.all-cats__cat1' with font-size of 2em will translated to 60px (2 x 30px) while '.all-cats__cat2' on a device with unaltered base font size, will be translated to 32px (2 x 16px).
In web development, especially as a case for web accessibility, REM is usually favoured over EM as it is tied to the root value and not varied by the parent element sizes.
Don't take the Shortcut
I've seen it a few times have you? A clever dev somewhere in the css does something like this...
html {
font-size: 10px;
}
...and then uses REM values everywhere else in the build.
This is clever because setting the base font-size to 10px makes an easy conversion from the PX value provided by the designer to REM e.g 16px becomes 1.6rem (quick math).
This solution however defeats the purpose of using REM in the first place, as it forces the end users device to always have a base font size of 10px on that page regardless of their device sizing setting.
There is however a workaround to this solution where everyone goes home happy (at-least until the next missing semi-colon that takes you 2 hours to find).
领英推荐
Set your base font-size in percentages (%)
The unaltered base font for most browsers is 16px. 10px is 62.5% of 16px. I then can do...
html {
font-size: 62.5%;
}
...giving me the same flexibility to convert 16px to 1.6rem in my build.
This is a much better solution because, if the end user alters the base font of their device to e.g. 20px for better legibility, your website will be responsive to the users needs.
In an ideal world...
The Design team will imbibe this campaign, and start working with REM values and not PX so developers aren't spending(wasting) time math-ing (Learn from Christine).
Conclusion
I hope with these brief points of mine, I have been able to convince you and not confuse you that Pixels are the enemy in web development...
Well not really, but in a world where we have very little control over all the prejudices and mishaps that happen on a daily basis, be a hero and not the problem. Unless theres a strong case for it, Ditch Pixels in your CSS!.
P.s do you remember this?...
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
...well thats another accessibility horror tale for another day
Thanks for reading!
References: