PX to EM Converter
This tool converts pixel (px) values into em units for CSS. Unlike rem, the em unit is relative to the font-size of the element's own (or nearest) parent, so the conversion always depends on the context you place it in. Set the base font size to match your real parent element, type a pixel value, and the em equivalent appears instantly — ready to copy into your stylesheet.
16px = 1em. Change the base font size in the settings to match the parent context where the value will actually be used.When to Reach for EM
Component-Level Sizing
Self-Scaling Spacing
Typographic Rhythm
How to Convert PX to EM
Set the Parent Font Size
Enter the font-size of the parent element in the Base Font Size field (default 16px). This is the value every em result is calculated against.
Enter a Pixel Value
Make sure the px unit tab is selected, then type the pixel value you want to convert. The em equivalent updates as you type.
Read the Result
The em value appears instantly in the results panel, alongside the rem and px equivalents for quick comparison. Adjust the decimal-places setting for the precision you need.
Copy Into Your CSS
Click the copy button next to the em result and paste it straight into your stylesheet — no manual division required.
em = px ÷ parent font-size. For example, 24px ÷ 16px = 1.5em.EM vs REM: Know the Difference
Both are relative units, but they reference different things. The key distinction is compounding: em values stack when elements are nested, while rem always points back to the root.
Relative to the parent
- Based on the nearest parent's font-size
- Compounds across nested elements
- Great for self-contained components
- Context changes the computed value
Relative to the root
- Based on the root (html) font-size
- Never compounds — always predictable
- Great for global layout and typography
- Same value everywhere on the page
1.25em and a child also uses 1.25em, the child renders at 1.25 × 1.25 = ~1.56× the grandparent's size. Always confirm which parent context your em value resolves against.Common PX to EM Conversions
Reference values assuming a 16px parent font size. Change the base in the tool to recalculate for any other context.
| Pixels | EM (16px parent) | Typical Use |
|---|---|---|
| 12px | 0.75em | Captions, fine print |
| 14px | 0.875em | Secondary text, labels |
| 16px | 1em | Body copy baseline |
| 20px | 1.25em | Lead paragraphs, subheads |
| 24px | 1.5em | Section headings |
| 32px | 2em | Page titles |
Frequently Asked Questions
What exactly is the parent font size in this tool?
It is the font-size of the element that your em value will be relative to. The browser computes em against the nearest ancestor's font-size, so set this field to whatever that parent renders at in your real CSS. The default of 16px matches the typical browser default for the body.
How is px converted to em?
Divide the pixel value by the parent font size: em = px ÷ parent. With a 16px parent, 24px becomes 1.5em. This tool does the math instantly and lets you control the number of decimal places shown.
Should I use em or rem?
Use em when you want sizing to scale with the local component — padding that grows with the button's text, for example. Use rem for global layout and typography where you want one predictable value across the whole page. Many designs combine both.
Why do my em values seem to multiply when nested?
That is compounding. Because each em is relative to its parent, nesting elements that each set an em font-size multiplies the effect. If you need values that stay constant no matter how deeply they are nested, use rem instead.
Is the conversion done in my browser?
Yes. The calculation runs entirely client-side as you type. Nothing is sent to a server, so it works instantly and offline once the page has loaded.
No comments yet. Be the first to comment!