With the default 16 px root
24 px = 1.5rem, 14 px = 0.875rem and 1.25rem = 20 px.
Convert pixels to rem and back for any root font size, with a table of common sizes.
16 in every browser by default
| px | rem |
|---|---|
| 10 | 0.625 |
| 12 | 0.75 |
| 13 | 0.8125 |
| 14 | 0.875 |
| 15 | 0.9375 |
| 16 | 1 |
| 18 | 1.125 |
| 20 | 1.25 |
| 24 | 1.5 |
| 28 | 1.75 |
| 32 | 2 |
| 36 | 2.25 |
| 40 | 2.5 |
| 48 | 3 |
| 56 | 3.5 |
| 64 | 4 |
| 72 | 4.5 |
| 96 | 6 |
Runs in your browser — nothing you enter is sent to a server.
rem is a CSS unit relative to the root font size — 16 px in every browser unless the visitor changes it. Type pixels to get rem, or rem to get pixels. If your site sets a different root size, change it and everything recalculates, including the table of common sizes.
rem = px ÷ root font size
And px = rem × root font size.
24 px = 1.5rem, 14 px = 0.875rem and 1.25rem = 20 px.
20 px = 2rem — easier sums, if your CSS sets that root.
rem sizes follow the visitor's browser font-size setting, which people with low vision rely on. px sizes ignore it.
rem is relative to the root (html) element; em to the parent's font size, so em values compound when elements are nested.
It makes 1rem = 10 px for easier sums and still respects the user setting, but every component then needs its own font size. Many teams simply use 16 px and a converter.
Make font sizes and spacing scale smoothly between two screen widths with CSS clamp().
Design Tools
Create a harmonious set of font sizes from a base size and a ratio, with CSS variables.
Design Tools
Convert length, weight, temperature, area, volume, speed, time, data storage, pressure and energy units instantly.
Converters