1 em equals 16 pixels by default in most browsers.
An em is a relative unit in typography, based on the font size of the current element. When the base font size is 16 pixels, 1 em equals 16 pixels. This conversion can change if the font size changes, but 16 pixels is the common default.
Conversion Tool
Result in pixels:
Conversion Formula
The formula to convert em to pixels is:
pixels = em × base font size in pixels
The base font size is usually 16 pixels in browsers by default. So when you want to change an em value to pixels, you multiply the em value with 16. This works because em measures the scalable size relative to the font size of the parent or the element itself.
Example:
- If you have 1 em, multiply 1 × 16 = 16 pixels.
- For 2 em, multiply 2 × 16 = 32 pixels.
- For 0.5 em, multiply 0.5 × 16 = 8 pixels.
Conversion Example
- Convert 3 em to pixels:
- Identify base font size: 16 pixels.
- Multiply 3 × 16 = 48.
- Result: 3 em equals 48 pixels.
- Convert 0.75 em to pixels:
- Base font size is 16 pixels.
- Multiply 0.75 × 16 = 12.
- Result: 0.75 em equals 12 pixels.
- Convert 5.5 em:
- Multiply 5.5 × 16 = 88.
- Result: 5.5 em equals 88 pixels.
- Convert 10 em:
- Multiply 10 × 16 = 160.
- Result: 10 em equals 160 pixels.
Conversion Chart
| em | Pixels |
|---|---|
| -24.0 | -384.0 |
| -20.0 | -320.0 |
| -15.0 | -240.0 |
| -10.0 | -160.0 |
| -5.0 | -80.0 |
| -1.0 | -16.0 |
| 0.0 | 0.0 |
| 1.0 | 16.0 |
| 2.0 | 32.0 |
| 5.0 | 80.0 |
| 10.0 | 160.0 |
| 15.0 | 240.0 |
| 20.0 | 320.0 |
| 26.0 | 416.0 |
The chart shows em values in the left column and their equivalent pixel values on the right. You can use this to quickly lookup how many pixels correspond to a certain em value when the base font size is 16 pixels.
Related Conversion Questions
- How many pixels are in 1 em when my browser font size is different?
- What is the pixel equivalent of 1 em in CSS?
- Does 1 em always equal 16 pixels in web design?
- How to convert 1 em to pixels in responsive layouts?
- Is 1 em the same as 16 pixels on mobile devices?
- How to calculate pixels from em units with custom font sizes?
- What affects the pixel size of 1 em in HTML?
Conversion Definitions
em: An em is a relative unit of measurement in typography, based on the font size of the current element or its parent. It scales according to the font size, allowing flexible and scalable design layouts. One em equals the current font size, making it useful for responsive text sizing.
pixels: Pixels are absolute units that represent a single point on a digital display. They are fixed in size and used to measure screen elements, images, and fonts. Pixels provide precise control over layout, but they don’t scale with font size or device settings unless adjusted with CSS techniques.
Conversion FAQs
Can the value of 1 em change depending on the context?
Yes, 1 em is relative to the font size of the parent element or the current element. If the base font size changes, then 1 em will correspond to a different pixel size. This relativity allows em units to scale with user settings or design choices, but makes conversions variable.
Why do designers prefer em over pixels for font sizes?
Designers use em units because they scale with the font size, making layouts more flexible and accessible. Using em allows text to resize properly when users change browser font settings or when designs adapt to different screen sizes, unlike pixels which are fixed and do not scale automatically.
What happens if I change the browser default font size from 16px?
If the default font size changes, then em conversions change too. For example, if the base font size is 20 pixels instead of 16, then 1 em equals 20 pixels. This affects how text and elements sized in ems appear, potentially changing layout and readability.
Are em and rem units the same when converting to pixels?
No, em and rem both relate to font size but differ in reference. Em is relative to the parent element’s font size, while rem is relative to the root (html) font size. Converting em to pixels can vary, while rem conversions only depend on root font size.
Is it possible to use em units for non-text elements?
Yes, em units can be used for margins, padding, widths, and other CSS properties. This helps maintain proportionality in layouts relative to font size, making designs responsive. However, the pixel conversion depends on the current font size affecting that element.