About the PX to EM Converter
Em units are relative to the font size of the element they sit on, or to its parent when the property being set is font-size itself. That local relationship makes em a good pick for padding and margins that should grow with the text of one component rather than with the page as a whole.
This tool divides your pixel figures by a reference font size you control. In the usual 16px context, 8px is 0.5em, 20px is 1.25em and 32px is 2em. Set the reference to the actual computed font size of the element you are styling rather than always leaving it at 16, because a button with 14px text needs its padding divided by 14 to come out right.
The catch with em is compounding. If a list item sets font-size in em and its parent already did, the factors multiply, and three levels of nesting can produce text noticeably smaller or larger than intended. Design systems usually sidestep that by sizing type in rem and reserving em for spacing inside a component. Check any suspicious value with EM to PX.
How to use
- Enter the pixel values, one per line.
- Set the reference font size of the element you are styling.
- Copy the em values into your rule.
- Use the table for the sizes you reuse.
Common questions
- What is the difference between em and rem?
- Em is relative to the current element or its parent, while rem is always relative to the root element.
- Which reference size should I enter?
- The computed font size of the element the em value will apply to. For plain body text that is often 16px.
- Why did my nested em sizes shrink?
- Em multiplies through nesting. Two nested rules of 0.9em give 0.81 of the original size.
- Does em work in media queries?
- Yes, and there it is measured against the initial font size, which some teams prefer over pixel breakpoints.