Example 1
- 16 px
- root 16
- source px
1 rem
How many rem at 16 px and root 16? 1 rem. A typed root, not CSS.
PX ↔ REM Converter
Type px or rem and a root. 16 px at 16 gives 1 rem. 24 px at 16 gives 1.5 rem. 1.5 rem at 16 stays 1.5 rem. A typed root, not page CSS.
rem = px / root from the typed html font-size. Not computed from CSS. HEX colour sits on HEX to RGB.
Results
Choose the conversion direction, enter the value and root font size, then click Calculate.
What is rem?
This converter works both ways: px → rem and rem → px. rem (root em) is relative to the html font-size — not the parent. Results always depend on the root you choose (type any value, or use the 16px / 10px presets).
If the root is 16px, then 1rem = 16px and 1.5rem = 24px. With a different root, the same rem maps to different pixels.
How to convert px to rem
rem = px ÷ root font-size
- 16px at root 16px → 1rem
- 24px at root 16px → 1.5rem
- 18px at root 10px → 1.8rem
In the tool: source px, enter value and root, click Calculate — then copy rem or the CSS snippet from the result.
How to convert rem to px
px = rem × root font-size
- 1.5rem at root 16px → 24px
- 1.25rem at root 16px → 20px
- 2rem at root 10px → 20px
In the tool: source rem, enter value and root, click Calculate.
When to use px, rem, or em
- rem — typography, spacing, padding, gaps, and design-system tokens that should scale with the root (accessibility, user preferences).
- px — borders, hairlines, shadows, and details that should stay fixed.
- em — local scaling against the element’s font size; use carefully because nesting can compound.
Common UI values (root 16px)
A quick look at common sizes at the default 16px root — for other roots, use the calculator.
| px | rem |
|---|---|
| 12px | 0.75rem |
| 14px | 0.875rem |
| 16px | 1rem |
| 18px | 1.125rem |
| 20px | 1.25rem |
| 24px | 1.5rem |
| 32px | 2rem |
| 40px | 2.5rem |
| 48px | 3rem |
Practical CSS example
html { font-size: 16px; }
h1 { font-size: 2rem; } /* 32px */
p { font-size: 1rem; } /* 16px */
.small-text { font-size: 0.875rem; } /* 14px */
.card { padding: 1.5rem; } /* 24px */After each calculation the tool also builds a ready .text { font-size: … } snippet with your root — copy it in one click.
How it works
PX ↔ REM Converter in this calculator divides pixels by the typed root. 16 px and root 16 give 1 rem. 24 px and root 16 give 1.5 rem. 1.5 rem and root 16 stay 1.5 rem, because the third example keeps rem as the source. This is not computed from page CSS.
Fields: px-val, rem-val, rem-base. Radio px-rem-source picks the direction. rem = px / root. px = rem × root. Presets 16 and 10 only fill root. Optional em-parent-px is not in these three cards.
1 rem is not computed from getComputedStyle. 1.5 rem does not come from DevTools. You type the root. The calculator does not read html { font-size } from a stylesheet.
HEX to RGB next door converts a colour. URL encode encodes spaces. Here 16 px stays 1 rem at root 16.
Type 16, root 16, source px, then Calculate. The result is 1 rem. A comma in 1,5 works. Zero root does not divide. This is not a CSS read.
16 px and 16 give 1 rem. 24 px and 16 give 1.5 rem. 1.5 rem and 16 stay 1.5 rem. Another root at 16 changes 1 rem.
Formula
rem = px / root; px = rem × root. Root from the field, not computed CSS.
How to use
- Type 16 px and root 16, source px.
- Click Calculate. The result is 1 rem.
- 24 px at 16 gives 1.5 rem. 1.5 rem at 16 stays 1.5 rem.
- A typed root, not computed from CSS.
- HEX colour sits on HEX to RGB.
16 px at root 16 = 1 rem
rem = px / root. 16 px and 16 give 1 rem. A typed root, not CSS.
- Converter
- Three fields and a direction. 16 px leaves 1 rem. Not DevTools.
- REM
- px / root. 24 px at 16 gives 1.5 rem. Root from the field.
- root
- Field rem-base. 16 at 16 px leaves 1 rem. Not computed.
Examples
Example 2
- 24 px
- root 16
- source px
1.5 rem
What about 24 px and root 16? 1.5 rem.
Example 3
- 1.5 rem
- root 16
- source rem
1.5 rem
What about 1.5 rem and root 16? 1.5 rem. Rem source stays rem.
Related calculators
Common questions
How many rem at 16 px and root 16?
1 rem. 16 / 16. A typed root, not CSS.
What about 24 px and root 16?
1.5 rem. 24 / 16.
What about 1.5 rem and root 16?
1.5 rem. Rem source, primary stays rem.
Is 1 rem always 16 px?
No. You type the root. Another rem-base changes 1 rem.
Does the calculator read page CSS?
No. No getComputedStyle. Three fields only.
Do the 16 and 10 presets calculate alone?
No. They only fill root. Then Calculate.
Does a comma in 1,5 work?
Yes. 1,5 rem at root 16 stays 1.5 rem.
Where do I convert HEX?
On HEX to RGB. Here 1 rem from 16 px stays.
Does zero root count?
No. Root must be positive. This is not an empty html rule.
Knowledge sources
The calculator counts bits, bytes or throughput from your numbers. Below are SI and bit definitions (NIST).
Page updated in 2026.