A Free Pixel to EM CSS Unit Converter Tool With The Live Text Preview!
Font Size = 0.625em & Base Font Size = 16px
[Sample Text]
Enter the pixels value that you want to convert in the Pixels box and the tool will display the calculated em in the EM box (no need to press Enter or click on any buttons for conversions!)
The tool also works vice versa. So, you can do em to px conversions by entering the value in EM box and the tool will display the calculated px value in the Pixels box.
The Live Preview Feature: The tool also shows the live text preview to give you an idea of how big or small the value you are converting is, making web designing a little more convenient for you.
As per base font size - 16px.
| Pixels | EM |
| 1px | 0.0625em |
| 2px | 0.125em |
| 4px | 0.25em |
| 6px | 0.375em |
| 8px | 0.5em |
| 10px | 0.625em |
| 12px | 0.75em |
| 14px | 0.875em |
| 15px | 0.9375em |
| 16px | 1em |
| 18px | 1.125em |
| 20px | 1.25em |
| 21px | 1.3125em |
| 22px | 1.375em |
| 24px | 1.5em |
| 25px | 1.5625em |
| 26px | 1.625em |
| 28px | 1.75em |
| 30px | 1.875em |
| 32px | 2em |
| Pixels | EM |
| 34px | 2.125em |
| 36px | 2.25em |
| 38px | 2.375em |
| 40px | 2.5em |
| 42px | 2.625em |
| 44px | 2.75em |
| 48px | 3em |
| 50px | 3.125em |
| 54px | 3.375em |
| 56px | 3.5em |
| 64px | 4em |
| 72px | 4.5em |
| 96px | 6em |
| 100px | 6.25em |
| 120px | 7.5em |
| 144px | 9em |
| 168px | 10.5em |
| 192px | 12em |
| 216px | 13.5em |
| 240px | 15em |
To do conversions for other px, em or base font size use the tool above.
EM is a CSS unit that is relative to the font-size of the parent element.
Let's understand it with an example.
Let's say there's a <div> and you have defined the font-size for it to be 16px. Now if you use a <p> tag and give it the size of 1em, then the font-size of <p> would be equivalent to 16px because em is relative css unit to the font-size of the parent element.
Similarly, if the font-size of the <div> would be 20px, then the font-size of <p> would be 20px.
Converting px to em is an easy math. You just have to divide the px value that you want to convert with the base font size a.k.a parent element's font size.
The formula to convert pixels to em:
em = px / base font-size
Let's say you want to convert 16px to em, then as per the formula above, you've to divide 16 with the base font-size.
Now, if the base font-size is 16px, then 16 divided by 16 is 1.
So, 16px is equals to 1em.
This is how you can convert px to em.
This PX to EM converter tool does calculations using the same formula and allows you to do conversions in much fast and easy way than doing this calculation manually.