How to use the em to px converter
- Choose the conversion direction: em to px or px to em.
- Enter the value you want to convert.
- Set the base font size in pixels (defaults to 16px).
- Optionally enter a parent computed size to see how nesting affects the result.
- Read the converted value instantly as you type.
How the em to px formula works
The em unit is relative. When converting em to pixel values, you multiply the em number by the base font size in pixels:
pixels = em × base
For example, if your base font size is 16px and you need to convert 1.5em to px, the math is 1.5 × 16 = 24. The result is 24 pixels.
Going the other way, a pixel to em calculator divides the pixel value by the base:
em = pixels / base
If you have 20px and a 16px base, that is 20 / 16 = 1.25em. Both directions use the exact same relationship, just rearranged.
Common em to px reference values
This table assumes the standard browser default of 16px. Use it as a quick lookup when writing CSS without needing to calculate each time.
| em | Pixels (at 16px base) |
|---|---|
| 0.5 | 8 |
| 0.75 | 12 |
| 0.875 | 14 |
| 1 | 16 |
| 1.125 | 18 |
| 1.25 | 20 |
| 1.5 | 24 |
| 2 | 32 |
| 2.5 | 40 |
| 3 | 48 |
If your project uses a different root size, such as 14px or 10px for easier math, multiply those base numbers by the em value instead.
Why em compounds with nesting
A key difference between em and rem is that em is relative to the parent element's computed font size, not the document root. This means em units compound when elements are nested.
Suppose a container has font-size: 1.5em and the root is 16px. The container computes to 24px. A child inside that container with font-size: 1.5em does not equal 24px. It equals 1.5 × 24 = 36px. Each level multiplies against its direct parent.
This compounding behavior is why many developers prefer rem for global typography and reserve em for component-level spacing like padding and margins, where scaling relative to the component's own text size is desirable. If you do use em deeply, always check the computed parent size to avoid unexpectedly large or small text.
In the optional parent field, the em value is multiplied by the parent's computed size, which is how the font-size property resolves. For other properties such as padding or margin, em uses the element's own font size, so enter that size as the base instead.
When to use this pixel to em calculator
Design tools like Figma and Sketch output measurements in pixels, but production CSS often benefits from relative units for accessibility. Users who change their browser's default font size expect layouts to scale proportionally. Converting those fixed pixel measurements into em allows components to respect user preferences.
Use this tool when translating a design spec into responsive CSS. Enter the pixel value from the mockup, set your base size, and apply the resulting em value in your stylesheet. For viewport-relative sizing rather than font-relative sizing, consider a dedicated px to vw converter instead. And if your project uses rem exclusively, the px to rem converter handles that specific calculation.
Em vs rem: choosing the right unit
Both em and rem are relative units, but they anchor to different references. Rem (root em) always refers to the <html> element's font size. Em refers to the element's own font size for most properties, and to the parent's font size when used in font-size itself.
Because rem does not compound, it is predictable across deep DOM trees. Many teams set html { font-size: 62.5%; } so that 1rem equals 10px, simplifying mental math. Em remains useful for properties that should scale with the local text size, such as padding on a button. If the button's font size increases, its padding grows automatically when defined in em.
Worked examples
| Example | Input | Result |
|---|---|---|
| 1 em at default 16px base | Conversion direction: em-to-px; Value to convert: 1; Base font size (px): 16 | Pixels (base 16px): 16 |
| 24px to em at 16px base | Conversion direction: px-to-em; Value to convert: 24; Base font size (px): 16 | em (base 16px): 1.5 |
| 1.5em nested inside a 20px parent | Conversion direction: em-to-px; Value to convert: 1.5; Base font size (px): 16; Parent computed size (px): 20 | Pixels (base 16px): 24; Pixels (nested in 20px parent): 30 |
| 18px to em with a 14px base | Conversion direction: px-to-em; Value to convert: 18; Base font size (px): 14 | em (base 14px): 1.28571428571 |
FAQ
How do I convert em to px?
Multiply the em value by the base font size in pixels. For a 16px base, 2em equals 32px. Change the base if your project uses a different root font size.
How do I convert px to em?
Divide the pixel value by the base font size. For example, 24px divided by a 16px base gives 1.5em. This is the core logic behind any pixel to em calculator.
What is the default base font size in browsers?
Most browsers default to 16px. However, users can change this in their settings, which is why using relative units like em is recommended for accessibility.
Why does my em size look wrong inside nested elements?
Em units compound. If a parent is 1.5em (24px at a 16px base) and a child is also 1.5em, the child becomes 1.5 times 24px, which is 36px. Check the computed parent size to debug this.
Should I use em or rem for font sizes?
Rem is generally safer for global font sizes because it does not compound with nesting. Em is better suited for component-level spacing that should scale with the component's own text.
Does this em to px converter work offline?
Yes. The conversion runs entirely in your browser using JavaScript. No network requests are made and no values are sent to a server.