How and Why You Should Use REM Instead of PX In Your Next Design

Every website designer wants their site to be polished and laid out in a way that’s easily viewable by users. Working toward perfecting a website is no easy feat,  given that every individual user will have their own screen resolution and browser-viewing preferences — the reason a site may look different to different users — but that doesn’t mean it’s impossible. 

When discussing website user interface design and development, there’s one particular question that will come up: Rem vs. Px?

The Importance of Accessibility

Many users, especially those with impaired vision, require a larger font size than the browser default. Because pixels (Px) are absolute units of measurement, spacing and fonts designated in pixels are unable to scale effectively. For a visually impaired user to achieve the correct font size, they’re required to zoom in, damaging their ability to use the website effectively.

If you designate sizes and spacing using Rem, font size can be scaled by users in their browser settings. When they adjust the root font size, they’re able to view your webpage in the most comfortable font size without the constant scrolling required by zooming in.

There’s one problem with this solution: Most software used for building a UI works in pixels, in part because these tools are meant to interface with design software like Photoshop. So how can you make the switch?

How to Translate PX to REM

One of the best tactics to employ is to set your webpage’s root font size in HTML as a percentage of the user’s default browser font size. Then each line of text can be given a multiple of that webpage’s root size, so that when a user changes their browser settings the webpage will adjust accordingly.

For example, if your webpage’s root font size is set to 62.5 percent of the default browser font size, then your page’s root font size will typically be 10px because the typical default browser root font size is 16px. Using this percentage makes calculations a bit easier, as each line’s font size is a multiple of 10.

Once this is set, the designer can designate the font size for each line of text relative to the webpage’s root font size. If we use the 62.5 percent method, the HTML code for each line can be a ratio of 10 to one PX to REM, so 1rem = 10px, 2.5rem = 25px, and so on. If the website user changes their browser root font size to 32px, each line of text will instead be a multiple of 20px, or 62.5 percent of 32px.

Is your head spinning yet? Don’t worry, most CSS pre-processors enable you to do these calculations using functions so you don’t have to do all the math yourself.

Accessibility is Worth the Effort

It’s a lot more work to go with REM vs PX, and you may not be able to achieve the pristine, perfect web design of your dreams, but enabling users with visual impairments to view and navigate your website easily is important. Not only will it drive more traffic, but it will improve conversion rates by eliminating unnecessary barriers to engagement with your products and services. Plus, it’s the right thing to do. And with all the information your customers have to take in every day, keeping your design simple and clean, is better for everyone.