EM to PX Converter

EM to PX Converter is a free online tool you can use to convert em to pixels (px). This way, you don't have to make the manual conversion yourself and you can focus more on what you do.

How to Use EM to PX Converter

Step 1: Enter base value. It is the font-size value of the parent element.
Step 2: Input the em value you want to convert.
Step 3: Press enter key or click the convert button to get it's px equivalent.

Video Tutorial: Convert em to px

EM to PX Conversion Table

So there are common measurements that web developers/designers are using. Like 1em for font-size or 25em for container width. Below are just few of the mostly used em sizes and it's px equivalent.

EM	PX
0.25em	4px
0.5em	8px
0.75em	12px
1em	16px
2em	32px
4em	64px
6.25em	100px
12.5em	200px
15.625em	250px
18.75em	300px
25em	400px
37.5em	600px
50em	800px
75em	1200px

How to Convert EM to PX

Just get the parent's font size of your target element, then multiply your px value. That's how you get it's em equivalent.

EM to PX Formula:


          px =  em * font-size

How EM Works

Example: You have an markup wherein <section> element is a parent of <p> element.

  
    <section>
        <p>how em works.</p>
    </section>

When you assign a font-size on <section> element, automatically, that font-size will be equal to 1em of the <p> element.

  
    section {font-size: 16px}

This means that when I assign 2em font-size on <p> element, like this:

  
    p {font-size: 2em}

The size of <p> element will be 2x bigger.

  
    <section>
       <p>how em works.</p>
    </section>