PX to REM Converter
To convert px to rem, divide the pixel value by the root font size: rem = px / root. At the browser default root of 16px, 24px / 16 = 1.5rem. Change the base below - 14px for Ant Design, 10px for the 62.5% trick - and the rem and em values follow it; the point value tracks the pixels instead, because 1px is always 0.75pt.
Convert px, rem, em and pt, then review CSS dimension replacements.
Positive root required; numeric magnitude ≤1 billion; results rounded to six decimals. Preview is clamped to 8–72px. CSS input ≤100,000 characters. Only unquoted px tokens in declaration values are converted; comments, strings, URLs and content declarations stay unchanged. Review output before use; this is a bounded lexical converter, not a CSS validator. Exponent-form CSS numbers (for example 1e+3px or 1e-3px) remain unchanged as whole tokens.
Conversion runs in this page without sending your entered numbers or CSS to a conversion service.
The em field assumes the element inherits the base font size above. In CSS, em resolves against the element's own font-size, and against the parent's font-size when you set font-size itself.
Bulk convert: paste CSS or a list of px values
Every px value is rewritten in rem against the base font size above.
Copied
Copy failed. Select the result and copy it manually.
How do I convert px to rem?
The formula is rem = px / root font size, and the reverse is px = rem x root font size. Only the font-size of the root html element counts, no matter how deeply the element is nested, which is what makes rem arithmetic predictable. At the 16px default: 10px = 0.625rem, 12px = 0.75rem, 14px = 0.875rem, 18px = 1.125rem, 20px = 1.25rem and 40px = 2.5rem.
Do not round the result. 15px is exactly 0.9375rem at a 16px root; rounding it to 0.94rem shifts the rendered size to 15.04px and breaks alignment across a grid. Browsers handle sub-pixel lengths and snap them to the device pixel grid when painting, so copy the exact value the converter gives you. The converter prints up to six decimals: exact for roots that divide evenly, such as 16px and 10px, and accurate to a millionth of a rem for one that does not, such as 14px.
px to rem chart at 16px, 14px and 10px root sizes
The same pixel value becomes three different rem values depending on the root your project sets, so this chart lists all three, plus the point equivalent (CSS defines 1px as 1/96 inch and 1pt as 1/72 inch, so 1px = 0.75pt). The 16px and 10px columns are exact. At a 14px root most values do not divide evenly, so they are rounded to four decimals and marked with the approximation sign; the converter above prints more digits.
| Pixels | rem (16 px root) | rem (14 px root) | rem (10 px root) | Points |
|---|---|---|---|---|
| 1px | 0.0625rem | ≈0.0714rem | 0.1rem | 0.75pt |
| 2px | 0.125rem | ≈0.1429rem | 0.2rem | 1.5pt |
| 4px | 0.25rem | ≈0.2857rem | 0.4rem | 3pt |
| 8px | 0.5rem | ≈0.5714rem | 0.8rem | 6pt |
| 10px | 0.625rem | ≈0.7143rem | 1rem | 7.5pt |
| 12px | 0.75rem | ≈0.8571rem | 1.2rem | 9pt |
| 14px | 0.875rem | 1rem | 1.4rem | 10.5pt |
| 16px | 1rem | ≈1.1429rem | 1.6rem | 12pt |
| 18px | 1.125rem | ≈1.2857rem | 1.8rem | 13.5pt |
| 20px | 1.25rem | ≈1.4286rem | 2rem | 15pt |
| 24px | 1.5rem | ≈1.7143rem | 2.4rem | 18pt |
| 28px | 1.75rem | 2rem | 2.8rem | 21pt |
| 32px | 2rem | ≈2.2857rem | 3.2rem | 24pt |
| 36px | 2.25rem | ≈2.5714rem | 3.6rem | 27pt |
| 40px | 2.5rem | ≈2.8571rem | 4rem | 30pt |
| 48px | 3rem | ≈3.4286rem | 4.8rem | 36pt |
| 64px | 4rem | ≈4.5714rem | 6.4rem | 48pt |
| 80px | 5rem | ≈5.7143rem | 8rem | 60pt |
| 96px | 6rem | ≈6.8571rem | 9.6rem | 72pt |
px vs rem vs em: which unit should I use?
The practical split: rem for anything that should follow the reader's text size, em for values that must track the element's own font-size, and px only where a length must stay physically fixed. The example column assumes a 16px root and a 16px parent.
| Unit | Relative to | 20px equals | Best for | Follows the reader's text size |
|---|---|---|---|---|
| px | Nothing - absolute (1px = 1/96 inch) | 20px | Hairline borders, focus rings, exact icon sizes | No |
| rem | The root html font-size | 1.25rem | Font sizes, spacing, breakpoints, whole type scales | Yes |
| em | The element's own font-size (the parent's when you set font-size) | 1.25em | Padding that must grow with the label it wraps | Yes |
| % | The parent's value for that property | 125% | Fluid widths and legacy font-size trees | Yes (font-size) |
Should I use px or rem for padding, margins and borders?
Use rem for padding and margins that should breathe when text grows: button padding, card gutters, section spacing, grid gaps. Keep px for hairlines. A 1px border is one crisp device-independent pixel, while the same border written as 0.0625rem can round down to nothing or blur at certain zoom levels, and the same applies to 2px focus rings and separators. That is why the bulk converter above leaves 1px and 2px values untouched by default and rewrites everything else.
Media queries are the other place rem earns its keep. Inside a media query, rem resolves against the browser's initial font-size rather than your html rule, so a 48rem breakpoint is 768px for a reader on defaults and grows for a reader who raised their text size. Breakpoints in px never move.
How do I convert px to rem in Figma, VS Code and Tailwind?
Figma measures in px, but Dev Mode can output rem: open the Inspect settings, choose Set unit scale and enter your root font size (1rem = 16px by default). VS Code extensions such as cssrem convert through autocomplete and expose the root as a setting - cssrem.rootFontSize, 16 by default - so check it matches before you trust the output on a 14px project. For a whole file, paste it into the bulk box above and set the base first. Tailwind's default scale is already rem-based at a 16px root: one spacing unit is 0.25rem (4px), so 16px is 4, 24px is 6 and 40px is 10.
Sources
About PX to REM Converter
Convert px, rem, em and pt, then review CSS dimension replacements.
16px: 24px → 1.5rem = 1.5em = 18pt.
font-size:24px → font-size:1.5rem; border:1px → border:1px (≤2px).
Positive root required; numeric magnitude ≤1 billion; results rounded to six decimals. Preview is clamped to 8–72px. CSS input ≤100,000 characters. Only unquoted px tokens in declaration values are converted; comments, strings, URLs and content declarations stay unchanged. Review output before use; this is a bounded lexical converter, not a CSS validator. Exponent-form CSS numbers (for example 1e+3px or 1e-3px) remain unchanged as whole tokens.
Use Cases
How to use
Set the root size, edit any unit, then optionally paste CSS. Keep ≤2px preserves small dimensions; CSV lists unique converted numeric pairs.
Positive root required; numeric magnitude ≤1 billion; results rounded to six decimals. Preview is clamped to 8–72px. CSS input ≤100,000 characters. Only unquoted px tokens in declaration values are converted; comments, strings, URLs and content declarations stay unchanged. Review output before use; this is a bounded lexical converter, not a CSS validator. Exponent-form CSS numbers (for example 1e+3px or 1e-3px) remain unchanged as whole tokens.
Pro Tips
- Positive root required; numeric magnitude ≤1 billion; results rounded to six decimals. Preview is clamped to 8–72px. CSS input ≤100,000 characters. Only unquoted px tokens in declaration values are converted; comments, strings, URLs and content declarations stay unchanged. Review output before use; this is a bounded lexical converter, not a CSS validator. Exponent-form CSS numbers (for example 1e+3px or 1e-3px) remain unchanged as whole tokens.
- rem = px / root size; em here assumes the same context as the root; pt = px × 0.75 at 96 CSS pixels per inch.
Frequently Asked Questions
This calculator assumes the em context equals the root. In CSS, em depends on the relevant font size and can differ in nested elements.
Quoted strings, comments, URL functions and the content property are preserved. Check the output in your stylesheet; malformed or complex CSS is not validated.