How to convert px to rem in CSS
Rem units respect the reader's font-size settings, which is why accessibility guides prefer them over fixed pixels. The conversion is simple — divide by the root size, normally 16 — and a converter does batches of values instantly.
Open the free px ↔ rem converter →Free · no signup · no watermarks
Step by step
- Open the px to rem converter. Start the free converter.
- Confirm the root size. Most projects use the browser default of 16px; adjust it if your CSS sets a different html font-size.
- Enter your px values. Type any pixel value — 24px at a 16px root becomes 1.5rem.
- Copy the rem values. Move the converted values into your stylesheet.
Tips that save a second try
- Use rem for font sizes and spacing so layouts scale when users raise their default font size.
- Keep borders and hairlines in px — a 1px line is meant to stay 1px.
- Memorize the common ladder at a 16px root: 4px = 0.25rem, 8px = 0.5rem, 16px = 1rem, 24px = 1.5rem, 32px = 2rem.
Common questions
Why use rem instead of px?
Rem values scale with the user's chosen root font size, so readers who raise their default text size get a proportionally larger layout. Fixed px values ignore that preference, which hurts readability and accessibility.
What is the difference between rem and em?
Rem is relative to the root font size and stays predictable everywhere. Em is relative to the current element's font size, so nested elements compound — useful occasionally, surprising often. Default to rem.