px / rem Converter
Convert between px and rem for a given root font size, with a quick reference table.
Results are provided as is, for general information. Check anything important before relying on it. See the Terms of Use.
About this tool
rem units scale with the user's root font size, which makes them the accessible default for typography and spacing — but design tools and specs are almost always in pixels. This converter goes both ways for a root font size you set (16px unless you have changed the html font-size), and shows a reference table of the pixel values a typical spacing and type scale is built from, each with its rem equivalent. It is a small arithmetic tool: value divided by root for px to rem, value times root for rem to px, with the result trimmed to a clean number. Nothing leaves your browser.
How it works
rem = px ÷ root font size px = rem × root font size Root font size is 16px unless the page sets its own on <html>.
A rem is a multiple of the root element's font size, so the same rem value renders at a different pixel size if the root changes. Browsers default the root to 16px, which is why 1rem is usually 16px; if a stylesheet sets html { font-size: 62.5% } the root becomes 10px and 1rem is 10px.
| Question | Working | Answer |
|---|---|---|
| 24px in rem (16px root) | 24 ÷ 16 | 1.5rem |
| 1.5rem in px (16px root) | 1.5 × 16 | 24px |
| 20px in rem with a 10px root | 20 ÷ 10 | 2rem |
When to use it
Questions
Why use rem instead of px?
When a user increases their browser's default font size for readability, lengths in rem scale up with it — text, padding, and layout grow together. Lengths in px do not respond, so a px-based layout can stay cramped or clip text. Using rem for font sizes and most spacing is a standard accessibility practice.
What should the root font size be?
Browsers default to 16px, and leaving it there is the safest choice because it respects a user who changed that default. Some projects set html { font-size: 62.5% } so 1rem = 10px for easier math — if yours does, put 10 in the root field here.
Is rem relative to the parent element?
No — that is em. rem is always relative to the root element's font size, no matter how deeply nested the element is. That predictability is why rem is easier to reason about for a whole-page scale.
How precise is the result?
It is rounded to five decimal places and trailing zeros are trimmed, so 24px at a 16px root shows as 1.5rem, not 1.50000rem. Five places is well beyond what any layout needs.