PX to REM Converter
Set your root font size once, then convert in either direction. Both fields stay in sync as you type.
Pixels are absolute, rem is relative to the root font size. Choosing between them is one of the more consequential small decisions in a stylesheet.
How to use it
- 1Set your root font size, leave it at 16 unless you've changed it.
- 2Type into either the pixel or the rem field.
- 3Use the scale table for the values you reach for repeatedly.
What rem actually means
One rem equals the computed font size of the root html element. By default that's 16px in every major browser, which is where the familiar conversions come from: 16px is 1rem, 24px is 1.5rem, 8px is 0.5rem. Change the root size and every rem value on the page rescales with it.
That's the whole point. A user who sets their browser's default font size to 20px, usually because they need to, gets a proportionally larger interface if you sized in rem, and gets nothing if you sized in pixels. This is the accessibility argument, and it's a strong one.
rem, em and px: when to use each
Use rem for font sizes, and for spacing and layout values that should scale with text. Because rem always references the root, values stay predictable no matter how deeply nested the element is.
Use em when a value should scale with the element's own font size, button padding is the classic case, since padding of 0.75em keeps a small button and a large button visually proportional. Be aware that em compounds through nested elements, which is either a useful behaviour or a bug depending on whether you meant it.
Use px for things that genuinely shouldn't scale: hairline borders, fine shadow offsets, one-pixel dividers. A 1px border scaled to 1.25px renders blurry for no benefit.
Don't set the root to 62.5%
An old trick sets html { font-size: 62.5% } so that 1rem equals 10px and the mental maths becomes trivial. It works, but it overrides the user's chosen default font size, which discards the main reason to use rem in the first place. Users who increased their browser default get their preference silently divided by 1.6.
Use a converter instead, or lean on your build tooling. Keeping the root at 100% costs you a few seconds of arithmetic and keeps the accessibility benefit intact.
Common questions
- What is 16px in rem?
- 1rem, assuming the default 16px root font size. 24px is 1.5rem, 32px is 2rem, and 12px is 0.75rem.
- Should I use rem or px for media queries?
- Prefer em or rem. Pixel breakpoints ignore the user's font size setting, so someone browsing at a larger default can end up with a cramped desktop layout on a narrow window.
- Does using rem instead of px affect performance?
- No measurably. The browser resolves both to device pixels during layout; the cost is identical.
- Why do I get values like 0.9375rem?
- Because 15px isn't a clean multiple of 16. Either accept the decimal, browsers handle it fine, or design on a scale that divides neatly, such as multiples of 4px.
- What happens if the root font size changes?
- Every rem value on the page rescales proportionally, including spacing and layout if you sized those in rem too. That's usually what you want, but check your breakpoints.