Taking the mock-up into code
The design gives 24 pixels of spacing and the stylesheet should receive 1.5em. It is the most frequent trip in interface work.
Convert pixels to em at any parent font size
At the browser default 24 pixels are 1.5em and 14 pixels are 0.875em. Enter the measurement from your mock-up, set the parent font size and paste the result straight into the stylesheet.
Loading tool editor...
ADVERTISEMENT
Why convert pixels to em?
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.
How to work out pixels to em by hand
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.
ADVERTISEMENT
How many em are in common pixel values?
| Value in pixels | 16px parent (default) | 14px parent (card) | 20px parent (heading) |
|---|---|---|---|
| 1 px | 0.0625 em | 0.0714 em | 0.05 em |
| 2 px | 0.125 em | 0.1429 em | 0.1 em |
| 4 px | 0.25 em | 0.2857 em | 0.2 em |
| 6 px | 0.375 em | 0.4286 em | 0.3 em |
| 8 px | 0.5 em | 0.5714 em | 0.4 em |
| 10 px | 0.625 em | 0.7143 em | 0.5 em |
| 12 px | 0.75 em | 0.8571 em | 0.6 em |
| 13 px | 0.8125 em | 0.9286 em | 0.65 em |
| 14 px | 0.875 em | 1 em | 0.7 em |
| 15 px | 0.9375 em | 1.0714 em | 0.75 em |
| 16 px | 1 em | 1.1429 em | 0.8 em |
| 18 px | 1.125 em | 1.2857 em | 0.9 em |
| 20 px | 1.25 em | 1.4286 em | 1 em |
| 21 px | 1.3125 em | 1.5 em | 1.05 em |
| 22 px | 1.375 em | 1.5714 em | 1.1 em |
| 24 px | 1.5 em | 1.7143 em | 1.2 em |
| 26 px | 1.625 em | 1.8571 em | 1.3 em |
| 28 px | 1.75 em | 2 em | 1.4 em |
| 30 px | 1.875 em | 2.1429 em | 1.5 em |
| 32 px | 2 em | 2.2857 em | 1.6 em |
| 36 px | 2.25 em | 2.5714 em | 1.8 em |
| 40 px | 2.5 em | 2.8571 em | 2 em |
| 44 px | 2.75 em | 3.1429 em | 2.2 em |
| 48 px | 3 em | 3.4286 em | 2.4 em |
| 56 px | 3.5 em | 4 em | 2.8 em |
| 64 px | 4 em | 4.5714 em | 3.2 em |
| 72 px | 4.5 em | 5.1429 em | 3.6 em |
| 80 px | 5 em | 5.7143 em | 4 em |
| 96 px | 6 em | 6.8571 em | 4.8 em |
| 128 px | 8 em | 9.1429 em | 6.4 em |
The three parent sizes cover three situations: 16px is the browser default, 14px is what you meet in interface cards and tables, and 20px in a section heading.
Where does em beat rem?
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.
ADVERTISEMENT
Which unit fits which situation?
| Situation | Unit | Why |
|---|---|---|
| Type size of headings and body copy | rem | The result stays the same across the document, whatever the nesting |
| Space around button text | em | Padding follows the button type, so one change scales the whole element |
| Indent of a nested list | em | The indent should grow along with the type of that list level |
| Breakpoint in a media query | em | The browser counts from the initial font size, not from the html element |
| Measurements in an email template | em | Supported in every tested client, while rem drops out in Outlook |
| Border width and shadow | px | A hairline should stay a hairline whatever the type size |
| Spacing scale in a design system | rem | One change of the base font size shifts the whole layout at once |
| Maximum width of a text column | em | Line length is measured in characters, so width follows the column type |
Eight situations that come back in every interface project, with the unit and the reason behind it.
The pixel and em side by side
| Property | px | em |
|---|---|---|
| Point of reference | None, an absolute value | Font size of the parent element |
| Default value | 1px = 1/96 inch | 1em = 16px |
| Under nesting | Always the same value | Compounds at every level |
| Response to reader settings | Stays unchanged | Scales along with them |
| Where it is given | Mock-ups, design software, image files | Stylesheets, email templates |
| Typical use | Borders, shadows, hairlines | Space around text, list indents, breakpoints |
ADVERTISEMENT
When will you need this conversion?
An email template
Rem drops out in Outlook, so relative measurements are written in em. The converter turns mock-up pixels into ready values.A layout breakpoint
A 48em breakpoint behaves predictably, because inside a media query the browser counts from the default text size.A component scaled by one parameter
Button padding and corner radius written in em grow along with its type, so one declaration resizes the whole element.
Convert Pixels to other units
Explore other unit converters
pt to pxrem to pxem to pxcm to pxmm to pxcm to inchesinches to cmmm to inchesinches to mmmiles to kmkm to milesmeters to feetfeet to metersinches to feetfeet to incheslb to ozoz to lbml to ozoz to mlliters to gallonsgallons to literskg to lblb to kgkg to gg to kgkg to stonestone to kginches to pxfeet to pxpica to pxmeters to pxHEX to RGBRGB to CMYKbytes to KBKB to bytesKB to MBMB to KBMB to GBGB to MBKB to GBGB to KBGB to TBTB to GBKB to TBTB to KBUnix to dateDEC to BINDEC to HEXMbps to MB/s
Sources
- CSS Values and Units Module Level 4 — W3C
- Media Queries Level 4 – Units — W3C
- CSS unit: em — Can I email
- CSS unit: rem — Can I email
Every figure in the tables was computed from the unit definitions and checked arithmetically before publication. Historical values and the names of local units come from the sources listed above.
Content last reviewed: · written and checked by the Arteon team
Frequently asked questions
How many em is 1 pixel?
At the default 16px parent one pixel is 0.0625em. Inside a card set in 14px that same pixel gives about 0.0714em, and in a 20px heading it gives 0.05em.
How do you convert px to em?
Divide the number of pixels by the parent font size. At the default 16px it comes to 24 ÷ 16 = 1.5em. The converter above performs that division for any parent size from 1 to 200px.
How many em is 24px?
1.5em at a 16px parent, about 1.7143em at a 14px parent and 1.2em at 20px. The value 1.5em is a common heading size inside a section.
How many em is 14px?
0.875em at the default 16px parent. Inside a card whose type is already 14px the same measurement is exactly 1em.
How many em is 16px?
1em at the default 16px parent. At a 14px parent it comes to about 1.1429em, and at 20px to 0.8em.
How many em is 12px?
0.75em at a 16px parent. It is the smallest type size in common interface use; below it reading becomes uncomfortable.
Should the result in em be rounded?
Values such as 0.875 or 1.125em are written as they are. The browser calculates them exactly, while rounding to 0.88em would shift the measurement by a fraction of a pixel. Dividing by 14 produces repeating decimals, and there four places are enough.
Which unit should I use in a media query?
Em. Inside a media query the browser resolves relative units against the initial value of font-size rather than against the value set on the html element, so a breakpoint written as 48em behaves predictably even in a project that changes the base font size.
Does em work in email templates?
Yes, in every client in the test set. The rem unit sits at 69.05 percent support and works in no tested version of Outlook, which is why relative measurements in email templates are written in em.
Should the whole stylesheet move to em?
Space around text, list indents and column widths yes, because they should follow the type of their context. Type sizes and the spacing scale across a whole site come out better in rem, and borders, shadows and hairlines stay in pixels.
What is the difference between em and rem at the same measurement?
The same 1.5em gives a different result at every level of nesting, because it counts from the parent. A 1.5rem gives 24 pixels across the document, because it counts from the html element. For measurements meant to be identical everywhere, rem is the pick.
Do design programs show values in em?
Figma, Photoshop and Illustrator count in pixels or points and have no em unit. A mock-up measurement is converted separately – with this converter, or by reading the resolved value in the Computed tab of the browser developer tools.
Help us improve our tools
Have an idea for a feature, found a bug, or want to suggest another tool? Write to us – we reply within 24 hours.