Why designers should move from px to rem (and how to do that in Figma)

If you are anything like me, you happily used Pixel (px) in Sketch and Figma during the past years without thinking much about it. It is the unit they gave me. Surely it is correct, and if not, the development team can fix that, no? Plus, there are a lot of people saying my design should be pixel perfect, right? Not quite (unless you interpreted “pixel perfect” as avoiding half-pixel). Let’s get started:

So What Is the Problem When Using PX Values?

Pixel in design software (e.g. in Figma) are absolute units, meaning, that 1px corresponds to a defined size (later this will be translated to different screen resolutions but in Figma, we work at 1x where 1px=1pt). Now a fixed value seems like a designer’s dream, total control. Fixing everything so it looks perfect! However, using px(besides other issues) can create serious accessibility barriers such as overruling the font size preferences set by users once translated to CSS.

Font-Size Preference? What Is That?

Every browser has a default root font size, which means unstyled text will be displayed in a certain size, usually 16px. Users can alter this root font-size via the browser setting. Try it out yourself Chrome → More Menu(three little dots, top right) > Settings > Appearance > Either custom font, or Font size both do the trick. Especially users user with vision impairment might rely on this! Not only users can overwrite this preference. Developers can also alter the root font-size with CSS, using the html tag.

PX Will Overwrite Users Preferences

Let me show you an example. So you defined all your font sizes in px. To simplify this, let's say your H1is 48px and your copy text p is 16px. Sounds like reasonable readable values on-screen. text set in px stays the same, even if the root font size is changes by the user px units will inhibit users browser font-size settings However, as px are fixed they overwrite any browser settings. It is like they cut the communication to the root-font size. Even if the user changes the root size, in our example from 16pxto 24px, this will not affect the size displayed. So you created a usability barrier.