1.5 rem is equivalent to 1.5 em.
Since rem and em are both relative units based on font size, converting 1.5 rem to em depends on the current context’s font size relative to the root font size. When the parent element’s font size equals the root font size, 1 rem equals 1 em, making 1.5 rem equal to 1.5 em.
Conversion Tool
Result in em:
Conversion Formula
To convert rem to em, you multiply the rem value by the ratio of the root font size to the parent element’s font size. Formula:
em = rem × (root font size / parent font size)
This works because rem units are relative to the root font size of the document, while em units are relative to the current element’s font size. If the parent font size equals the root font size, then 1 rem equals 1 em.
For example, if root font size is 16px, and parent font size is 16px:
- em = rem × (16 / 16) = rem × 1
- 1.5 rem = 1.5 × 1 = 1.5 em
Conversion Example
- Convert 2 rem to em, assuming root font size 16px and parent font size 20px:
- Calculate ratio: 16 / 20 = 0.8
- Multiply: 2 rem × 0.8 = 1.6 em
- Convert 0.75 rem to em, with root 16px and parent 12px:
- Ratio: 16 / 12 = 1.3333
- 0.75 × 1.3333 = 1.0 em
- Convert 3 rem to em, with root 18px and parent 18px:
- Ratio: 18 / 18 = 1
- 3 × 1 = 3 em
- Convert 1 rem to em, root 14px and parent 16px:
- Ratio: 14 / 16 = 0.875
- 1 × 0.875 = 0.875 em
- Convert 4.5 rem to em, root 20px and parent 10px:
- Ratio: 20 / 10 = 2
- 4.5 × 2 = 9 em
Conversion Chart
The table below shows values from -23.5 rem to 26.5 rem and their equivalent in em, assuming the parent font size equals the root font size (ratio 1). You can use this chart to quickly find em values without calculation when font sizes are equal.
rem | em |
---|---|
-23.5 | -23.5 |
-20.0 | -20.0 |
-15.0 | -15.0 |
-10.0 | -10.0 |
-5.0 | -5.0 |
0.0 | 0.0 |
5.0 | 5.0 |
10.0 | 10.0 |
15.0 | 15.0 |
20.0 | 20.0 |
26.5 | 26.5 |
Related Conversion Questions
- How many em units equal 1.5 rem in CSS?
- If the parent font size is 18px, what is 1.5 rem in em?
- Can 1.5 rem be converted to em without knowing parent font size?
- What is the formula to convert 1.5 rem to em for nested elements?
- Is 1.5 rem the same as 1.5 em in all cases?
- How do font size inheritance affects converting 1.5 rem to em?
- Why does 1.5 rem sometimes not equals 1.5 em in a webpage?
Conversion Definitions
rem: A CSS unit relative to the root element’s font size. It stands for “root em,” and it provides consistency across a webpage by basing sizes on the root font size, unaffected by nesting or inheritance changes in other elements.
em: A relative CSS unit based on the font size of the current element’s parent. Its value changes depending on the element’s font size context, making it useful for scalable designs, but its meaning can shift across different nested elements.
Conversion FAQs
Does the parent element’s font size affect converting rem to em?
Yes, em units are relative to the parent font size, so if the parent font size differs from the root font size, the conversion from rem to em changes accordingly. You must know both font sizes to get accurate conversion.
Can I assume 1 rem always equals 1 em?
No, 1 rem equals 1 em only when the parent font size equals the root font size. Otherwise, 1 em is relative to the parent font size, which could be different, making 1 rem and 1 em unequal.
Why 1.5 rem is not always the same as 1.5 em visually?
Because em is relative to the parent element’s font size, and rem is relative to the root font size, if the parent font size is different from the root, 1.5 em will not visually match 1.5 rem.
Is it possible to convert rem to em without JavaScript?
Yes, but only if you know the root and parent font sizes. You can do the math manually or use CSS custom properties and calc(), but JavaScript offers dynamic calculation based on actual context.
What happens if parent font size is zero or undefined when converting rem to em?
If the parent font size is zero, converting rem to em is invalid because em depends on a non-zero parent font size. If undefined, browsers use default sizes, but conversion cannot be precise without proper font size context.