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
| PX | Em |
|---|---|
| 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.