PX to EM Converter
Drag the ruler or type a pixel value to get its em equivalent instantly. Set a custom base font size, batch-convert a whole list, and copy production-ready CSS — all client-side, nothing leaves your browser.
font-size: 1em; /* 16px ÷ 16px base */
The quick brown fox jumps over the lazy dog — Aa Bb Cc 123
Common px → em conversions at your current base font size (16px). Change the base above and this table updates live.
| Pixels | Em | CSS |
|---|
Paste a list of px values (comma, space or newline separated) to convert them all at once.
| Pixels | Em |
|---|---|
| Click “Convert list” to see results here. | |
What Is an EM Unit in CSS?
An em is a relative length unit in CSS. Instead of describing a fixed number of screen pixels, one em equals the current font size of the element it's applied to — or, for properties like font-size itself, the font size of the parent element. That's the whole idea behind a px to em converter: it translates a fixed pixel measurement into that relative, scalable unit.
Because em scales with its context, text and spacing set in em grow or shrink together when a user changes their browser's default font size, when a component is dropped into a differently-sized container, or when you adjust a single parent font-size to resize an entire card, button, or icon set in one line of CSS.
PX to EM Formula
The conversion itself is simple division — no trigonometry required:
The base font size is the size, in pixels, of the parent element the em value will be relative to. Browsers default the root <html> font size to 16px, so 1em almost always starts out equal to 16px — unless a parent element further up the tree has already changed it.
Worked example: to convert 24px to em on a page with the default 16px base: 24 ÷ 16 = 1.5em. To reverse it, multiply instead: 1.5em × 16px = 24px. The calculator above does exactly this in real time, and lets you override the base font size to match your actual parent element.
EM vs REM vs PX: What's the Difference?
All three units can describe the exact same visual size, but they behave very differently once your layout gets nested or your user changes their settings.
| Unit | Relative to | Best for |
|---|---|---|
| px | Nothing — an absolute value | Borders, shadows, and details that must never scale |
| em | The parent element's font size (compounds with nesting) | Spacing and type that should scale with a specific component, like a button's icon and padding |
| rem | The root <html> font size only | Global typography and layout that should scale consistently, unaffected by nesting |
The trade-off to know: because em is relative to its immediate parent, nested elements compound. If a container is set to 1.5em and a child inside it is also set to 1.5em, that child renders at 1.5 × 1.5 = 2.25× the root size — not 1.5×. This is intentional and useful for things like nested lists, but it can surprise you in deep component trees. rem avoids compounding entirely because it always looks at the root, which is why most design systems default to rem for typography and reserve em for component-local scaling.
Need the root-relative version instead? Use the base-font control above set to your root size (usually 16px), or try the site's combined PX to REM converter.
How to Use This PX to EM Converter
- Enter a pixel value.Type into the PX field, drag the ruler-style base slider, or tap a preset chip like 16px or 24px.
- Set the base font size.This is the parent element's font size the em is relative to — leave it at 16px for the browser default, or match it to your actual component.
- Read the em value instantly.The EM field, the live text preview, and the generated CSS snippet all update as you type — no “Convert” button needed for single values.
- Copy the CSS.Click “Copy CSS” to grab a ready-to-paste
font-sizedeclaration, or switch to Batch mode to convert an entire list of pixel values at once.
Why Use EM Units for Responsive & Accessible Design
- Respects user font-size preferences. Visitors who bump up their browser's default text size for readability see your
em-based type and spacing scale with them — fixedpxvalues ignore that setting entirely. - Keeps components self-contained. Resize a single parent
font-sizeand every child dimension set inem— padding, gaps, icon size, border-radius — scales together, which is ideal for reusable buttons, badges, and cards. - Improves zoom and reflow behavior. Relative units help pages hold up better under browser zoom and the WCAG 2.1 “Resize Text” success criterion, which expects content to remain usable up to 200% zoom.
- Scales cleanly across breakpoints. Adjusting one root or component font size inside a media query can restyle an entire section, instead of rewriting dozens of fixed pixel values.
For the accessibility criterion itself, see the W3C's guidance on resizing text, and for the formal unit definition, the MDN documentation on CSS length units.
Frequently Asked Questions
How do I convert px to em manually?
Divide the pixel value by the base font size of the parent element in pixels: em = px ÷ base. With the common 16px default, 20px becomes 20 ÷ 16 = 1.25em. If a parent already has a different font size — say 18px — divide by 18 instead.
What is the default base font size for em?
Most browsers set the root <html> element's default font size to 16px unless the user has changed their browser settings or your CSS overrides it. That's why 16px is the standard starting point in this calculator, though you can change it to match any parent element.
Is em or rem better for responsive typography?
Neither is universally “better” — they solve different problems. Use rem for global type scales and layout so everything stays anchored to one root size. Use em when you want a specific component's internal spacing and type to scale together relative to that component's own font size.
Why does my em value look different than expected?
Em compounds with nesting — it's always relative to the closest parent's font size, not the root. If a parent already scaled the font size with its own em or percentage value, your child element's effective size multiplies against that, not against 16px. Set the “base font size” field above to the parent's actual rendered size for an accurate result.
Can I convert em back to px?
Yes — click the swap icon (⇄) above, or simply type a value into the EM field; the PX field updates instantly using px = em × base.
Does this tool store or upload my values?
No. Every conversion runs locally in your browser with plain JavaScript. Nothing is sent to a server, and only your last-used base font size is remembered on your own device so the tool opens the way you left it.