1rem at 16px is 16px. 1.5rem is 24px. 0.875rem is 14px.
A 10px root makes 2rem equal 20px, not 32px. Set the root before copying a declaration.
- 1 × 16 = 16px
- 1.5 × 16 = 24px
- 0.875 × 16 = 14px
- 2 × 10 = 20px
px = rem × root
rem to px converter
| rem | px (root 16px) |
|---|---|
| 0.5 | 8 |
| 0.75 | 12 |
| 0.875 | 14 |
| 1 | 16 |
| 1.125 | 18 |
| 1.25 | 20 |
| 1.5 | 24 |
| 2 | 32 |
Also see px to rem, em to px, and px to em. The other unit groups are on Units.
Questions
How do you convert rem to px?
Multiply rem by the root font size. px = rem × root. 1.5rem at 16px is 24px.
What is 1rem in pixels?
Whatever the root is. At the browser default, 1rem is 16px. If you typed 10, 1rem is 10px.
Why did 2rem become 20px at root 10?
Each rem is 10px, not 16. 2rem is 20px, not 32px.
When does rem match em?
Only when the parent font size equals the root.