PX ↔ REM Converter
Bidirectional px ↔ rem converter. Results depend on the root html font size — type any base or use the 16px / 10px presets, then click Calculate.
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.
FAQ — practical examples
- Is 1rem always 16px?
- No.
remdepends on thehtmlfont size. Browsers often default to 16px, but if you set 18px or 10px, 1rem changes meaning. Enter the real root (or use a preset) and click Calculate. - What do the 16px and 10px presets do?
- They only fill the root font-size field. They do not auto-calculate — you still click Calculate. 16px is the common browser default; 10px matches the “1rem ≈ 10px” mental model (often via
html { font-size: 62.5%; }). - How do I copy the result into CSS?
- After Calculate, use Copy next to rem/px, or Copy CSS for a snippet with the
htmlroot and.text { font-size: … }. - When should I prefer rem over px?
- When typography and spacing should scale with the root (design systems, accessibility). Keep
pxfor borders, hairlines, and shadows. Most UIs mix both. - What is the difference between rem and em?
remis always relative to the roothtml.emis relative to the current element’s font and can compound when nested. The optional parent-font field shows an approximateemfor that parent — only after Calculate.- Does the result update while I type?
- No. The calculator is intentionally submit-only: choose direction (px or rem), enter values, click Calculate. Changing direction or a preset clears the previous result so stale values do not linger.