By Ahsan Khowaja · Updated 27 October 2026
How to use the px to rem converter
- Pick the direction: px to rem or rem to px.
- Type the value you have. For px to rem that is the pixel size from your design file; for rem to px it is the rem value from a stylesheet.
- Leave the root font size at 16px unless your CSS sets
html { font-size }to something else. The result updates as you type, with the working shown underneath and a conversion table for the most common sizes at that root.
The rows under the result show the same value as a percentage of the root and what it would render at if a visitor raised their browser's default font size to 20px or 24px. That last line is the whole point of rem: a 24px heading stays 24px for everyone, while a 1.5rem heading grows to 30px or 36px for people who need bigger text.
The px to rem formula
A rem ("root em") is the font size of the root element, the <html> tag. Every major browser ships with a default root size of 16px, and nothing changes it unless your stylesheet or the user does (MDN: rem). So:
- rem = px ÷ root font size
- px = rem × root font size
With the 16px default: 24 ÷ 16 = 1.5rem, and going back, 1.5 × 16 = 24px. The most looked-up sizes are easy to remember because 16 divides evenly into eighths: 10 px to rem is 0.625rem, 14 px to rem is 0.875rem, 16px to rem is exactly 1rem, 18 px to rem is 1.125rem, 24 px to rem is 1.5rem, 4px to rem is 0.25rem and 1px to rem is 0.0625rem.
If your project uses the 62.5% font size trick (html { font-size: 62.5% }, which makes the root 10px so that 1rem = 10px), type 10 into the root box and 16px becomes 1.6rem. The trick makes mental arithmetic easier, but it also means any third-party widget that assumes 1rem = 16px renders too small, so most modern style guides leave the root alone and let the converter do the dividing.
Px to rem table at the 16px default
| px | rem | Percent of root | Typical use |
|---|---|---|---|
| 1px | 0.0625rem | 6.25% | Hairline borders |
| 2px | 0.125rem | 12.5% | Focus rings, thick borders |
| 4px | 0.25rem | 25% | Smallest spacing step |
| 8px | 0.5rem | 50% | Base spacing unit |
| 10px | 0.625rem | 62.5% | Tiny labels (too small for body text) |
| 12px | 0.75rem | 75% | Captions, legal text |
| 13px | 0.8125rem | 81.25% | Dense UI text |
| 14px | 0.875rem | 87.5% | Secondary text, table cells |
| 15px | 0.9375rem | 93.75% | |
| 16px | 1rem | 100% | Body text |
| 18px | 1.125rem | 112.5% | Lead paragraphs, large body |
| 20px | 1.25rem | 125% | h4 / h5 |
| 24px | 1.5rem | 150% | h3, large text in WCAG terms |
| 28px | 1.75rem | 175% | |
| 32px | 2rem | 200% | h2 |
| 36px | 2.25rem | 225% | |
| 40px | 2.5rem | 250% | h1 on small screens |
| 48px | 3rem | 300% | h1 |
| 64px | 4rem | 400% | Display headings |
| 96px | 6rem | 600% | Hero numbers |
Every value in the table is exact, because each px value is a whole number of sixteenths. Sizes that aren't, such as 15px at an 18px root (0.8333rem), are shown to four decimals, which is more than enough: browsers round the final computed size to a fraction of a device pixel anyway.
Rem to px in CSS: reading a stylesheet
Going from rem to px is the question you ask when reading someone else's CSS: how big is padding: 0.75rem 1.25rem? Multiply by the root size. At 16px that is 12px top and bottom, 20px left and right. max-width: 65rem is 1040px; gap: 2.5rem is 40px. Switch the converter to rem to px and type the number, or scan the table above in reverse.
One catch: in a media query, rem and em ignore your html { font-size } rule and use the browser's initial font size (normally 16px). So @media (min-width: 48rem) is 768px even on a site using the 62.5% trick. That is by design, so that breakpoints track the user's font preference rather than the stylesheet.
Px to rem converter for font sizes and spacing
Designers hand over pixel values; CSS is happiest in rem for anything that should scale with the reader's text setting. The usual split:
- Font sizes: always rem. A 14px label becomes
font-size: 0.875rem, so a visitor who sets a 20px default sees it at 17.5px instead of staying stuck at 14px. - Spacing, max-widths and gaps: usually rem, so layouts loosen up along with the text. Convert 8px to 0.5rem, 16px to 1rem, 24px to 1.5rem and so on; most spacing scales are multiples of 4px, so the rem values come out as clean quarters.
- Borders, shadows and hairlines: keep in px. A 1px border should stay one pixel; 0.0625rem can round to 0 or 2 pixels after zoom and look wrong.
- Media query breakpoints: either works, but remember the note above about the initial font size.
If you set font sizes in rem and still find the text too small or too large at the user's setting, the problem is usually the scale between sizes, not the units; the font size calculator builds a ratio-based scale and outputs every step in rem.
Rem vs px vs em
Rem is relative to one fixed reference, the root, so 1.5rem is the same size everywhere on the page. Em is relative to the font size of the element's parent, so 1.5em inside a 20px card is 30px but inside a 14px footnote is 21px, and nested em values multiply. That makes em the right unit when something should scale with its own container (padding inside a button, an icon next to its label) and rem the right unit for everything that should scale with the page. The px to em converter handles the parent-relative case, including the compounding.
Px is absolute within the page: it never follows the user's font-size setting, though it does scale with browser zoom (Ctrl + plus), because zoom resizes the CSS pixel itself. The WCAG "resize text" criterion asks that text can be enlarged to 200% without loss, which zoom satisfies, but respecting the font-size preference is what rem gives you on top of that. If your layout also needs real-world sizes, the pixels to inches converter covers physical units and screen density.
