PX to EM Calculator

px
px
em

PX to EM Conversion Table

PX EM

How to use

PX to EM Calculator

  1. Enter the Base Font Size: This size is generally set in the CSS for the 'body' element on a page. The standard default value is 16px, but it could be different based on the design requirements.
  2. Enter a value in either the PX or EM field: If you have a pixel value that you need to convert to EMs, enter it in the PX field. If you have an EM value that you need to convert to pixels, enter it in the EM field.
  3. The calculator will automatically perform the conversion and display the result in the field of the measurement unit you are converting to.

PX to EM Conversion Table

The Conversion Table provides a handy reference for converting between pixel and EM values based on the body font size you have entered. The table includes conversions for a range of common values. You can use this table to quickly look up how different pixel values would be represented in EMs. Note that this table will update its values automatically whenever you change the body font size in the calculator.

History of px and em

Pixels (px)

The pixel, short for 'picture element', is the smallest unit of a digital image or display. It was first established as a standard in the realm of computer graphics, where screen images were built up from a grid of small, uniformly-sized dots.

Early computer displays often had resolutions of about 100 pixels per inch, so a pixel was roughly equivalent to a dot from a course dot-matrix printer. However, as display technology has improved, the size of screen pixels has shrunk, and screen resolutions have increased.

In the context of web design, a pixel refers to a CSS pixel, which is a more abstract unit designed to maintain consistent sizing across devices. A CSS pixel may encompass multiple physical screen pixels on a high-resolution device.

Ems (em)

The term "em" has its roots in typography and predates digital technology. Originally, an 'em' was defined as the width of the capital letter 'M' in the current typeface and size. It was a relative unit, and its exact size could vary widely depending on the design of the typeface.

In the context of digital typography and CSS, an 'em' is a relative unit that corresponds to the current font size. If the font size is 16 pixels, then 1 em equals 16 pixels. The benefit of using ems is that they allow for relative sizing, which can make layouts more flexible and accessible. For instance, if a user changes their browser's base font size for accessibility reasons, elements sized in ems will scale accordingly.