CSS px to rem Calculator
Convert px to rem and rem to px for CSS, with any root font size. Live two-way conversion plus the ready-to-paste CSS value and the exact formula shown.
Updated 2026-06-14 · Free · No sign-up · Runs privately in your browser
Show the formula & steps
How the px to rem Calculator Works
This tool converts between pixels (px) and rem for CSS, in both directions, using whatever root font size you specify. Type a px value to get rem, or type a rem value to get px — the other field and the ready-to-paste CSS update instantly. The default root font size is 16px, the browser default, but you can change it to match your stylesheet.
The rem unit means “root em”: it is sized relative to the font size of the root html element. Because that root value is defined once, rem-based layouts scale cleanly and respect a user’s browser font-size preferences, which is good for accessibility.
The Formula
rem = px ÷ root font size px = rem × root font size
The root font size is the font-size set on the html element. If you do not set it, browsers use 16px.
Worked Example
Convert 24px to rem with the default 16px root:
- rem = 24 ÷ 16 = 1.5rem
To reverse it, convert 1.5rem back to pixels:
- px = 1.5 × 16 = 24px
If you instead set html { font-size: 62.5% }, the root becomes 10px, and 24px ÷ 10 = 2.4rem — the popular “10px trick” that makes conversions easy to do in your head.
Common Conversions (16px root)
| px | rem |
|---|---|
| 8px | 0.5rem |
| 12px | 0.75rem |
| 16px | 1rem |
| 20px | 1.25rem |
| 24px | 1.5rem |
| 32px | 2rem |
| 48px | 3rem |
px vs rem vs em
- px is an absolute unit — one CSS pixel, fixed regardless of user settings.
- rem is relative to the root font size, so it scales the whole design from one value and respects browser zoom and font-size preferences.
- em is relative to the parent element’s font size, so nested values compound and can be hard to predict.
For consistent, accessible sizing of fonts, padding, margins and media-query breakpoints, most design systems standardise on rem and use a calculator like this to translate from the pixel values in a design file.
Frequently asked questions
How do I convert px to rem?+
Divide the pixel value by the root font size. With the default 16px root, 24px ÷ 16 = 1.5rem. To go back, multiply: 1.5rem × 16 = 24px. This calculator does both directions live as you type.
What is the default root font size?+
Browsers default the root (html element) font size to 16px, so 1rem = 16px unless you change it. If you set html { font-size: 62.5% } the root becomes 10px, which makes the math easy because 1rem then equals 10px and 1.6rem equals 16px.
What is the difference between rem and em?+
rem is always relative to the root (html) font size, so it stays consistent across the whole page. em is relative to the font size of the current element's parent, so nested em values compound and can drift. For predictable spacing and type scales, rem is usually preferred.
Why use rem instead of px in CSS?+
rem units scale with the user's browser font-size setting, which improves accessibility for people who increase default text size. Using rem for font sizes, spacing and media queries lets the whole layout grow or shrink proportionally from one root value.
Does changing the root font size break my rem values?+
It rescales them. Every rem value is multiplied by the new root size, so if you change the root from 16px to 20px, 1rem goes from 16px to 20px. Set the root font size in this calculator to match your CSS to get correct pixel equivalents.