EM to PX Converter
This calculation is based on an adjustable default parent element font-size of 16 pixels.
Use this free online em to px converter tool to convert any em value to the equivalent px CSS unit value. A px is a CSS unit of measurement that represents absolute length which is normatively defined as being equivalent to 1/96th of an inch.
Most browsers utilize a default font-size value of 16px. So, 1em is equivalent to 16px by default. However, if you decided to change the default font-size value of a parent HTML element, you can easily input your changed parent element font-size value to accurately convert from em to px using this instantaneously bidirectional converter.
EM to PX Conversion Table
| EM | Pixels |
|---|---|
| 0.0625rem | 1px |
| 0.25rem | 4px |
| 0.5rem | 8px |
| 0.75rem | 12px |
| 1rem | 16px |
| 1.25rem | 20px |
| 1.5rem | 24px |
| 2rem | 32px |
| 2.5rem | 40px |
| 3rem | 48px |
| 4rem | 64px |
| 6rem | 96px |
| 8rem | 128px |
| 10rem | 160px |
| 11rem | 176px |
| 12rem | 192px |
| 13rem | 208px |
| 14rem | 224px |
| 16rem | 256px |
| 20rem | 320px |
| 30rem | 480px |
| 36rem | 576px |
| 48rem | 768px |
| 50rem | 800px |
| 60rem | 960px |
| 62rem | 992px |
| 64rem | 1024px |
| 70rem | 1120px |
| 75rem | 1200px |
| 80rem | 1280px |
| 90rem | 1440px |
| 100rem | 1600px |
| 120rem | 1920px |
How to Convert EM to PX
To convert em to px you should use the formula px = em * parent-element-font-size(font-size of HTML parent element). For example, if the HTML parent element font-size is 32px and you want to convert 3em to px, then 3em = 96px because 3*32 = 96.
EM vs PX
The difference between em and px is that em is a scalable CSS unit of measurement that is relative to the font-size of the parent HTML element. While a px is a unit of absolute length which is normatively defined as being exactly 1/96th of 1 inch.
However, the use of px can create accessibility barriers such as not properly scaling the font-size in browsers. This is why it is better to use em due to it being a scalable CSS unit of measurement.
EM vs REM
The difference between em and rem is that em is a CSS unit of measurement relative to the font-size of the parent HTML element. On the other hand, rem is a CSS unit of measurement relative to the font-size of the root HTML element.
Though both em and rem are scalable and relative units of size, when the font-size of a parent HTML element is changed, child elements utilizing em units within that parent HTML container will be affected, however, those using rem units will not be affected. Therefore, it is better in most cases to use rem because of its simplicity, consistency, and predictability when compared to em.