PX to EM Converter

EM is a measurement unit commonly used in Cascading Style Sheets. It is a font-relative unit, which means that it's value is relative to the font-size of it's parent element (read more). This PX to EM Converter eliminates the hassle of converting pixels (px) to em yourself everytime you need to.

In em unit, the base is the value of its parent's font-size. More information about this below.

How to Use PX to EM Converter

Video Tutorial: Convert px to em

PX to EM Conversion Table

The table below displays the common px to em converstions like font-size, break-point, element's min-width, and more. This is given that the font-size of your parent element (some call it container or wrapper) is 16px. You can also use the converter above.

4px 0.25em
8px 0.5em
12px 0.75em
16px 1em
20px 1.25em
24px 1.5em
32px 2em
40px 2.5em
48px 3em
64px 4em
96px 6em
128px 8em
160px 10em
176px 11em
192px 12em
208px 13em
224px 14em
256px 16em
320px 20em
480px 30em
576px 36em
768px 48em
800px 50em
960px 60em
992px 62em
1024px 64em
1120px 70em
1200px 75em
1280px 80em
1440px 90em
1600px 100em
PX to EM Converter

How to Convert PX to EM

Converting the em equivalent of px value is relatively easy. As stated above, em is a font-relative measurement. Which means that whatever the font-size of it's parent element, 1em is equivalent to that font-size.

PX to EM Formula:

em = px / font-size (default is 16px)

This means that if it's parent's font size is 16px. For it's child elements, 1em = 16px.

Difference Between PX and EM

So the difference between PX and EM is pretty simple. Pixels (px) is an absolute unit while em is a font-relative unit which is based on it's parent element.

To elaborate this, say you have an <aside> element with 64px width. It is always 64px width no matter where you put it.

However, it is not the case in em. If you change the font-size of a parent element, it's child elements with em length units will change, too! That's the behavior of a font-relative measurement.