Sizing things in CSS can be tricky. But REMs are probably easier than you think.

To understand how to calculate REMs from pixels, let’s first briefly understand what REM actually is.

What is REM?

Simply put, REM is the size of something relative to the font size of the root element.

In almost every browser, the default font size of the root element of an HTML document (i.e., the html element) is 16px. That being said, a user may have trouble seeing the default font size and may need to make it larger—18px, 20px, or whatever they need.

Why use REMs?

So why use REMs? Well, because you should strive to make your website or app as accessible as possible. If you make your p font size 16px, it’ll be 16px for all users, even those users who may have trouble reading font that size. However, if you make your p font size 1em, it’ll be 16px by default; however, it will scale up for users who have a higher browser font size.

So how to calculate REMs from pixels?

If you’re given designs with pixels, it’s probably a safe assumption that these designs had the default browser root font size of 16px in mind. Therefore, you can get the REMs by simply dividing the number of pixels provided by 16:

REMs = pixels / 16

A few examples:

8px = (8 / 16) REMs = 0.5 REMs

16px = (16 / 16) REMs = 1 REM

20px = (20 / 16) REMs = 1.25 REMs

32px = (32 / 16) REMs = 2 REMs

Conclusion

By converting your designs from pixels to REMs, you can both give your designers their vision while also serving the accessibility needs of your users.

If you'd like to support this blog by buying me a coffee I'd really appreciate it!