PX to EM Converter
This calculation is based on an adjustable default parent element font-size of 16 pixels.
Utilize this free online px to em converter tool to convert any px value to the em CSS unit equivalent value. In CSS, em is a unit of measurement that represents the font-size of the parent element. Em is commonly used in specific instances due to its superior scalability when compared to pixels to help ensure consistency of sizing and spacing throughout UI designs.
1em equals the font-size of the parent element. By default, most browsers use a font-size value of 16px. So, an element with the value 1em will equal 16px. However, if you decide to change the font-size of the parent HTML element from 16px, you can simply input your desired parent element font-size to accurately convert from px to em with this instantaneously bidirectional converter.
PX to EM Conversion Table
| Pixels | EM |
|---|---|
| 1px | 0.0625em |
| 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 |
| 1920px | 120em |
How to Convert PX to EM
To convert px to em you should use the formula em = px/parent-element-font-size(font-size of HTML parent element). For example, if the HTML parent element font-size is set to 32px and you want to convert 64px to em, then 64px = 2em because 64/32 = 2.
PX vs EM
In CSS, the difference between px and em is that px is a unit of absolute length normatively defined as being exactly 1/96th of 1 inch. While, Em is a scalable unit of mesurement that is relative to the font-size of the parent HTML element.
However, using px can create accessibility barriers such as improper scaling of elements in browsers. Therefore, using em instead of px is ideal for more scalable and accessible designs.
EM vs REM
In CSS, the difference between em and rem is that em is a unit of measurement relative to the font-size of the parent HTML element. While rem is a unit of measurement relative to the font-size of the root HTML element.
Despite both em and rem are scalable, if the font-size of a parent HTML element is changed, child elements using em units within that parent HTML container will be affected, while those using rem units will not be affected. Therefore, it is ideal to use rem in most cases because of its simplicity, consistency, and predictability when compared to em.
