PX to REM Converter
Convert px to rem (and rem to px) for responsive, accessible CSS — with a handy reference table.
Was this tool helpful?
Thanks for the feedback!
This PX to REM converter turns pixel values into rem units for CSS, or rem back into pixels, using whatever root font size your project sets. Front-end developers and designers use it when a mock-up gives sizes in px but the stylesheet should use rem, so that text follows the reader's browser settings.
Converting with the three fields
Type a number in Pixels (px) to get rem, or leave that box empty and type a number in or REM to get pixels. If both boxes hold a value, the pixel box wins. Root font size (px) starts at 16, the default in every major browser; change it only if your stylesheet sets a different size on the html element. Click Convert and the answer appears in large type, with rem results rounded to four decimal places and pixel results to two.
Below the answer you get a reference list for 10, 12, 14, 16, 18, 20, 24, 32 and 48px, recalculated for the root size you entered, which is handy when you are building a type scale.
The formula, with worked examples
The maths is a single division: rem = px ÷ root font size, and in reverse px = rem × root font size.
- 24px with a 16px root: 24 ÷ 16 = 1.5rem.
- 1.5rem with a 16px root: 1.5 × 16 = 24px.
- 14px with a 10px root: 14 ÷ 10 = 1.4rem.
The last case is the "62.5% trick": setting html { font-size: 62.5%; } makes 1rem equal 10px at the default size, so a 10px root here gives you tidy decimals. The trick is itself relative, so readers who raise their default font size still get larger text.
Why rem helps accessibility
Browsers let people choose a default font size, for example "Large" under Chrome's appearance settings. Font sizes declared in rem follow that preference; sizes declared in px ignore it, although page zoom still enlarges both. WCAG success criterion 1.4.4 asks that text can be resized to 200% without losing content or function, and rem-based type and spacing make that much easier to meet because the whole layout grows in proportion.
rem, em and px: when to use which
| Unit | Relative to | Good for |
|---|---|---|
| rem | The root (html) font size | Font sizes, spacing, max-widths |
| em | The element's font size (the parent's, when setting font-size) | Button padding that scales with its label |
| px | A fixed CSS pixel | 1px borders, hairlines, shadows |
em values compound: a 1.2em list nested inside another 1.2em list ends up 1.44 times the base size. rem never compounds, which is why most design systems use it for typography.
Gotchas worth knowing
- Inside media queries, rem and em are based on the browser's initial font size, not the value you set on
html. With the 62.5% trick,@media (min-width: 48rem)still means 768px at default settings, not 480px. - Entering 0 or leaving the root field blank falls back to 16px.
- Long decimals such as 0.9375rem (15px) are perfectly valid CSS; browsers round to the nearest device pixel when painting.
When you are sizing images or video embeds rather than text, the Aspect Ratio Calculator fits better, and the CSS Minifier tidies the finished stylesheet.