1.17 em equals 18.72 px when the base font size is 16 pixels.
To convert em units to pixels, multiply the em value by the base font size in pixels. Since 1 em is equal to the current font size, if the base font size is 16px, then 1.17 em corresponds to 1.17 × 16 = 18.72 px. This helps in scaling elements relative to the font size.
Conversion Tool
Result in px:
Conversion Formula
The formula for converting em to pixels is:
Pixels (px) = em value × base font size (in px)
This works because an em unit is relative to the font size of the element. If the base font size is 16px, then 1 em equals 16 pixels.
Step-by-step, if you have 1.17 em and base font size of 16px:
- Multiply 1.17 (em) by 16 (px): 1.17 × 16 = 18.72
- The result is 18.72 pixels.
This converts the relative unit em into an absolute pixel value.
Conversion Example
- 2.5 em to px
- Multiply 2.5 by 16: 2.5 × 16 = 40
- Result: 40 px
- 0.75 em to px
- Multiply 0.75 by 16: 0.75 × 16 = 12
- Result: 12 px
- 1.33 em to px
- Multiply 1.33 by 16: 1.33 × 16 = 21.28
- Result: 21.28 px
- 4 em to px
- Multiply 4 by 16: 4 × 16 = 64
- Result: 64 px
- 0.5 em to px
- Multiply 0.5 by 16: 0.5 × 16 = 8
- Result: 8 px
Conversion Chart
| em | px |
|---|---|
| -23.8 | -380.80 |
| -20.0 | -320.00 |
| -15.5 | -248.00 |
| -10.2 | -163.20 |
| -5.8 | -92.80 |
| -3.3 | -52.80 |
| -1.0 | -16.00 |
| 0.0 | 0.00 |
| 1.0 | 16.00 |
| 3.5 | 56.00 |
| 7.2 | 115.20 |
| 10.0 | 160.00 |
| 12.7 | 203.20 |
| 15.1 | 241.60 |
| 18.0 | 288.00 |
| 21.4 | 342.40 |
| 26.2 | 419.20 |
This chart shows em values in left column and their pixel equivalents in right column, assuming a base font size of 16px. You can use it to quickly find pixel sizes from em inputs by matching the em value.
Related Conversion Questions
- How many pixels is 1.17 em on a 16px font size?
- What pixel value does 1.17 em correspond to if base font size changes?
- Can 1.17 em be converted to px without knowing the base font size?
- Why 1.17 em is not always equal to the same pixel value?
- How to convert 1.17 em to px in CSS for responsive design?
- Is 1.17 em larger than 18px or smaller?
- What happens in px if 1.17 em used with different parent font sizes?
Conversion Definitions
em: em is a relative unit in CSS that scales according to the font size of the element or its parent. It allows flexible sizing for text and other elements, adjusting dynamically as font sizes change. 1 em equals the size of the current font, so it varies with context.
px: px stands for pixels, a fixed unit representing a dot on the screen. Pixel values are absolute, meaning they remain constant regardless of font size or device settings. Pixels are used for precise layout and design control but lack flexibility compared to relative units.
Conversion FAQs
Does the base font size always have to be 16px when converting em to px?
No, the base font size can be any pixel value defined in CSS, like 12px or 20px. The conversion depends on the actual font size set on the element or body. Using 16px is common because it is browser default, but you must adjust the calculation based on the current font size.
Can I convert em to px if the font size is set in percentage?
If font size is in percentage, you first need to find the computed pixel value of that percentage based on the parent font size. Once you have the pixel size, multiply the em value by that pixel size to get the px equivalent. Direct conversion without known pixel size isn’t possible.
Why does 1.17 em sometimes render differently on different devices?
Because em units depend on font size, which can vary by user settings, browser defaults, or device display resolution. Also, zoom levels and accessibility preferences can affect the computed pixel size of 1.17 em, causing differences across devices.
Is it better to use em or px for responsive web design?
em units provide more flexibility for responsive design because they scale relative to font size, adapting to different screen sizes and user preferences. Pixels are fixed and may cause layout issues on devices with varying resolutions or zoom levels.
How do child elements inherit font size in em units?
Child elements calculate their em units relative to the font size of their parent. So if a parent has 2em font size and the child has 1.5em, the child’s font size is 1.5 × (parent’s computed font size). This allows nested scaling but can lead to compounding sizes.