Web Development
PX to REM Converter
Type a pixel value to get its rem equivalent instantly — or type rem to get pixels. Change the root font size if your site doesn't use the browser default of 16px.
| Pixels | REM |
|---|---|
| 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 |
| 36px | 2.25rem |
| 40px | 2.5rem |
| 48px | 3rem |
| 56px | 3.5rem |
| 64px | 4rem |
| 72px | 4.5rem |
| 96px | 6rem |
How it works
A rem is relative to the font size of the root html element. The converter divides your pixel value by the root font size: rem = px ÷ root size. With the default 16px root, 24px becomes 1.5rem.
Converting the other way multiplies instead: px = rem × root size.
Use cases
- Turning a design file measured in pixels into scalable CSS.
- Checking spacing and type scales stay consistent across a design system.
- Respecting visitors who increase their browser's default text size — rem-based sizes scale with it, fixed pixels do not.
FAQ
Common questions
Why use rem instead of px?
Rem units scale with the visitor's browser text-size setting, so layouts stay readable for people who need larger text. Pixel sizes stay fixed.
What root font size should I use?
Use 16px unless your stylesheet changes the font size of the html element — check your CSS for an html or :root font-size rule.
Building or refreshing a design system?
We turn designs into fast, accessible front ends that scale. Tell us about your project.