px to rem Conversion Calculator
Written by Thierno Sadou Diallo, formula verified per our methodology • Last checked on 9/5/2026
The px to rem conversion is calculated with value in px ÷ reference font size (16px by default in browsers). 24px therefore equals 1.5 rem with the default base.
Explanation
The `rem` unit ("root em") expresses a size always relative to the font size of the document's root element (`html`), which is 16px by default in all modern browsers, unless a site explicitly changes it. Unlike pixels, a `rem` value automatically scales if the user increases their browser's default font size — an important accessibility setting for people with low vision — which is why `rem` is now widely recommended for text sizing in CSS instead of fixed pixels. Some sites deliberately set the root element's reference size to 10px (via `font-size: 62.5%`, since 62.5% of 16px equals 10px), which simplifies mental math: 1.6 rem then becomes 16px, 2.4 rem becomes 24px, and so on — hence the adjustable "reference size" field in this calculator, rather than a fixed 16px base. This calculator deliberately limits itself to converting to `rem`: the `em` unit, by contrast, is relative to the PARENT element's font size (which varies depending on where in the document it's used), not to the root — so a single calculation can't reliably give an `em` value in general. For another common web-development calculation, see our password entropy calculator; for another everyday design and development tool, our aspect ratio calculator.
Example: 24px with the default 16px base
Inputs
Value in pixels: 24px. Reference size: 16px.
Calculation
Value in rem = 24 ÷ 16 = 1.5 rem.
Result
24px equals 1.5 rem, with a 16px reference size.
Frequently asked questions
Why use rem instead of px in CSS?
Because a `rem` value respects the user's accessibility preferences: if someone increases their browser's default font size to read more easily, every element sized in `rem` scales up proportionally, unlike sizes fixed in pixels, which stay the same regardless of that setting.
Why do some sites use a 10px base instead of 16px?
To simplify the mental math between pixels and rem: with `font-size: 62.5%` on the root element (62.5% of 16px = 10px), every rem value directly corresponds to a tenth of its pixel value (1.6 rem = 16px), which is more intuitive to work with than a 16px base.
What's the difference between rem and em?
`rem` is always relative to the document's root font size, one single reference everywhere. `em` is relative to the direct parent element's font size, which can vary from one part of the page to another — making `em` better suited to internal spacing proportional to a specific component's text, and `rem` more predictable for an overall font size.