You've been there. Figma hands you 24px. Your component has a parent with font-size: 20px. You open some random px-to-em converter, type 24, and it spits out 1.5em.
Wrong. That's calculated against 16px, not your actual parent. You paste it in, something looks slightly off, you squint at it for 10 minutes, and eventually pull up DevTools to figure out what happened.
This post explains why em is context-dependent, how the formula actually works, and walks through the tool I built to fix this exact frustration.
The Formula (And Why It Trips People Up)
The math is simple:
em = px ÷ parent font-size (px)
px = em × parent font-size (px)
So 24px with a 16px parent = 1.5em. Clean.
But here's what most tutorials gloss over: em isn't relative to the browser default or the document root — it's relative to the computed font-size of the parent element.
That sounds obvious. But in practice?
html { font-size: 16px; }
.card { font-size: 1.25em; } /* computed: 20px */
.card-body { font-size: 0.9em; } /* computed: 18px (20 × 0.9) */
.card-body p { font-size: 0.875em; } /* computed: 15.75px (18 × 0.875) */
Each level multiplies against its parent's computed size. This is called EM compounding, and it's why you sometimes end up with 11px text when you thought you set 0.875em.
The fix is to always check the actual computed font-size in DevTools, not the declared value — and use that as your parent reference when converting.
What Most PX→EM Tools Get Wrong
I tested every tool that shows up on Google for "px to em converter":
| Tool | Live Formula? | Configurable Parent? | Bulk Convert? | Tailwind Output? |
|---|---|---|---|---|
| w3schools reference | ❌ | ❌ | ❌ | ❌ |
| nekocalc.com | ❌ | ✅ | ❌ | ❌ |
| pixelsconverter.com | ❌ | ✅ | ❌ | ❌ |
| giantfocal.com | ❌ | ❌ | ❌ | ❌ |
| WebToolsHub | ✅ | ✅ | ✅ | ✅ |
The live formula display is the thing I care about most. When you see 24px ÷ 16px (parent) = 1.5em right there on screen, you understand what's happening — you're not treating the tool as a black box.
The Tool: What It Actually Does
I built this PX to EM converter with the workflow of an actual frontend developer in mind. Here's what makes it different:
1. Bidirectional Conversion with Swap
Toggle between PX → EM and EM → PX. The swap button (⇄) flips direction and moves your current result into the input — useful for chain conversions like "I have 1.5em, what's that in px at 20px parent, then convert that back to em at 14px parent."
2. Live Formula Bar
As you type, you see:
24px ÷ 16px (parent) = 1.5em
No black box. You see the math. You catch mistakes immediately.
3. Configurable Parent Font Size
This is the feature that makes the tool actually correct. Default is 16px, but you can set it to anything. Change it to 20px and your 24px becomes 1.2em — which is the right answer when your parent is 20px.
Every section (main converter, bulk rows, reference table) reacts to this setting instantly.
4. Quick-Copy Property Cards
Four cards appear after conversion:
font-size: 1.5em; /* click to copy */
margin: 1.5em; /* click to copy */
padding: 1.5em; /* click to copy */
gap: 1.5em; /* click to copy */
The card flashes green on copy. Small thing, but it's faster than manually typing the property name every time.
5. CSS Snippet + Tailwind Arbitrary Value
font-size: 1.5em; /* 24px */
text-[1.5em] ← Tailwind arbitrary value
The comment preserving the original px value is intentional — keep it in your CSS. Six months later when you're debugging, you'll thank yourself.
6. Bulk Converter
For design systems, I usually need to convert an entire type scale at once:
Input: 16, 20, 24, 32, 48px
Output: 1em, 1.25em, 1.5em, 2em, 3em (at 16px parent)
Add rows, edit values, hit "Copy All." If you're working with a custom parent, change the parent field and every row updates.
7. 1–100px Reference Table (3 paginated ranges)
Paginated into 1–20px, 21–50px, 51–100px so the page doesn't turn into a massive scroll. Every row has a copy icon. The whole table recalculates when you change the parent font size.
8. EM vs REM vs PX Explainer (Collapsible)
For those moments when you're onboarding a junior dev or just can't remember which unit anchors to root:
| Unit | Relative To | Compounds? |
|---|---|---|
px |
Nothing (absolute) | N/A |
em |
Parent element font-size | ✅ Yes |
rem |
Root html font-size |
❌ No |
em vs rem: My Practical Rule
I've settled on this:
remfor type scale and layout.emfor component internals.
A button's font-size is 0.875rem (anchored to root, predictable). But its padding is 0.5em 1em — so if you want a "large button" you just change font-size: 1.1rem and the padding scales automatically with it.
That's the real power of em — not typography, but proportional spacing within a component.
Common Mistakes (Real Ones From Real Projects)
Mistake 1: Using default 16px when your parent isn't 16px
Every time you open a converter and just type a number without checking what the actual parent font size is, you might be wrong. 16px is a default, not a constant.
Mistake 2: Using em for font-size in nested components
Three levels of 1.2em = 1.728em effective. This is almost never what you want. Use rem for font sizes.
Mistake 3: Deleting the px comment from your CSS
font-size: 1.5em is meaningless without knowing it came from 24px at 16px parent. Keep the comment. Future you will not remember.
Mistake 4: The 62.5% trick messing up your calculations
Some codebases set html { font-size: 62.5%; } to make 1rem = 10px. If you're working in one of those, your em calculations are also off because parent sizes are now computed differently down the tree.
Try It
→ PX to EM Converter — WebToolsHub
100% client-side. No account. No data sent to a server. Works offline once loaded.
If you also work with rem, I built a PX to REM Converter with the same interface — same live formula, same bulk converter, but anchored to root instead of parent.
Quick Reference Table (16px parent)
| px | em | px | em |
|---|---|---|---|
| 10px | 0.625em | 24px | 1.5em |
| 12px | 0.75em | 32px | 2em |
| 14px | 0.875em | 40px | 2.5em |
| 16px | 1em | 48px | 3em |
| 18px | 1.125em | 64px | 4em |
| 20px | 1.25em | 80px | 5em |
What's your rule of thumb for when to use em vs rem? Drop it in the comments — I'm curious how others think about this.
Top comments (0)