Popular PX Values in REM
With a 16 px root: 10px = 0.625rem, 12px = 0.75rem, 14px = 0.875rem, 18px = 1.125rem, 20px = 1.25rem, 24px = 1.5rem, 32px = 2rem, 42px = 2.625rem, 45px = 2.8125rem, 55px = 3.4375rem, 60px = 3.75rem, 70px = 4.375rem.
Convert pixels to REM for any root font size. With the browser default of 16 px, 16 px = 1 rem.
With a 16 px root: 10px = 0.625rem, 12px = 0.75rem, 14px = 0.875rem, 18px = 1.125rem, 20px = 1.25rem, 24px = 1.5rem, 32px = 2rem, 42px = 2.625rem, 45px = 2.8125rem, 55px = 3.4375rem, 60px = 3.75rem, 70px = 4.375rem.
REM values for the default 16 px root, and for a 10 px root (the "62.5%" setup some sites use to make the maths easier).
| Pixels (px) | REM (16px root) | REM (10px root) |
|---|---|---|
| 1px | 0.0625rem | 0.1rem |
| 2px | 0.125rem | 0.2rem |
| 4px | 0.25rem | 0.4rem |
| 6px | 0.375rem | 0.6rem |
| 8px | 0.5rem | 0.8rem |
| 10px | 0.625rem | 1rem |
| 12px | 0.75rem | 1.2rem |
| 13px | 0.8125rem | 1.3rem |
| 14px | 0.875rem | 1.4rem |
| 15px | 0.9375rem | 1.5rem |
| 16px | 1rem | 1.6rem |
| 18px | 1.125rem | 1.8rem |
| 20px | 1.25rem | 2rem |
| 22px | 1.375rem | 2.2rem |
| 24px | 1.5rem | 2.4rem |
| 26px | 1.625rem | 2.6rem |
| 28px | 1.75rem | 2.8rem |
| 30px | 1.875rem | 3rem |
| 32px | 2rem | 3.2rem |
| 36px | 2.25rem | 3.6rem |
| 40px | 2.5rem | 4rem |
| 42px | 2.625rem | 4.2rem |
| 45px | 2.8125rem | 4.5rem |
| 48px | 3rem | 4.8rem |
| 50px | 3.125rem | 5rem |
| 55px | 3.4375rem | 5.5rem |
| 56px | 3.5rem | 5.6rem |
| 60px | 3.75rem | 6rem |
| 64px | 4rem | 6.4rem |
| 70px | 4.375rem | 7rem |
| 72px | 4.5rem | 7.2rem |
| 80px | 5rem | 8rem |
| 96px | 6rem | 9.6rem |
| 100px | 6.25rem | 10rem |
Tailwind's default spacing scale is built on rem: each step is 0.25 rem. With a 16 px root that is 4 px per step.
| Class step (e.g. p-4) | REM | Pixels |
|---|---|---|
| 1 | 0.25rem | 4px |
| 2 | 0.5rem | 8px |
| 3 | 0.75rem | 12px |
| 4 | 1rem | 16px |
| 5 | 1.25rem | 20px |
| 6 | 1.5rem | 24px |
| 8 | 2rem | 32px |
| 10 | 2.5rem | 40px |
| 12 | 3rem | 48px |
| 16 | 4rem | 64px |
| 20 | 5rem | 80px |
| 24 | 6rem | 96px |
rem = px ÷ root font size
The root font size is the font size of the <html> element, 16 px unless your CSS changes it. Example: 24 px ÷ 16 = 1.5 rem. If you set html { font-size: 62.5%; }, the root becomes 10 px and 24 px = 2.4 rem.
REM sizes follow the reader's browser font-size setting, so text and spacing grow together for people who need larger text. Pixel sizes stay fixed and ignore that setting. Use rem for font sizes and most spacing, and px for things that should never scale, such as 1 px borders.
16 px = 1 rem with the default 16 px root font size.
24 px = 1.5 rem with a 16 px root, or 2.4 rem with a 10 px root.
60 px = 3.75 rem with a 16 px root.
Use rem for font sizes and spacing so your layout respects the user's font-size setting. Use px for borders and other details that should stay fixed.
No. All conversions happen entirely in your browser. The values you enter are never sent to our server or saved.