1 em equals 16 pixels (px) by default in most web browsers.
When converting em to px, the base font size of the document or element is used as a reference. Since the default font size is 16px in browsers, 1 em corresponds to 16 pixels unless otherwise specified.
Conversion Tool
Result in px:
Conversion Formula
The formula to convert em units to pixels is:
px = em × base font size (in px)
This works because an em unit is relative to the current font size. Browsers set a default font size of 16px, which means 1 em equals 16 pixels by default. If the base font size changes, the conversion changes accordingly.
Example calculation for 1.5 em:
- Base font size = 16px
- Multiply em value by base size: 1.5 × 16 = 24px
- Therefore, 1.5 em equals 24 pixels.
Conversion Example
- 2 em to px:
- Multiply 2 by 16 (base size).
- 2 × 16 = 32px
- Result: 2 em equals 32 pixels.
- 0.75 em to px:
- Multiply 0.75 by 16.
- 0.75 × 16 = 12px
- Result: 0.75 em equals 12 pixels.
- 3.2 em to px:
- 3.2 × 16 = 51.2px
- Result: 3.2 em equals 51.2 pixels.
- 4.5 em to px:
- Multiply 4.5 by 16.
- 4.5 × 16 = 72px
- Result: 4.5 em equals 72 pixels.
Conversion Chart
| em | px |
|---|---|
| -24.0 | -384.0 |
| -20.0 | -320.0 |
| -16.0 | -256.0 |
| -12.0 | -192.0 |
| -8.0 | -128.0 |
| -4.0 | -64.0 |
| -1.0 | -16.0 |
| 0.0 | 0.0 |
| 1.0 | 16.0 |
| 4.0 | 64.0 |
| 8.0 | 128.0 |
| 12.0 | 192.0 |
| 16.0 | 256.0 |
| 20.0 | 320.0 |
| 26.0 | 416.0 |
The chart shows the pixel equivalents for em values from -24.0 up to 26.0. To use it, find the em value in the left column and read the corresponding pixel value on the right. Negative values represent sizes smaller than zero which might be used in transformations or calculations.
Related Conversion Questions
- How many pixels does 1 em equal in CSS?
- What is the pixel size of 1 em if the base font size changes?
- Does 1 em always equal 16 pixels on different browsers?
- How does converting 1 em to px affect responsive design?
- Is 1 em the same as 1 rem in pixel values?
- What happens to px conversion if the parent element font size changes from default?
- How to calculate pixels from em values when base font is not 16px?
Conversion Definitions
em: em is a relative length unit in CSS, based on the font size of the parent element. One em equals the current font size, which means its pixel value can change depending on the context and inheritance in the document.
px: px stands for pixels, a fixed unit of measurement in digital screens. Pixels represent the smallest unit of display on a screen, providing an absolute measure that doesn’t depend on font size or other styling.
Conversion FAQs
Does 1 em always equal 16 pixels?
No, 1 em equals 16 pixels only when the base font size is 16px, which is common default. If the base font size changes, the pixel equivalent of 1 em changes too, because em is a relative unit tied to font size.
Can em values be negative in CSS?
Yes, negative em values can be used in CSS for some properties like positioning or margin. However, negative font sizes are invalid. When converting negative em values to pixels, multiply by base font size including the negative sign.
What is the difference between em and rem units?
em units scale relative to the font size of their parent element while rem units always scale relative to the root element’s font size. So, rem values stay consistent across the document regardless of nesting.
Why would someone use em instead of px?
Using em allows scalable and flexible design because it reacts to the font size of parent elements. It helps in accessibility and responsiveness, whereas px is fixed and does not scale with user preferences or device settings.
How does browser zoom affect em to px conversion?
Browser zoom changes the effective pixel size users see but does not change the underlying base font size in CSS. So, em to px conversion remains the same in code, though visually sizes appear larger or smaller.