Conversion Table
Em | Root Em |
---|---|
0.01em | 0.01rem |
0.03em | 0.03rem |
0.05em | 0.05rem |
0.08em | 0.08rem |
0.1em | 0.1rem |
0.15em | 0.15rem |
0.2em | 0.2rem |
0.5em | 0.5rem |
0.625em | 0.625rem |
0.75em | 0.75rem |
0.875em | 0.875rem |
1em | 1rem |
1.125em | 1.125rem |
1.25em | 1.25rem |
1.375em | 1.375rem |
1.5em | 1.5rem |
1.625em | 1.625rem |
1.75em | 1.75rem |
1.875em | 1.875rem |
2em | 2rem |
2.125em | 2.125rem |
2.25em | 2.25rem |
2.375em | 2.375rem |
2.5em | 2.5rem |
2.625em | 2.625rem |
2.75em | 2.75rem |
2.875em | 2.875rem |
3em | 3rem |
3.125em | 3.125rem |
3.25em | 3.25rem |
3.375em | 3.375rem |
3.5em | 3.5rem |
3.625em | 3.625rem |
3.75em | 3.75rem |
3.875em | 3.875rem |
4em | 4rem |
5em | 5rem |
6em | 6rem |
8em | 8rem |
10em | 10rem |
15em | 15rem |
20em | 20rem |
30em | 30rem |
40em | 40rem |
50em | 50rem |
60em | 60rem |
80em | 80rem |
100em | 100rem |
Differences Between em and rem
Em is a relative unit that scales according to the font size of the element it is used on. Root Em (rem) is also a relative unit, but it scales according to the root element's font size, typically the HTML element. This makes rem more predictable across different elements.
Advantages of Using em
Using em units allows for flexibility and scalability within the context of the current element's font size. This is useful for creating scalable and responsive designs that adapt to different font sizes set on parent elements.
How to Convert em to rem
To convert em to rem, you need to know the font size of the current element and the root element. The formula for conversion is:
rem = em * (font-size of current element / root font-size)
For example, to convert 2em to rem, assuming the font size of the current element is 16px and the root font-size is also 16px:
2em * (16px / 16px) = 2rem
Frequently Asked Questions
Why should I use em instead of rem?
Using em allows for more flexibility and scalability within the context of the current element's font size, improving responsive design capabilities.
How do I set the font size?
You can set the font size using CSS on the parent element. For example:
parent-element {
font-size: 16px;
}
Can I use em for all elements?
Yes, you can use em for most elements to ensure consistency and scalability within the context of the current element's font size.