📐 PX to REM Converter
Convert px to rem and rem to px at any root font size, or paste a whole stylesheet to convert every value at once. Includes a px-to-rem table.
Browsers default to a 16px root font size. Change it only if your CSS sets a different size on the html element.
Bulk convert CSS
px to rem table (root 16px)
| px | rem | Tailwind spacing |
|---|---|---|
| 1px | 0.0625rem | — |
| 2px | 0.125rem | 0.5 |
| 4px | 0.25rem | 1 |
| 6px | 0.375rem | 1.5 |
| 8px | 0.5rem | 2 |
| 10px | 0.625rem | 2.5 |
| 12px | 0.75rem | 3 |
| 13px | 0.8125rem | — |
| 14px | 0.875rem | 3.5 |
| 15px | 0.9375rem | — |
| 16px | 1rem | 4 |
| 18px | 1.125rem | — |
| 20px | 1.25rem | 5 |
| 22px | 1.375rem | — |
| 24px | 1.5rem | 6 |
| 28px | 1.75rem | 7 |
| 30px | 1.875rem | — |
| 32px | 2rem | 8 |
| 36px | 2.25rem | 9 |
| 40px | 2.5rem | 10 |
| 48px | 3rem | 12 |
| 56px | 3.5rem | 14 |
| 60px | 3.75rem | — |
| 64px | 4rem | 16 |
| 72px | 4.5rem | — |
| 80px | 5rem | 20 |
| 96px | 6rem | 24 |
| 128px | 8rem | 32 |
Tailwind’s default spacing unit is 0.25rem, so at a 16px root, p-4 = 1rem = 16px.
What PX to REM Converter Does
This px to rem converter changes pixel values into rem units and back. Type a value in either box and the other updates as you type, at the browser’s default root size of 16px or any root font size your site uses. A reference table lists common sizes from 1px to 128px, with the matching Tailwind spacing step where there is one.
For existing projects, paste a stylesheet into the bulk converter and every px value becomes rem — or every rem becomes px — in one pass. One-pixel borders are kept as px by default, @media conditions are left alone because they do not follow the root font size, and you choose the number of decimal places. Nothing is uploaded; the conversion happens in your browser.
How to Use PX to REM Converter
- Enter your root font size — 16px is the browser default
- Type a px value to get rem, or a rem value to get px
- Paste a stylesheet into the bulk converter to convert every value
- Choose which small values to keep as px and how many decimals to use
- Copy the converted CSS
Formula Used by PX to REM Converter
Converting between px and rem
rem = px ÷ root font size · px = rem × root font size
Worked example
18px at a 16px root, and at a 10px root (html { font-size: 62.5% }).
- 18 ÷ 16 = 1.125rem
- 18 ÷ 10 = 1.8rem
Result: The same design size needs a different rem value when the root size changes.
Why em compounds
em = px ÷ the element’s own font size (for font-size, the parent’s)
Worked example
A 16px page with a list inside a list, both set to font-size: 1.5em.
- Outer list: 1.5 × 16 = 24px
- Inner list: 1.5 × 24 = 36px
- With 1.5rem, both would be 24px
Result: rem stays predictable when elements are nested.
rem at Different Root Sizes
| px | 16px root | 10px root | 18px root |
|---|---|---|---|
| 12px | 0.75rem | 1.2rem | 0.6667rem |
| 14px | 0.875rem | 1.4rem | 0.7778rem |
| 16px | 1rem | 1.6rem | 0.8889rem |
| 18px | 1.125rem | 1.8rem | 1rem |
| 20px | 1.25rem | 2rem | 1.1111rem |
| 24px | 1.5rem | 2.4rem | 1.3333rem |
| 32px | 2rem | 3.2rem | 1.7778rem |
| 48px | 3rem | 4.8rem | 2.6667rem |
CSS Length Units Compared
| Unit | Relative to | Good for |
|---|---|---|
| px | A fixed CSS pixel | Borders and fine details |
| rem | The root (html) font size | Font sizes, spacing and layout |
| em | The element’s own font size | Padding that scales with a button’s text |
| % | The parent element | Widths in fluid layouts |
| vw / vh | 1% of the viewport width / height | Full-screen sections, fluid type |
| ch | Width of the “0” character | Readable line lengths, such as max-width: 65ch |
How to Read Your Result
rem and accessibility
Many people raise their browser’s default font size instead of zooming. Text sized in rem grows with that setting, while text sized in px does not. Using rem for font sizes, and often for spacing, respects that preference and makes the WCAG requirement that text can be resized to 200% easier to meet.
Converting a legacy stylesheet
Convert in one pass, then review the result: keep hairlines and shadows in px, check values used inside calc(), and test the page at a larger browser font size. Media query conditions are skipped by default; convert breakpoints to em deliberately if you want them to follow the user’s font size.
How many decimals?
Four decimal places is plenty: 0.0001rem is less than a hundredth of a pixel at a 16px root. Browsers snap to device pixels anyway, so 0.8125rem and 0.813rem render identically.
Limitations & Accuracy Notes
- Every number followed by px is converted, including any inside comments or url() paths — review the output before using it.
- Unitless numbers in CSS-in-JS style objects are not detected.
- Only @media conditions are skipped; @container and @supports conditions are converted like ordinary CSS.