CSS
px to rem Converter
Convert px to rem (and back) at any root font-size.
Browsers default to 16px unless you change :root / html.
| px | rem |
|---|---|
| 8px | 0.5rem |
| 10px | 0.625rem |
| 12px | 0.75rem |
| 14px | 0.875rem |
| 16px | 1rem |
| 18px | 1.125rem |
| 20px | 1.25rem |
| 24px | 1.5rem |
| 28px | 1.75rem |
| 32px | 2rem |
| 40px | 2.5rem |
| 48px | 3rem |
| 56px | 3.5rem |
| 64px | 4rem |
How it works
rem is a relative unit: one rem equals the font-size of the root (html) element, which browsers set to 16px by default. So px ↔ rem is just multiplying or dividing by the root font-size.
Set the root font-size, then type a value in either the px or the rem field — the other updates immediately, and the reference table below recalculates for the values you reach for most. Copy any result with one click.
Using rem for type and spacing means your layout scales with a visitor’s browser font-size preference, which is better for accessibility. Everything here runs in your browser; nothing is fetched or sent.
Frequently asked
How do I convert px to rem?+
Divide the pixel value by the root font-size. At the browser default of 16px, 24px is 24 ÷ 16 = 1.5rem. Type a px value here and the rem is filled in instantly (and vice versa), using whatever root font-size you set.
What is the default root font-size?+
Browsers default to 16px on the root (html) element, so 1rem = 16px unless you override it in CSS. If your design system sets a different root — some use 62.5% to make 1rem = 10px — change the root field here and every conversion and the reference table update to match.
Should I use rem or px?+
rem is generally preferred for font sizes and spacing because it scales with the user’s browser font-size setting, which is better for accessibility — a visitor who bumps their default text size sees your whole layout scale proportionally. px is fine for things that shouldn’t scale, like hairline borders. rem keeps type and spacing responsive to user preference.
Why does 62.5% root font-size come up so often?+
Setting html { font-size: 62.5% } makes 1rem equal 10px (62.5% of 16), so the math becomes trivial — 1.6rem is 16px, 2.4rem is 24px. Enter 10 as the root font-size here to work in that system.
Is anything uploaded?+
No. The conversion is arithmetic done entirely in your browser — nothing you enter is sent anywhere.
More free tools
All toolsCSS Selector Tester
Paste HTML, type a selector, see exactly what it matches.
Open toolCSS Grid Generator
Build a CSS grid visually and copy the code.
Open toolCSS Box-Shadow Generator
Design layered box-shadows with live sliders and copy the CSS.
Open toolMore tools shipping weekly.
Nail the units, then nail the review
This converter removes the guesswork from your type scale. Shotline removes it from feedback — clients drop comments on the live page and each pin points at the exact element.
No signup needed. Free demo canvases stay live for 72 hours.
or start your 14-day free trial — no card required.