Convert PX to EM

Convert all pixels (PX) values to EM in css file for CSS, SCSS, SASS and LESS.

Thanks a lot for using our tool, Please bookmark this URL for later use.

PX ↔︎ EM conversion table

1px 0.063em
2px 0.125em
4px 0.25em
6px 0.375em
8px 0.5em
12px 0.75em
16px 1em
24px 1.5em
32px 2em
40px 2.5em
48px 3em
56px 3.5em
64px 4em
72px 4.5em
80px 5em
88px 5.5em
96px 6em
104px 6.5em
112px 7em
120px 7.5em
128px 8em
136px 8.5em
144px 9em
152px 9.5em
160px 10em
168px 10.5em
176px 11em
184px 11.5em
192px 12em
200px 12.5em
208px 13em
216px 13.5em
224px 14em
232px 14.5em
240px 15em
248px 15.5em
256px 16em
264px 16.5em
272px 17em
280px 17.5em
288px 18em
296px 18.5em
304px 19em
312px 19.5em
320px 20em
328px 20.5em
336px 21em
344px 21.5em
352px 22em
360px 22.5em
Em Px
0.5em 8px
0.75em 12px
1em 16px
1.5em 24px
2em 32px
2.5em 40px
3em 48px
3.5em 56px
4em 64px
4.5em 72px
5em 80px
5.5em 88px
6em 96px
6.5em 104px
7em 112px
7.5em 120px
8em 128px
8.5em 136px
9em 144px
9.5em 152px
10em 160px
10.5em 168px
11em 176px
11.5em 184px
12em 192px
12.5em 200px
13em 208px
13.5em 216px
14em 224px
14.5em 232px
15em 240px
15.5em 248px
16em 256px
16.5em 264px
17em 272px
17.5em 280px
18em 288px
18.5em 296px
19em 304px
19.5em 312px
20em 320px
20.5em 328px
21em 336px
21.5em 344px
22em 352px
22.5em 360px

Advantages of EM over PX

In CSS, "em" and "px" are both units of measuement used to define the size of elements on a web page, but they have different characteristics and use cases. Here are some advantages of using "em" over "px" in your CSS.

Scalability and Accessibility

One of the main advantages of using "em" units is scalability. "em" is a relative unit that is based on the font size of the parent element. This makes it easy to create designs that scale proportionally, adapting well to changes in text size. This scalability is beneficial for accessibility, as users can adjust their browser's text size preferences without breaking the layout.

Flexible and Fluid Layouts

em" units provide a more flexible and fluid approach to designing layouts. Since "em" values are relative to the font size of the parent element, elements sized in "em" can adapt to changes in the text size or the overall design context. This is particularly useful for creating responsive designs that work well on a variety of devices and screen sizes.

Consistent Proportions

Using "em" units helps maintain consistent proportions throughout a design. When elements are sized in "em," they scale with the text, creating a harmonious relationship between different parts of the layout. This consistency is valuable for creating visually appealing designs.

It's important to note that the choice between "em" and "px" often depends on the specific requirements of the project and the design philosophy. While "em" units offer flexibility and scalability, "px" units provide absolute control and may be preferred in certain situations where precise dimensions are crucial. Many modern web designers use a combination of both units based on the specific needs of different elements within a layout.