Formula
em = px / parent font size
Quick Reference (Parent Font Size (px): 16)
| EM | Pixels (px) |
|---|---|
| 8 | 128 |
| 10 | 160 |
| 12 | 192 |
| 14 | 224 |
| 16 | 256 |
| 18 | 288 |
| 20 | 320 |
| 24 | 384 |
| 28 | 448 |
| 32 | 512 |
| 36 | 576 |
| 40 | 640 |
| 48 | 768 |
| 56 | 896 |
| 64 | 1,024 |
Calculators
EM to PX Converter
To convert EM to pixels, multiply the em value by the parent element's font size. If the parent is 16px: 1em = 16px, 1.5em = 24px, 2em = 32px. Unlike REM, EM is relative to the parent, not the root.
Convert EM to pixels for CSS. Set the parent font size and convert em values to absolute pixel widths with formula examples. Free EM to PX calculator.
EM to PX Converter
To convert EM to pixels, multiply the em value by the parent element's font size. If the parent is 16px: 1em = 16px, 1.5em = 24px, 2em = 32px. Unlike REM, EM is relative to the parent, not the root.
Convert EM to pixels for CSS. Set the parent font size and convert em values to absolute pixel widths with formula examples. Free EM to PX calculator.
How EM resolves in real CSS
EM is not tied to the browser default by itself. It resolves against the computed font size of the element's parent, and that parent may already be using pixels, REM, percent, or another EM value. That is why the same value can produce different pixel sizes in two parts of the same layout.
The safe conversion workflow is simple: inspect the parent's computed font size, multiply by the EM value, then check the result in DevTools. A card with a 20px parent font size turns 1.25em into 25px. The same 1.25em inside a 14px caption becomes 17.5px.
Common EM to PX values
| EM | At 16px parent | At 18px parent | At 20px parent |
|---|---|---|---|
| 0.75em | 12px | 13.5px | 15px |
| 1em | 16px | 18px | 20px |
| 1.25em | 20px | 22.5px | 25px |
| 1.5em | 24px | 27px | 30px |
| 2em | 32px | 36px | 40px |
Where EM is useful
EM works best for component internals. If a button's text grows, padding set in EM grows with it. If a badge uses 0.75em horizontal padding, the badge stays visually balanced when the component is reused at a larger text size.
- Use EM for padding, gaps, icon offsets, and border radius inside a component.
- Use REM for site-wide spacing scales and typography tokens.
- Use PX for one-pixel borders, shadows, and hard alignment details.
The compounding problem
Nested EM values multiply. A parent set to 1.25em inside a 16px root becomes 20px. A child set to 1.25em inside that parent becomes 25px, not 20px. One more nested 1.25em level becomes 31.25px. This is the main reason large design systems use REM for global type scales and reserve EM for intentional component-level scaling.
Practical Quality Notes for EM to PX Converter
This calculator is most helpful when the result is tied to a real workflow, not treated as a loose number. For EM to PX Converter, verify the CSS reference value, the component context, and the viewport or font-size setting used by the layout. That context prevents the common mistake of copying a pixel value into a print, web, or CSS workflow where the reference size is different.
EM to PX Converter depends on the parent or current element font size, so nested components can compound if each layer uses em sizing. If the number looks unexpectedly large or small, check the unit direction first, then check the DPI, base font size, viewport width, or physical measurement that controls the calculation.
A good review pass for EM to PX Converter is simple: calculate once, compare against a known example, and preview the final output at the size people will actually see. To convert EM to pixels, multiply the em value by the parent element's font size. If the parent is 16px: 1em = 16px, 1.5em = 24px, 2em = 32px. Unlike REM, EM is relative to the parent, not the root.
Checks Before You Use the Result
- Confirm that EM to PX Converter is using the same input unit your source file or design brief uses.
- Save the DPI, viewport, or font-size setting next to the final EM to PX Converter value so another person can reproduce it.
- Preview the EM to PX Converter output on the target medium before sending it to print, publishing it, or adding it to CSS.
- Recalculate EM to PX Converter after resizing, cropping, changing aspect ratio, or changing the root font-size or viewport assumption.
When the Number Needs a Second Look
Recheck the result if the project moves from screen to print, from desktop to mobile, from one social platform placement to another, or from a draft export to a production file. Small context changes can make a correct EM to PX Converter answer wrong for the final job.
Sources
Reference Sources
These external references support the page's conversion formulas, resolution guidance, and unit explanations.
w3.org
W3C: CSS Values and Units Module Level 4
Specification covering absolute lengths and resolution units such as px, in, cm, mm, pt, and dpi.
Visit source
developer.mozilla.org
MDN: CSS values and units
Reference guide for CSS measurement units and how browsers interpret physical and relative sizes.
Visit source
developer.mozilla.org
MDN: <resolution>
Reference for resolution units including dpi, dppx, and dpcm used in screen and print discussions.
Visit source
developer.mozilla.org
MDN: image-resolution
Explains how raster image resolution metadata interacts with CSS and print-oriented image workflows.
Visit source
Frequently Asked Questions
Multiply the em value by the parent element's computed font size. If the parent is 16px: 1em = 16px, 1.5em = 24px, 2em = 32px. If the parent is 18px: 1em = 18px, 2em = 36px. EM is always relative to its immediate parent (or its own font-size when used on the font-size property itself).
Because each EM resolves against its parent, nested components multiply. A 1.2em font on a child of a 1.2em parent renders at 1.44x the root size (1.2 × 1.2). This makes EM powerful for modular scaling but tricky for global consistency, use REM when you want predictable site-wide sizing.
Use EM for component-level scaling where child elements should track their parent's size (e.g., a card component whose padding and border-radius scale with its font-size). Use REM for global consistency across the whole page. Use PX for exact values unaffected by font-size changes.
Only when the parent element's computed font size is 16px. Most browsers default to 16px for the root, so a top-level 1em usually equals 16px. But once you nest inside elements that change font-size, EM multiplies accordingly.
PX is absolute, 16px is always 16 physical pixels (adjusted for device pixel ratio). EM is relative, 16em is 16 times the parent's font-size, which may itself scale with user preferences or media queries. EM makes typography more accessible and responsive; PX is predictable but rigid.