Formula
em = px / parent font size
Quick Reference (Parent Font Size (px): 16)
| Pixels (px) | EM |
|---|---|
| 8 | 0.5 |
| 10 | 0.625 |
| 12 | 0.75 |
| 14 | 0.875 |
| 16 | 1 |
| 18 | 1.125 |
| 20 | 1.25 |
| 24 | 1.5 |
| 28 | 1.75 |
| 32 | 2 |
| 36 | 2.25 |
| 40 | 2.5 |
| 48 | 3 |
| 56 | 3.5 |
| 64 | 4 |
CSS Converters
PX to EM Converter: Convert Pixels to EM Units Online
To convert pixels to EM, divide pixels by the parent element's font size. If parent is 16px, then 24px equals 1.5em. Unlike REM, EM is relative to the parent, not the root.
Convert PX to EM units for CSS. Set parent font size and convert pixels to em values. Includes EM to PX reverse converter. Free online CSS unit converter.
PX to EM Converter: Convert Pixels to EM Units Online
To convert pixels to EM, divide pixels by the parent element's font size. If parent is 16px, then 24px equals 1.5em. Unlike REM, EM is relative to the parent, not the root.
Convert PX to EM units for CSS. Set parent font size and convert pixels to em values. Includes EM to PX reverse converter. Free online CSS unit converter.
How the PX to EM Converter Works
The EM unit in CSS is relative to the font-size of the element itself (or its parent when used for properties other than font-size). The conversion formula is: em = px / parent-font-size. With a default parent font-size of 16px, 24px becomes 24/16 = 1.5em, 12px becomes 0.75em, and 32px becomes 2em. The PX to EM converter handles this division and lets you override the parent size to match a specific component context.
The catch with EM is that it cascades. If a div has font-size: 1.5em and contains a span with font-size: 1.5em, the span ends up at 1.5 x 1.5 = 2.25em relative to the root. This cascading behavior helps when you want a component to scale proportionally with its container, but it's also the compounding problem that pushed developers toward REM for root-consistent sizing. Our em-vs-rem comparison goes deeper, and the px-to-rem tool covers the root-based alternative.
EM works well for component-relative spacing. Setting button padding to 0.5em 1em guarantees the padding scales with the button's own font size. Increase the button from 14px to 18px and the padding grows proportionally without any extra code. That's why design systems like Bootstrap and Tailwind use EM for many internal spacing tokens.
When to Use EM Over Other Units
EM is the right choice when you want sizing tied to a specific component's font-size rather than the page root. Typical scenarios include:
- Button, badge, and chip padding that should scale with text size - 0.5em 1em works at every size.
- Heading letter-spacing, where the gap should grow and shrink with the heading's own font-size.
- Icon sizing inline with text - font-size: 1em on an SVG makes it match the surrounding copy.
- Media query breakpoints (e.g. @media (min-width: 48em)) which respond to user font-size preferences.
- Form control internal padding and border radii, so controls remain proportional as text scales.
- Nested list indentation where each level should indent relative to its own font-size.
Practical Examples
The table below shows the most common pixel values converted to EM, assuming a standard 16px parent font-size. Use the converter above for any non-standard parent context.
| Pixels | EM (at 16px base) | EM (at 14px base) | EM (at 20px base) |
|---|---|---|---|
| 10px | 0.625em | 0.714em | 0.5em |
| 12px | 0.75em | 0.857em | 0.6em |
| 14px | 0.875em | 1em | 0.7em |
| 16px | 1em | 1.143em | 0.8em |
| 18px | 1.125em | 1.286em | 0.9em |
| 20px | 1.25em | 1.429em | 1em |
| 24px | 1.5em | 1.714em | 1.2em |
| 32px | 2em | 2.286em | 1.6em |
| 48px | 3em | 3.429em | 2.4em |
Common Mistakes to Avoid
EM's compounding behavior makes it powerful but error-prone. Watch for these traps when refactoring px values to em.
- Assuming 1em always equals 16px. It only does when the parent's computed font-size is 16px, which isn't guaranteed inside nested components.
- Using EM for deeply nested text where compounding makes the innermost element surprisingly large or small.
- Mixing EM and REM without a clear rule. Inconsistent usage makes sizing drift unpredictably across the codebase.
- Forgetting that EM on the font-size property is relative to the parent, while EM on other properties is relative to the element's own font-size.
- Hard-coding pixel equivalents in comments that go stale when someone changes the parent font-size.
- Using EM for layout widths where the cascading behavior produces hard-to-debug sizing.
Practical Quality Notes for PX to EM Converter
This calculator is most helpful when the result is tied to a real workflow, not treated as a loose number. For PX to EM 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.
PX to EM 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 PX to EM Converter is simple: calculate once, compare against a known example, and preview the final output at the size people will actually see. To convert pixels to EM, divide pixels by the parent element's font size. If parent is 16px, then 24px equals 1.5em. Unlike REM, EM is relative to the parent, not the root.
Checks Before You Use the Result
- Confirm that PX to EM 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 PX to EM Converter value so another person can reproduce it.
- Preview the PX to EM Converter output on the target medium before sending it to print, publishing it, or adding it to CSS.
- Recalculate PX to EM 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 PX to EM 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
Frequently Asked Questions
Rem is always relative to the ROOT element (html) font size. Em is relative to the PARENT element's font size. Rem is predictable and consistent sitewide. Em compounds through nesting, which can cause unexpected sizes in deeply nested elements.
Divide the pixel value by the parent element's font size. Formula: em = px / parent font size. If the parent is 16px: 24px = 1.5em. If the parent is 20px: 24px = 1.2em.
1em when the parent font size is 16px. But if the parent is 20px, 16px = 0.8em. Em is always relative to the parent, not the root.
Use em when you want sizing relative to the component's own font size. For example, padding of 1em around text always creates proportional spacing regardless of the text size. Use rem for consistent sizing across the entire page.
EM allows components to scale proportionally. A button with font-size, padding, and border-radius all in em units will scale up or down uniformly when you change just the font-size, making responsive component design easier.
When nested elements use em, sizes multiply. A 1.5em font inside a 1.5em container becomes 2.25x the root size (1.5 x 1.5). This cascading effect can cause unexpected sizing. REM solves this by always referencing the root element.