A px to rem converter changes a measurement in pixels into rem units, the relative unit CSS uses for scalable layouts. It divides the pixel value by the root font size, so the result stays in proportion when a reader changes their browser text size. The tool below converts in either direction and runs entirely in your browser.
What px and rem Are
A pixel, written px, is an absolute unit. A size set in px stays the same no matter what text size the reader chooses in their browser. A rem is a relative unit: it is sized as a multiple of the root font size, which is the font size set on the html element. By default that root is 16px, so 1rem equals 16px. When you size in rem, every measurement scales together if the root changes, which is what makes layouts respond to a reader’s preferred text size.
How to Use It
- Enter the value you want to convert in the first field.
- Choose the direction: PX to REM, or REM to PX.
- Set the root font size if yours is not the standard 16px.
- Read the converted value and the formula the tool used.
- Copy the result into your stylesheet.
The Formula
Common px to rem Values (16px Base)
| Pixels | Rem |
|---|---|
| 4px | 0.25rem |
| 8px | 0.5rem |
| 12px | 0.75rem |
| 16px | 1rem |
| 20px | 1.25rem |
| 24px | 1.5rem |
| 32px | 2rem |
| 48px | 3rem |
px vs rem vs em
Absolute. One pixel is always the same size and ignores the reader’s text-size setting. Best for: borders and details that should not scale.
Relative to the root font size only. Predictable and consistent across the whole page. Best for: font sizes, spacing, and most layout values.
Relative to the font size of the parent element, so it compounds when nested. Best for: spacing tied to the local text size, such as button padding.
When to Use rem
Reach for rem when you want sizes that respect the reader’s browser text-size setting, which covers most font sizes, margins, and padding. Because rem is measured against the root only, it stays predictable no matter how deeply an element is nested, unlike em which compounds with each parent. Keep px for things that must stay fixed, such as a one-pixel border or a hairline rule. Many teams set the root font size in rem and size everything else in rem on top of it, so a single root change rescales the entire interface.
Last Thoughts on Converting px to rem
Converting px to rem is one division: the pixel value over the root font size. The math is small, but doing it by hand across a whole stylesheet is where mistakes creep in, especially when your root is not 16px. A converter removes that friction so you can design in the pixels you can picture and ship the rem values that scale.
Convert your next value above, then keep building with the rest of our free online tools. If you are styling a page, pair this with our CSS gradient generator, box shadow generator, and color picker.
Key Takeaways:
- rem = px / root-font-size, and px = rem x root-font-size for the reverse.
- At the default 16px root, 16px is 1rem, 24px is 1.5rem, and 8px is 0.5rem.
- rem is measured against the root only, so it stays predictable and never compounds with nesting like em does.
- Use rem for font sizes and spacing you want to scale; keep px for fixed details like borders.
- Change the root field if your project sets a non-standard root font size.
- This converter runs in your browser; nothing you type is sent anywhere.
Frequently Asked Questions (FAQs)
How do you convert px to rem?
Divide the pixel value by the root font size. At the standard root of 16px, 16px becomes 1rem and 24px becomes 1.5rem. If your project uses a different root font size, divide by that number instead.
What is 16px in rem?
16px is 1rem at the default root font size of 16px, because 16 divided by 16 equals 1. If the root font size were 20px, then 16px would be 0.8rem.
How do you convert rem back to px?
Multiply the rem value by the root font size. At a 16px root, 1.5rem becomes 24px and 2rem becomes 32px. Switch the converter to REM to PX and it does the multiplication for you.
What is the default root font size?
Browsers default the root font size to 16px, so 1rem equals 16px unless a stylesheet changes the font size on the html element. Set the root field in the tool to match your project if you have changed it.
Should I use px or rem in CSS?
Use rem for font sizes and spacing so they scale with the reader’s chosen text size, and keep px for fixed details such as borders. rem also stays predictable across nested elements, unlike em, which compounds with each parent.
What is the difference between rem and em?
rem is always relative to the root font size, while em is relative to the font size of the parent element. Because em compounds when elements are nested, rem is easier to reason about for consistent sizing across a page.
