1 em equals 16 pixels by default in most browsers.
The size of one em depends on the font size of the parent element, where 1 em is equal to the current font size. If the base font size is 16 pixels, then 1 em converts directly to 16 pixels. This relationship allows relative sizing in CSS for scalable layouts.
Conversion Tool
Result in pixels:
Conversion Formula
The formula to convert em to pixels is:
pixels = em × base font size (in pixels)
Because 1 em is the size of the current font, multiplying the em value by the base font size yields the pixel equivalent. The base font size is often 16 pixels in browsers, but it can vary.
Example calculation:
- If the base font size is 16px, and you want to convert 1.5 em:
- pixels = 1.5 × 16 = 24 pixels
- This means 1.5 em corresponds to 24 pixels.
Conversion Example
- 2 em to pixels:
- Multiply 2 by 16 (base font size), giving 32 pixels
- So, 2 em equals 32 pixels
- 0.75 em to pixels:
- 0.75 × 16 = 12 pixels
- This means 0.75 em equals 12 pixels
- 3.5 em to pixels:
- 3.5 times 16 equals 56 pixels
- Therefore, 3.5 em equals 56 pixels
- 0.25 em to pixels:
- 0.25 multiplied by 16 gives 4 pixels
- That is, 0.25 em equals 4 pixels
Conversion Chart
This chart shows em values from -24.0 to 26.0 and their pixel equivalents assuming a 16px base font size. Negative values represent sizes less than zero which might be used rarely for offsets or transformations but shown here for completeness.
| em | Pixels (px) |
|---|---|
| -24.0 | -384 |
| -20.0 | -320 |
| -16.0 | -256 |
| -12.0 | -192 |
| -8.0 | -128 |
| -4.0 | -64 |
| -2.0 | -32 |
| -1.0 | -16 |
| 0.0 | 0 |
| 1.0 | 16 |
| 2.0 | 32 |
| 4.0 | 64 |
| 8.0 | 128 |
| 12.0 | 192 |
| 16.0 | 256 |
| 20.0 | 320 |
| 24.0 | 384 |
| 26.0 | 416 |
Related Conversion Questions
- How many pixels are in 1 em with default browser settings?
- What is the pixel value for 1 em on a 12px base font?
- Does 1 em always equal 16 pixels in CSS?
- How do I convert 1 em to pixels for responsive design?
- Why does 1 em sometimes correspond to different pixel values?
- Can the pixel value of 1 em change between web browsers?
- Is 1 em equal to pixels in all font sizes?
Conversion Definitions
em: A unit of measurement in typography and CSS that represents the computed font size of the current element. If the font size is 16 pixels, then 1 em equals 16 pixels. It is used to create scalable and relative sizing in layouts and text.
pixels: The basic unit of measurement for digital screens. Pixels are the smallest controllable element of a picture represented on screen. Pixel sizes are absolute and fixed, defining the resolution and size of images and fonts in web design.
Conversion FAQs
Can 1 em be different on different elements?
Yes, because 1 em is relative to the font size of the current element, it can vary. If an element inherits a font size of 20 pixels, then 1 em in that context equals 20 pixels. This relativity allows flexible and adaptive designs.
Why does 1 em not always equal 16 pixels?
Because the base font size can be changed by user settings, CSS rules, or browser defaults. The 16 pixels is a common default but not guaranteed. If a stylesheet sets the font size to 14 pixels, then 1 em equals 14 pixels instead.
Is using em better than pixels for font sizes?
Using em allows fonts and elements to scale relative to the parent or root font size, promoting accessibility and responsiveness. Pixels are fixed and do not scale, which may cause issues on different devices or user settings.
How do browser zoom settings affect 1 em?
Zooming changes the effective pixel size of fonts, so 1 em scales accordingly on screen. Though 1 em equals a set pixel value in code, zooming enlarges or shrinks content visually, maintaining readability.
Can 1 em be negative?
Technically, you can assign negative values in CSS for properties like margins or transforms, but using negative em values for font sizes or widths is invalid and will be ignored by browsers.