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