Member-only story
Why designers should move from px to rem (and how to do that in Figma)
**************************************************************************
Figma now supports REM. Find the updated version here:
***************************************************************************
Jump the paywall, same article via moonlearning.io/articles
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!
