PX to REM Converter
Convert pixels to rem or rem to pixels for any root font size, and grab a reference table of the sizes you reach for most.
Result
| px | rem |
|---|---|
| 1px | 0.0625rem |
| 2px | 0.125rem |
| 4px | 0.25rem |
| 8px | 0.5rem |
| 10px | 0.625rem |
| 12px | 0.75rem |
| 14px | 0.875rem |
| 16px | 1rem |
| 18px | 1.125rem |
| 20px | 1.25rem |
| 24px | 1.5rem |
| 32px | 2rem |
| 40px | 2.5rem |
| 48px | 3rem |
| 64px | 4rem |
Why front-end work keeps coming back to rem
Designers usually hand off type and spacing in pixels, but robust CSS often wants rem so the layout respects a visitor’s chosen font size. That leaves you converting between the two constantly. The math is simple — divide by the root to get rem, multiply to get px — but doing it by hand for a whole type ramp is where mistakes and inconsistencies creep in.
Set the root to whatever your project uses (16px by default) and the reference table below gives you every common size at a glance, so a spec that says “18px” becomes 1.125rem without a second thought.
Frequently Asked Questions
How do I convert px to rem?
Divide the pixel value by the root font size. At the browser default of 16px, 24px ÷ 16 = 1.5rem, and 8px ÷ 16 = 0.5rem. To go the other way, multiply: 1.5rem × 16 = 24px.
What is the root font size and why 16px?
rem is relative to the font-size set on the root <html> element. Browsers default that to 16px, so 1rem = 16px unless you change it. This converter lets you set a different root if your project overrides it.
Should I use rem or px in my CSS?
rem units scale with the user's browser font-size setting, which is better for accessibility and responsive typography — someone who bumps their default text size gets a proportionally larger layout. px is fine for things that should not scale, like hairline borders. Many teams use rem for type and spacing and px for 1px details.
Does changing the root font size break my rem values?
It rescales everything expressed in rem. If you set the root to 10px (a common trick so 1rem = 10px and math is easy), then 1.6rem renders as 16px. This tool shows exactly what each rem value resolves to at the root you enter.
What is the difference between rem and em?
rem is always relative to the root font size, so it is predictable anywhere in the document. em is relative to the font-size of the current element, so it compounds when nested. This converter works in rem; for em you would use each element's own font-size as the base.
This is a helper that gives estimates — verify against your design system and your project’s real root font size before relying on the numbers.