At the browser default root size of 16px: 16px = 1rem.
Dividing by the root font size is the whole calculation. With the browser default of 16px, 16px is 1rem — which is why so many design systems pick 16 as their base.
Converter
px to rem conversion table
| Value | 10px root | 12px root | 14px root | 16px root | 18px root | 20px root |
|---|---|---|---|---|---|---|
| 1px | 0.1rem | 0.0833rem | 0.0714rem | 0.0625rem | 0.0556rem | 0.05rem |
| 2px | 0.2rem | 0.1667rem | 0.1429rem | 0.125rem | 0.1111rem | 0.1rem |
| 4px | 0.4rem | 0.3333rem | 0.2857rem | 0.25rem | 0.2222rem | 0.2rem |
| 6px | 0.6rem | 0.5rem | 0.4286rem | 0.375rem | 0.3333rem | 0.3rem |
| 8px | 0.8rem | 0.6667rem | 0.5714rem | 0.5rem | 0.4444rem | 0.4rem |
| 10px | 1rem | 0.8333rem | 0.7143rem | 0.625rem | 0.5556rem | 0.5rem |
| 12px | 1.2rem | 1rem | 0.8571rem | 0.75rem | 0.6667rem | 0.6rem |
| 14px | 1.4rem | 1.1667rem | 1rem | 0.875rem | 0.7778rem | 0.7rem |
| 16px | 1.6rem | 1.3333rem | 1.1429rem | 1rem | 0.8889rem | 0.8rem |
| 18px | 1.8rem | 1.5rem | 1.2857rem | 1.125rem | 1rem | 0.9rem |
| 20px | 2rem | 1.6667rem | 1.4286rem | 1.25rem | 1.1111rem | 1rem |
| 22px | 2.2rem | 1.8333rem | 1.5714rem | 1.375rem | 1.2222rem | 1.1rem |
| 24px | 2.4rem | 2rem | 1.7143rem | 1.5rem | 1.3333rem | 1.2rem |
| 28px | 2.8rem | 2.3333rem | 2rem | 1.75rem | 1.5556rem | 1.4rem |
| 32px | 3.2rem | 2.6667rem | 2.2857rem | 2rem | 1.7778rem | 1.6rem |
| 36px | 3.6rem | 3rem | 2.5714rem | 2.25rem | 2rem | 1.8rem |
| 40px | 4rem | 3.3333rem | 2.8571rem | 2.5rem | 2.2222rem | 2rem |
| 44px | 4.4rem | 3.6667rem | 3.1429rem | 2.75rem | 2.4444rem | 2.2rem |
| 48px | 4.8rem | 4rem | 3.4286rem | 3rem | 2.6667rem | 2.4rem |
| 56px | 5.6rem | 4.6667rem | 4rem | 3.5rem | 3.1111rem | 2.8rem |
| 64px | 6.4rem | 5.3333rem | 4.5714rem | 4rem | 3.5556rem | 3.2rem |
| 72px | 7.2rem | 6rem | 5.1429rem | 4.5rem | 4rem | 3.6rem |
| 80px | 8rem | 6.6667rem | 5.7143rem | 5rem | 4.4444rem | 4rem |
| 96px | 9.6rem | 8rem | 6.8571rem | 6rem | 5.3333rem | 4.8rem |
| 112px | 11.2rem | 9.3333rem | 8rem | 7rem | 6.2222rem | 5.6rem |
| 128px | 12.8rem | 10.6667rem | 9.1429rem | 8rem | 7.1111rem | 6.4rem |
| 144px | 14.4rem | 12rem | 10.2857rem | 9rem | 8rem | 7.2rem |
| 160px | 16rem | 13.3333rem | 11.4286rem | 10rem | 8.8889rem | 8rem |
| 192px | 19.2rem | 16rem | 13.7143rem | 12rem | 10.6667rem | 9.6rem |
| 224px | 22.4rem | 18.6667rem | 16rem | 14rem | 12.4444rem | 11.2rem |
| 256px | 25.6rem | 21.3333rem | 18.2857rem | 16rem | 14.2222rem | 12.8rem |
| 320px | 32rem | 26.6667rem | 22.8571rem | 20rem | 17.7778rem | 16rem |
| 384px | 38.4rem | 32rem | 27.4286rem | 24rem | 21.3333rem | 19.2rem |
| 448px | 44.8rem | 37.3333rem | 32rem | 28rem | 24.8889rem | 22.4rem |
| 512px | 51.2rem | 42.6667rem | 36.5714rem | 32rem | 28.4444rem | 25.6rem |
Set it up once in CSS
/* 62.5 % makes 1rem = 10px, so 1.6rem = 16px.
Convenient, but it overrides the user's browser preference at the root —
prefer keeping the default and doing the maths. */
html { font-size: 100%; } /* 16px, respects user preference */
:root {
--step-0: 1rem; /* 16px */
--step-1: 1.25rem; /* 20px */
--step-2: 1.5rem; /* 24px */
--step-3: 2rem; /* 32px */
}
/* Fluid type without a converter, using clamp() */
h1 { font-size: clamp(1.75rem, 1.2rem + 2.5vw, 3rem); }Questions
How do I convert px to rem?
rem = px ÷ root font size. With the browser default root font size of 16px, 16px = 1rem.
What if the root font size is not 16px?
Then every value changes proportionally. The table above shows all six common root sizes side by side. Note that the root font size is whatever html computes to — if a user has increased their browser's default text size, your rem values scale with it, which is exactly why rem is preferred over px for typography.
How do I convert rem back to px?
Invert the formula, or use the rem to px converter.
Should I use rem or px in CSS?
Use rem for anything that should scale with the user's font-size preference — type, spacing, container widths. Use px for things that genuinely should not scale, like hairline borders and some shadows. Ignoring the user's setting by sizing type in px is an accessibility problem, not a style choice.