1 CSS pixel = 0.0625 rem
Dividing by the root font size is the core of accessible CSS sizing: a layout in rem scales when a user raises their browser text size, while one in px does not. The default root is 16 px, and this converter lets you set your own.
Formula rem = px × 0.0625
Type in either field — the other updates on every keystroke. Need other units? Open the full pixels converter.
| 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 |
| 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 |
| Situation | From | To |
|---|---|---|
| Small caption text | 12 px | 0.75 rem |
| Small text | 14 px | 0.875 rem |
| Default body text | 16 px | 1 rem |
| Large body text | 18 px | 1.125 rem |
| Subheading | 24 px | 1.5 rem |
| Page heading | 32 px | 2 rem |
Divide by 16. For 24 px: 24 ÷ 16 = 1.5 rem.
Designers specify sizes in pixels, but accessibility guidance favours rem, which scales with the user's font-size setting. Common sizes: 14 px is 0.875 rem, 16 px is 1 rem, 18 px is 1.125 rem, and 32 px is 2 rem.
The 16 px base is only the browser default. If a user or stylesheet changes the root font size, 1 rem changes with it. Setting html { font-size: 62.5% } makes 1 rem equal 10 px, but then body text needs resetting. Fixed px font sizes ignore user preferences.
The CSS pixel is a reference unit defined as 1/96 inch, not a hardware pixel. The rem unit (root em) arrived with CSS3 to avoid the compounding that em units suffer in nested elements.
Related guides: Digital and print layout units: px, rem, em, points and DPI