What PX to REM Converter does
To convert px to rem, divide the pixel value by the root font size. Browsers set that root to 16px unless a stylesheet changes it, so 24px is 24 / 16 = 1.5rem and 1rem is 16px. This converter does the division for any value and any root, and flips to rem to px when you need the pixel size back. Results are rounded to four decimal places, so 17px shows as 1.0625rem and 24px at an 18px root shows as 1.3333rem. Alongside the answer you get the working (24 ÷ 16), a short CSS snippet, and a table of eight common type sizes from 0.75rem to 3rem, recalculated for your root.
PX to REM conversion chart (16px root)
Common pixel values and their rem equivalents at the browser default root font size.
| Pixels | REM | Pixels | REM |
|---|---|---|---|
| 1px | 0.0625rem | 22px | 1.375rem |
| 2px | 0.125rem | 24px | 1.5rem |
| 4px | 0.25rem | 28px | 1.75rem |
| 6px | 0.375rem | 30px | 1.875rem |
| 8px | 0.5rem | 32px | 2rem |
| 10px | 0.625rem | 36px | 2.25rem |
| 11px | 0.6875rem | 40px | 2.5rem |
| 12px | 0.75rem | 48px | 3rem |
| 13px | 0.8125rem | 56px | 3.5rem |
| 14px | 0.875rem | 64px | 4rem |
| 15px | 0.9375rem | 72px | 4.5rem |
| 16px | 1rem | 80px | 5rem |
| 18px | 1.125rem | 96px | 6rem |
| 20px | 1.25rem | 128px | 8rem |
100px is 6.25rem. Every multiple of 4px gives a rem value that ends cleanly at 0.25, 0.5, 0.75 or a whole number, which is one reason spacing scales are built on 4px steps.
PX to REM formula
rem = px / root font size. px = rem x root font size.
The root font size is the computed font-size of the html element in pixels. With no CSS overriding it, that is 16. So 20px is 20 / 16 = 1.25rem, and 3rem is 3 x 16 = 48px. If your stylesheet has html { font-size: 18px }, divide by 18 instead: 24px becomes 1.3333rem. A percentage on html is a percentage of the browser default, so at the usual 16px, 62.5% is a 10px root and 112.5% is an 18px root. The tool shows the exact division it performed in the Formula row and rounds the answer to four decimal places.
PX to REM at 10px, 16px, 18px and 20px root font sizes
The same pixel value gives a different rem number at each root. Use the column that matches your html font-size.
| Pixels | 16px root | 10px root | 18px root | 20px root |
|---|---|---|---|---|
| 8px | 0.5rem | 0.8rem | 0.4444rem | 0.4rem |
| 10px | 0.625rem | 1rem | 0.5556rem | 0.5rem |
| 12px | 0.75rem | 1.2rem | 0.6667rem | 0.6rem |
| 14px | 0.875rem | 1.4rem | 0.7778rem | 0.7rem |
| 16px | 1rem | 1.6rem | 0.8889rem | 0.8rem |
| 18px | 1.125rem | 1.8rem | 1rem | 0.9rem |
| 20px | 1.25rem | 2rem | 1.1111rem | 1rem |
| 24px | 1.5rem | 2.4rem | 1.3333rem | 1.2rem |
| 32px | 2rem | 3.2rem | 1.7778rem | 1.6rem |
| 40px | 2.5rem | 4rem | 2.2222rem | 2rem |
| 48px | 3rem | 4.8rem | 2.6667rem | 2.4rem |
| 64px | 4rem | 6.4rem | 3.5556rem | 3.2rem |
Values in the 18px column are rounded to four decimal places. 0.4444rem at an 18px root is 7.9992px, close enough that the browser renders it as 8px.
REM to PX chart (16px root)
| REM | Pixels | Typical use |
|---|---|---|
| 0.0625rem | 1px | Hairline borders |
| 0.125rem | 2px | Thick borders, focus rings |
| 0.25rem | 4px | Tight gaps, small radii |
| 0.5rem | 8px | Compact padding |
| 0.75rem | 12px | Fine print, captions |
| 0.875rem | 14px | Secondary text, labels |
| 1rem | 16px | Body text |
| 1.125rem | 18px | Lead paragraphs |
| 1.25rem | 20px | Small headings |
| 1.5rem | 24px | Section headings |
| 2rem | 32px | Page headings |
| 2.5rem | 40px | Large headings |
| 3rem | 48px | Display headings |
| 4rem | 64px | Section spacing |
| 5rem | 80px | Large section spacing |
| 6rem | 96px | Hero spacing |
Worked conversions
A 24px heading from a design file
Convert px to rem, Value 24, Root font size 16
1.5rem. Formula: 24 ÷ 16. CSS: font-size: 1.5rem;
An odd size that does not divide evenly
Convert px to rem, Value 17, Root font size 16
1.0625rem
A project using the 62.5% root
Convert px to rem, Value 24, Root font size 10
2.4rem
With a 10px root the rem value is the pixel value with the decimal point moved one place.
A site with an 18px base size
Convert px to rem, Value 24, Root font size 18
1.3333rem. The Common values table changes to 13.5px, 15.75px, 18px, 20.25px, 22.5px, 27px, 36px and 54px.
Reading a rem value back in pixels
Convert rem to px, Value 1.125, Root font size 16
18px. Formula: 1.125 × 16.
A negative margin
Convert px to rem, Value -8, Root font size 16
-0.5rem
When to use rem and when to keep px
Use rem for anything tied to reading: font sizes, the padding and margins around text, gaps between items, and max-widths for text columns. People can raise their browser's default font size, often because they need larger text. That setting changes what 1rem means, so a rem-based layout grows with them. A font-size written in px ignores the setting and stays the size the designer chose.
This is separate from page zoom. Zoom scales everything, px included. The default font size preference only reaches sizes written in relative units, which is why rem matters even though zoom exists.
Keep px for details that should not scale: a 1px border, a hairline divider, a precise shadow offset. Scaling those gives blurry fractional edges and helps nobody.
On the 62.5% trick: setting html { font-size: 62.5% } makes 1rem equal 10px so the arithmetic is easy. It still respects the reader's preference because it is a percentage, but any third-party component sized in rem on the assumption of a 16px root will render at 62.5% of its intended size. Leaving the root alone and converting the numbers avoids that.
How to get your result
- 1
Set Convert to px → rem, or to rem → px for the reverse.
- 2
Enter the number in Value. Decimals are accepted.
- 3
Leave Root font size at 16 unless your CSS sets a different font-size on the html element, in which case enter that size in pixels.
- 4
Read Result and Formula, copy the CSS, or look the size up in the Common values table beneath.