PX to EM 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! 🤩

PX ↔︎ EM conversion tables

PixelsEM
1px0.06em
2px0.13em
3px0.19em
4px0.3em
5px0.3em
6px0.4em
8px0.5em
10px0.6em
12px0.8em
14px0.9em
15px0.9em
16px1em
18px1.1em
20px1.3em
24px1.5em
25px1.6em
28px1.8em
32px2em
36px2em
40px3em
44px3em
48px3em
50px3em
56px4em
64px4em
72px5em
75px5em
80px5em
90px6em
100px6em
EMPixels
0.01em0.16px
0.03em0.5px
0.05em0.8px
0.08em1.3px
0.1em1.6px
0.15em2px
0.2em3px
0.5em8px
1em16px
2em32px
3em48px
4em64px
5em80px
6em96px
8em128px
10em160px
15em240px
20em320px
30em480px
40em640px
50em800px
60em960px
80em1280px
100em1600px

Convert pixels to EM

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

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.0625em and, in the other direction, 1em 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