Design tool
Pixel / REM Converter
Translate pixel measurements into scalable CSS rem values.
Browsers commonly default to a 16 px root font size, but sites can override it.
REM value
—
What the two fields do
The first field is a pixel measurement. The second is the root font size in pixels — the size applied to a page's html element — and it must be greater than zero, since it's the number the pixel value gets divided by. The result appears both as a plain number and as ready-to-paste CSS, such as "2rem".
16px is the browser default root size most designers assume, but the converter uses whatever value you type in, because a project's stylesheet can set the html element's font size to something else entirely.
Conversions at the standard 16px root
32px ÷ 16px root = 2rem.
18px ÷ 16px root = 1.125rem.
10px ÷ 16px root = 0.625rem, a size that shows up often in fine print or badge text.
Why rem exists: accessibility that px can't provide
A pixel value is fixed and ignores whatever font size preference a visitor has set. A rem value is always relative to the root element's font size, so it grows or shrinks automatically when someone raises their browser's or operating system's default text size for readability. If a visitor's root is set to 20px instead of the 16px default, a value defined as 1rem renders at 20px on their screen, while a value hardcoded at 16px stays exactly 16px no matter what they've configured.
The gap compounds with size: a 48px heading expressed as 3rem (48 ÷ 16) automatically grows to 60px real screen size the moment a visitor's root is 20px instead of 16px (3 × 20 = 60), while a heading hardcoded at 48px never moves regardless of that visitor's settings.
Everyday rem conversions
- A 14px caption converts to 0.875rem against a 16px root (14 ÷ 16).
- A 48px hero heading converts to 3rem against a 16px root (48 ÷ 16).
- 24px of padding on an 8px spacing grid converts to 1.5rem against a 16px root (24 ÷ 16).
- Body copy set at 16px is exactly 1rem — the reference point every other conversion here is measured against.
- A project using the "62.5%" trick sets its root to 10px, so that same 24px value converts to 2.4rem instead of 1.5rem (24 ÷ 10).
Frequently asked questions
What root font size should I use if I don't know mine?
Most browsers set the html element to 16px by default unless a stylesheet overrides it, so 16 is a safe first value to try.
Why does the calculator require the root font size to be above zero?
Rem is defined as pixels divided by root size, and division by zero has no answer, so a 0 or blank root leaves the result field empty.
What is the 62.5% trick some CSS guides mention?
Setting html { font-size: 62.5% } shrinks the effective root to 10px, since 62.5% of the 16px browser default is 10px. That makes mental math easier, since every 10px then equals exactly 1rem instead of a less convenient 16px-based fraction.
Does a rem value change depending on how deeply an element is nested?
No. Unlike the older em unit, rem always measures against the root html element's font size rather than a parent element's, so a component's rem sizing stays predictable no matter how deeply it's nested in the page.
Should every px value in my CSS become rem?
Not necessarily. Font sizes and vertical spacing are where accessibility scaling matters most and rem earns its keep, while a fixed detail like a 1px border is often left in px, since a hairline border has no real reason to grow with someone's text size.
How do I convert a rem value back to pixels?
Multiply the rem value by the root font size in use. 2.4rem at a 10px root is 24px (2.4 × 10), while the same 2.4rem at a 16px root is 38.4px (2.4 × 16).