1 rem = 16 CSS pixels
Multiplying by the root size tells you the rendered pixel value of a rem-based design. Under the common 62.5 percent root trick the base becomes 10 px, so 1.6rem is the familiar 16 px.
Formula px = rem × 16
Type in either field — the other updates on every keystroke. Need other units? Open the full pixels converter.
| Root em | CSS pixel |
|---|---|
| 1 rem | 16 px |
| 2 rem | 32 px |
| 3 rem | 48 px |
| 4 rem | 64 px |
| 5 rem | 80 px |
| 10 rem | 160 px |
| 15 rem | 240 px |
| 20 rem | 320 px |
| 25 rem | 400 px |
| 50 rem | 800 px |
| 100 rem | 1600 px |
| 500 rem | 8000 px |
| 1000 rem | 16000 px |
| CSS pixel | Root em |
|---|---|
| 1 px | 0.0625 rem |
| 2 px | 0.125 rem |
| 3 px | 0.1875 rem |
| 4 px | 0.25 rem |
| 5 px | 0.3125 rem |
| 10 px | 0.625 rem |
| 15 px | 0.9375 rem |
| 20 px | 1.25 rem |
| 25 px | 1.5625 rem |
| 50 px | 3.125 rem |
| 100 px | 6.25 rem |
| 500 px | 31.25 rem |
| 1000 px | 62.5 rem |
| Situation | From | To |
|---|---|---|
| Caption | 0.75 rem | 12 px |
| Small text | 0.875 rem | 14 px |
| Body text | 1 rem | 16 px |
| Large body | 1.125 rem | 18 px |
| Heading | 2 rem | 32 px |
| Hero | 3 rem | 48 px |
Multiply by 16. For 1.5 rem, add half of 16 to 16 to get 24 px.
Design tools such as Figma work in pixels, while stylesheets use rem. A heading of 2 rem is 32 px at the default size.
A rem is relative to the root font size, so it is only 16 px by default. If a user sets 20 px as their default, 1 rem is 20 px and your layout grows with it.
The rem unit came with CSS3 to avoid the compounding that em units cause in nested elements. Its name stands for root em.
By default 1 rem is 16 px, set by the browser's root font size. If a user raises their default font size, every rem value grows with it, while px values stay fixed.
Related guides: Digital and print layout units: px, rem, em, points and DPI