Convert pixels to em at any parent font size

A pixel turns into em with a single division: the number of pixels divided by the parent font size. At the browser default the parent is 16px, so 24 pixels give 1.5em and 14 pixels give 0.875em. The em unit refers to the text size of the enclosing element [1].

This is the more frequent direction in daily work. The mock-up arrives with measurements in pixels, because that is how design software counts, and the stylesheet is written in em so that a measurement follows the type size of its place in the layout.

The result carries four decimal places, because at a 16px parent a single pixel is exactly 0.0625em and type sizes produce numbers like 0.875 or 1.125.

Below you will find a table of 30 measurements at three parent sizes, a table of eight situations with the answer on which unit to pick, and two places where em beats rem. The journey the other way is handled by the em to pixels converter.

The formula holds one operation: em = pixels ÷ parent font size. It is the inverse of the multiplication that turns em into pixels.

Take a 20px spacing value: at a parent of 16 it comes to 20 ÷ 16 = 1.25em. The same measurement inside a card set in 14px gives about 1.4286em, and in a 20px heading it gives exactly 1em.

Mock-up measurements often produce fractions: 18 pixels are 1.125em, 22 pixels are 1.375em and 30 pixels are 1.875em. All three are exact and that is how they go into the stylesheet.

If a measurement should give the same result across the whole document whatever the nesting, the same pixel goes into rem through the pixels to rem converter. The difference between the two units is settled by the table on the em to pixels converter.

The first place is the media query. Inside a media query the browser resolves relative units against the initial value of font-size rather than against whatever you set on the html element: the specification says outright that the units are never based on the results of declarations [2]. A breakpoint written as 48em therefore behaves predictably even in a project that changes the base font size.

The second place is email templates. The em unit works in every client in the test set [3], while rem sits at 69.05 percent support and works in no tested version of Outlook, on Windows or on macOS [4]. For an email template the recipient’s client settles the choice for you.

The third place is a component meant to scale as a whole together with its type. Give a button font-size: 1.125em and write its padding and corner radius in em, and a single change of the type size grows the entire button in proportion.

Everywhere else – for type sizes and the spacing scale across a whole site – the predictability of rem matters more. The table below spells out eight concrete situations, and the conversion that way belongs to the pixels to rem converter.