Elara Bennett1.5 rem is equal to 1.5 em.
Because both rem and em are relative units based on the font size of elements, converting 1.5 rem to em yields the same numeric value, assuming the context font size is the same for both units.
Conversion Tool
Result in em:
Conversion Formula
Converting rem to em uses the fact that both units are relative to font sizes, but rem is always relative to the root element’s font size, while em is relative to the current element’s font size.
If the current element’s font size equals the root font size, the conversion formula is:
em = rem × (root font size / current element font size)
Since both font sizes are same in this case, the formula simplifies:
- root font size = 16px (commonly)
- current element font size = 16px
- em = rem × (16 / 16) = rem × 1 = rem
So, 1.5 rem converts to 1.5 em when the font sizes match.
Conversion Example
- Example 1: Convert 2 rem to em
- Assuming root and current font size are 16px.
- Apply: em = rem × (root / current) = 2 × (16 / 16) = 2 em.
- Example 2: Convert 0.75 rem to em
- Assuming root = 16px, current = 16px.
- em = 0.75 × (16 / 16) = 0.75 em.
- Example 3: Convert 3 rem to em with current font size 12px
- root font size = 16px
- current = 12px
- em = 3 × (16 / 12) = 3 × 1.3333 = 4 em
- Because current font size smaller, em value increases.
- Example 4: Convert 1 rem to em with current font size 20px
- root font size = 16px
- current = 20px
- em = 1 × (16 / 20) = 0.8 em
- Here em is less than rem due to bigger current font size.
Conversion Chart
The table below shows rem values ranging from -23.5 to 26.5 converted to em assuming the root font size and current element font size are equal, so the conversion is simply 1:1.
| Rem | Em |
|---|---|
| -23.5 | -23.5 |
| -20 | -20 |
| -15 | -15 |
| -10 | -10 |
| -5 | -5 |
| -1 | -1 |
| 0 | 0 |
| 1 | 1 |
| 5 | 5 |
| 10 | 10 |
| 15 | 15 |
| 20 | 20 |
| 26.5 | 26.5 |
Read the chart by locating the rem value in the left column, then find the matching em value right next to it. These values are equal here because the font sizes used are identical.
Related Conversion Questions
- How do I convert 1.5 rem to em when parent font size differs?
- What is the em equivalent of 1.5 rem inside nested elements?
- Does 1.5 rem always equal 1.5 em in CSS?
- How does browser default font size affect 1.5 rem to em conversion?
- Can I use 1.5 rem as em in responsive design?
- Why does 1.5 rem sometimes not match 1.5 em visually?
- Is 1.5 rem larger or smaller than 1.5 em by default?
Conversion Definitions
rem: Rem units in CSS represents font size relative to the root element, usually the <html> tag. It ensures consistent sizing across different components, since changing the root font size scales all rem-based sizes proportionally, regardless of nesting depth.
em: Em units are relative to the font size of the current element or its nearest parent with a specified font size. This makes em flexible but sometimes unpredictable, because nested elements compound the size if multiple em units are used.
Conversion FAQs
Can rem and em units be used interchangeably?
They can be used in similar ways, but rem is always relative to the root font size, while em depends on the current element’s font size. This difference makes rem more predictable for global scaling, whereas em offers more local flexibility but can cause unintended size changes in nested elements.
Why does 1.5 rem sometimes not look same as 1.5 em on my webpage?
This happens if the current element’s font size differs from the root font size. Since em is relative to the element’s font size, if that is bigger or smaller than the root, the actual pixel size varies, causing 1.5 rem and 1.5 em to appear different visually.
How do I convert rem to em when font sizes are different?
You multiply the rem value by the ratio of the root font size over the current element font size. For example, em = rem × (root font size / current font size). This accounts for changes in the context where the conversion happens.
Is negative rem or em value allowed in CSS?
Negative values for rem and em are valid in CSS. They can be used for positioning or spacing. However, caution is advised because negative font sizes or dimensions can cause rendering issues or unexpected layouts.
What happens when I change the root font size for rem conversions?
Changing the root font size affects all rem units globally. Since rem are relative to root, increasing the root font size scales up every rem-based size proportionally, making it a powerful way to implement responsive typography or layout scaling.
