1 em equals 16 pixels (px) by default in most browsers.
When converting 1 em to px, the value depends on the font size of the parent element, but typically the default font size is 16px. Thus, 1 em is equal to that base size in pixels, making it easier to calculate relative sizes in web design.
Conversion Tool
Result in px:
Conversion Formula
The formula to convert em to pixels is: pixels = em × base font size. Usually, the base font size is 16px in most browsers, but it can be different depending on the CSS settings.
This works because em is a relative unit that scales with the font size of the parent element. So, if the base font size is 16px, 1 em means 16 pixels, 2 em means 32 pixels, and so on.
Example calculation:
- If you want to convert 1.5 em to pixels and base font size is 16px:
- pixels = 1.5 × 16 = 24px
Conversion Example
- 2 em to px
- Start with base font size: 16px
- Multiply: 2 × 16 = 32
- Result: 2 em = 32 px
- 0.75 em to px
- Base font size: 16px
- Multiply: 0.75 × 16 = 12
- Result: 0.75 em = 12 px
- 3.25 em to px
- Base font size: 16px
- Multiply: 3.25 × 16 = 52
- Result: 3.25 em = 52 px
- 1.2 em to px
- Base font size: 16px
- Multiply: 1.2 × 16 = 19.2
- Result: 1.2 em = 19.2 px
Conversion Chart
| em | px |
|---|---|
| -24.0 | -384.0 |
| -20.0 | -320.0 |
| -15.5 | -248.0 |
| -10.0 | -160.0 |
| -5.0 | -80.0 |
| -1.0 | -16.0 |
| 0.0 | 0.0 |
| 1.0 | 16.0 |
| 3.5 | 56.0 |
| 7.0 | 112.0 |
| 12.0 | 192.0 |
| 18.0 | 288.0 |
| 22.0 | 352.0 |
| 26.0 | 416.0 |
This chart shows em values in left column and the equivalent pixels in right. To find px for any em, multiply the em value by 16, the base font size. Negative values represent sizes smaller than zero, useful for scaling down in designs.
Related Conversion Questions
- How many pixels equals 1 em in CSS by default?
- What pixel size does 1 em correspond to if the base font changes?
- Why does 1 em sometimes not equal 16 pixels in some websites?
- How to calculate px from em when base font size is different than 16px?
- Is 1 em always the same as 16 px in all browsers and devices?
- How does changing the parent element’s font size affect 1 em in px?
- Can 1 em be converted to px without knowing the base font size?
Conversion Definitions
em: Em is a relative unit in CSS representing the computed font size of the parent element. One em equals the current font size, so it scales proportionally with text size changes, making layouts flexible and adaptive across different device sizes and user preferences.
px: Pixel (px) is an absolute unit representing a single dot on the screen. It’s a fixed size used for precise control in digital design and web layouts. Pixels do not scale with font size or zoom, providing consistent measurement across different screen resolutions.
Conversion FAQs
Does the value of 1 em change on different parts of a webpage?
Yes, 1 em depends on the font size of the parent element. If a parent has a font size of 20px, then 1 em equals 20px inside that element, which means the actual pixel size can vary across different sections of a page.
Can I rely on 1 em always being 16px for responsive design?
Not always. While most browsers default to 16px, CSS can override base font sizes. Responsive designs often adjust font sizes dynamically, so 1 em can differ depending on those settings, making it flexible but less predictable without checking the actual computed style.
Why might 1 em conversion to px appear inconsistent in browser developer tools?
This often happens because em units are relative to the parent’s font size, which might be inherited or changed by CSS rules. Developer tools show computed styles, but if multiple nested elements have different font sizes, 1 em’s pixel equivalent changes accordingly.
Is it better to use em or px for font sizing?
It depends on your goal. Em units are better for scalability and accessibility, allowing fonts to resize with user settings. Pixels offer precise control but are fixed, which can sometimes make text less adaptable on different devices or user preferences.
How do browser zoom settings affect 1 em in px?
Browser zoom scales the entire page, including em units and base font size. So, while 1 em equals 16px at 100% zoom, zooming in or out changes the apparent pixel size, making em units helpful for maintaining relative sizing during zoom.