1 em equals 16 px by default in most browsers.
The unit “em” is relative to the current font-size, so when the base font size is 16 pixels, 1 em converts directly to 16 pixels. This means that if a text element has a font size of 16px, setting its size to 1 em will keep it at 16px, but if the font size changes, the pixel value for 1 em will change accordingly.
Conversion Tool
Result in px:
Conversion Formula
The conversion from em to pixels depends on the base font size, which is commonly 16 pixels in web browsers. The formula to convert em to px is:
Pixels = Em × Base Font Size (in px)
So for 1 em, assuming the base font size is 16px, the calculation is:
- 1 em × 16 px = 16 px
This works because “em” is relative unit measuring the font size of the parent or the current element, so multiplying the em value by the base font size gives the equivalent pixel size.
Conversion Example
- 2 em to px:
- Start with 2 em
- Multiply by base font size: 2 × 16 = 32 px
- Result is 32 pixels
- 0.5 em to px:
- 0.5 em × 16 = 8 px
- This means half the base font size
- 3.25 em to px:
- 3.25 × 16 = 52 px
- So 3.25 em equals 52 pixels
- 1.75 em to px:
- 1.75 × 16 = 28 px
- This is slightly larger than the base font size
- 4 em to px:
- 4 × 16 = 64 px
- Meaning four times the base font size in pixels
Conversion Chart
| Em | Pixels (px) |
|---|---|
| -24.0 | -384 |
| -18.0 | -288 |
| -12.0 | -192 |
| -6.0 | -96 |
| -3.0 | -48 |
| -1.5 | -24 |
| -0.5 | -8 |
| 0 | 0 |
| 0.5 | 8 |
| 1 | 16 |
| 2 | 32 |
| 3 | 48 |
| 5 | 80 |
| 10 | 160 |
| 15 | 240 |
| 20 | 320 |
| 26 | 416 |
The chart shows values from negative to positive ems, converted to pixels by multiplying with 16. Negative em values represent sizes smaller than zero, which can be used in transformations or calculations but may not render visibly. Use this table as quick reference for common conversions.
Related Conversion Questions
- How many pixels are in 1 em if the base font size changes?
- Does 1 em always equal 16 pixels on all devices?
- What happens to px value when I use 1 em inside nested elements?
- Can 1 em be smaller than 16 px in a CSS layout?
- How does browser default font size affect 1 em conversion?
- Is it possible for 1 em to equal more than 16 pixels?
- How to calculate pixels from em for responsive design?
Conversion Definitions
em: A relative length unit in typography, representing the current font size of an element. Its value changes based on the font size inherited or set on a parent element, making it flexible for scalable layouts. One em equals the computed font size, allowing proportional sizing across the document.
px: A fixed-length unit representing pixels on a screen, used in digital design to specify absolute sizes. Pixels are the smallest unit of measurement in a display device, providing precise control over element dimensions. Unlike em, px does not scale relative to other elements.
Conversion FAQs
Can the value of 1 em be different in various browsers?
Yes, although most browsers default to 16 pixels for 1 em, user settings or browser defaults can change this. If a user changes browser font size settings, 1 em will scale accordingly, which affect the pixel conversion.
Why does 1 em sometimes not equal exactly 16 pixels in CSS?
Because em units depend on the font size of the parent element. If the parent has a font size different than 16px, or if CSS inheritance changes the base size, 1 em will reflect that size, so it can be more or less than 16 pixels.
Is it better to use em or px for font-sizing?
Em units allow for scalable and flexible designs, adjusting with user settings and parent font sizes. Pixels give you fixed sizes which are consistent but less adaptable for accessibility. The choice depends on the design requirements.
How does the conversion handle decimal em values?
Decimal em values multiply the base font size directly, so 1.5 em times 16px results in 24 pixels. Decimal values allow fine-grained control over sizing beyond whole numbers.
What happens if the base font size is not 16 pixels?
The conversion formula still applies, but instead of multiplying by 16, multiply the em value by the actual base font size in pixels. For example, if the base font size is 20px, 1 em equals 20 pixels.