Free Online Website Design Tool - Convert PX to EM Online

PXtoEM is a free online tool to convert all calculations from PX to EM & convert from EM to PX. Both PX & EM are measurement units used to calculate distance by website designers & online creative artists. This online tool makes the PX to EM conversion easy using charts & assuming 16px as the default browser size.

PX, EM & % are standard units of dimensions used by designers in Style sheets for indicating output to a screen. Unlike absolute units (cm, mm, inch, pt and pc) that are same in CSS as everywhere else & a length expressed in any of these will appear as exactly that size (within the precision of the hardware and software), the units of PX, EM & % are used for web designing for on-screen dimensions.

Absolute units are not recommended for use on screen, because screen sizes vary so much. A big screen may be 60cm (24in), a small, portable screen is maybe only 8cm. And you don’t look at them from the same distance.

Free Web Design tool - Convert EM to PX & Convert PX to EM

The em and ex units depend on the font and may be different for each element in the document. The em is simply the font size. In an element with a 2in font, 1em thus means 2in.

Expressing sizes, such as margins and padding, in em means they are related to the font size, and if the user has a big font (e.g., on a big screen) or a small font (e.g., on a hand held device), the sizes will be in proportion. Declarations such as ‘text-indent: 1.5em’ and ‘margin: 1em’ are extremely common in CSS.

According to the W3.Org Style Guide:

The px unit is the magic unit of CSS. It is not related to the current font and also not related to the absolute units. The px unit is defined to be small but visible, and such that a horizontal 1px wide line can be displayed with sharp edges (no anti-aliasing). What is sharp, small and visible depends on the device and the way it is used: do you hold it close to your eyes, like a mobile phone, at arms length, like a computer monitor, or somewhere in between, like a book? The px is thus not defined as a constant length, but as something that depends on the type of device and its typical use.

To get an idea of the appearance of a px, imagine a CRT computer monitor from the 1990s: the smallest dot it can display measures about 1/100th of an inch (0.25mm) or a little more. The px unit got its name from those screen pixels.

Nowadays there are devices that could in principle display smaller sharp dots (although you might need a magnifier to see them). But documents from the last century that used px in CSS still look the same, no matter what the device.

Printers, especially, can display sharp lines with much smaller details than 1px, but even on printers, a 1px line looks very much the same as it would look on a computer monitor. Devices change, but the px always has the same visual appearance.