REM to PX converter

Hello 🙂
I am the creator of this tool and exploring a new related project. To understand the needs, I created a one-page survey: What frustrates you or your team with CSS, theming, design tools or component systems? Thank you for any feedback! 🤩

REM ↔︎ PX conversion tables

REMPixels
0.01rem0.16px
0.03rem0.5px
0.05rem0.8px
0.08rem1.3px
0.1rem1.6px
0.15rem2px
0.2rem3px
0.5rem8px
1rem16px
2rem32px
3rem48px
4rem64px
5rem80px
6rem96px
8rem128px
10rem160px
15rem240px
20rem320px
30rem480px
40rem640px
50rem800px
60rem960px
80rem1280px
100rem1600px
PixelsREM
1px0.06rem
2px0.13rem
3px0.19rem
4px0.3rem
5px0.3rem
6px0.4rem
8px0.5rem
10px0.6rem
12px0.8rem
14px0.9rem
15px0.9rem
16px1rem
18px1.1rem
20px1.3rem
24px1.5rem
25px1.6rem
28px1.8rem
32px2rem
36px2rem
40px3rem
44px3rem
48px3rem
50px3rem
56px4rem
64px4rem
72px5rem
75px5rem
80px5rem
90px6rem
100px6rem

Convert REM to pixels

This calculator converts the CSS unit PX to pixels. The conversion is based on the default font-size of 16 pixel, but can be changed.

With the CSS rem unit you can define a size relative to the font-size of the HTML root tag.

The conversion works of course in both directions, just change the opposite input field.

An example

So if we take the default size as an example, than 1px represents 0.0625rem and, in the other direction, 1rem represents 16px.

EM vs. REM: The differences

Inside a sinlge document, the length of a REM unit is everywhere the same, it can just differ between documents. EM on the other side can differ between every element, because it is relative to the elements own font-size (excpetion is the font-size itself, in it EM is relative to the parent).

REM is the newer unit, older browsers don't support it.

link facebook facebook twitter envelope question clipboard linkedin linkedin menu close