π PX to REM Converter
Convert pixels to rem (or rem back to pixels) at any base font size.
REM value
Common PX values at this base
How to Use This Calculator
This converter handles px, rem, and em in both directions so you can translate design specs into CSS quickly. Set the base font size to match your root element, enter your value, and read off the result.
Choose the direction: PX to REM for converting a design measurement into a relative unit, or REM to PX to check what a rem value actually renders as.
Enter your value in the px or rem field. Leave the base at 16 unless your stylesheet sets a different root font size.
Read the converted value plus the em equivalent. Use the conversion table below the calculator for the most common pixel values at your chosen base.
The Formula
The math is simple division. With the browser default base of 16px, 24px / 16 = 1.5rem. Going the other way, 2rem x 16 = 32px. The em value shown is the same number, because with no nested parent changing the font size, em equals rem at the root level. They only diverge once elements are nested inside a parent with its own font size, which is why the distinction matters in real stylesheets even though the calculator shows identical numbers.
Worked Example
Say your designer hands you a card with 24px padding and 14px body text, and your root font size is the 16px default. Padding: 24 / 16 = 1.5rem. Body text: 14 / 16 = 0.875rem. Reverse check: a heading set to 2rem renders as 2 x 16 = 32px. If the project uses the 62.5 percent trick (10px base), the same values become 2.4rem, 1.4rem, and 20px respectively. Enter 10 as the base in that case and the table updates instantly.
When to Use rem, em, and px
Use rem for anything that should scale with the user settings: font sizes, spacing, and layout widths. Because rem tracks the root size, a user who bumps their browser default to 20px gets a proportionally larger page, which is a genuine accessibility win. Use em for component-internal scaling, like padding on a button that should grow if the button text is made larger; the padding is tied to the local font size, not the page root. Use px for hairline details that must not scale, such as 1px borders and tiny shadows. A common gotcha is compounding: set font-size in em on nested list items and each level multiplies, making deeply nested text shrink or grow out of control. Rem never compounds, which is why most modern design systems default to it. Another gotcha is forgetting that rem in media queries always refers to the browser default, not your custom root size, so a 48rem breakpoint is 768px regardless of what you set on the html element.
Frequently Asked Questions
What is the difference between rem and em in CSS?
Both are relative units, but they use different reference points. A rem is always relative to the root element (the html tag, usually 16px by default), so 1.5rem is 24px everywhere on the page. An em is relative to the font size of the nearest parent, so nested elements with em sizes can compound unexpectedly. Use rem for predictable, page-wide sizing and em when you deliberately want sizing that scales with a local context, like padding inside a button that grows with its text.
Why is 16px the default base font size?
16px is the default font size set by every major browser for body text. The rem unit multiplies from this root size, so with a 16px base, 1rem = 16px, 2rem = 32px, and 0.5rem = 8px. You only need to change the base in this calculator if your stylesheet overrides the root size, for example with html { font-size: 62.5%; }, which makes the base 10px.
What is the 62.5% font-size trick?
Setting html { font-size: 62.5%; } makes 1rem equal 10px, because 62.5 percent of 16px is 10px. Developers like it because the mental math becomes trivial: 24px is 2.4rem, 14px is 1.4rem. If you use this trick, enter 10 as the base font size here. Note that it still respects user zoom and browser settings, so it stays accessible, though some developers prefer to keep the 16px base and do the division.
Does rem break when a user changes their browser font size?
No, and that is exactly why rem exists. If a user sets their browser default to 20px for readability, 1rem becomes 20px everywhere instead of 16px, and the whole layout scales up proportionally. Hard-coded px values ignore that preference. This is why accessibility guidelines recommend relative units for text sizing.
Should I use rem in media queries?
Yes, and it is the one place where rem and em behave identically. In media queries both units are always relative to the browser default font size (16px in most cases), never to anything in your stylesheet. So a breakpoint of 48rem equals 768px, and it scales if the user zooms or raises their default font size, which keeps your layout responsive to real users.