PX ↔ REM Converter
Convert between pixel (px) and root em (rem) CSS units. Set your root font size and get instant live conversions in both directions.
Common Conversion Table
Based on 16px base font size
| Pixels (px) | REM |
|---|
About This Tool
This px to rem converter makes it easy to switch between absolute and relative CSS units. In CSS, px (pixels) is an absolute unit — 16px is always 16px regardless of user preferences. rem (root em) is a relative unit based on the font size of the root <html> element. Most browsers default the root font size to 16px, making 1rem = 16px by default.
Using rem units for font sizes, padding, margins, and layout values is a best practice for accessible, responsive web design. When a user increases their browser's base font size for readability, rem-based layouts scale correctly with their preference, while px-based layouts stay fixed and may become hard to read.
This converter lets you set a custom base font size — useful if your project uses a non-standard root font size like 10px (a common trick to make rem math easy: 1rem = 10px, so 1.6rem = 16px) or 14px for compact UIs.
The live bidirectional conversion means you can type in either field and instantly see the equivalent value. The reference table at the bottom shows the most common pixel sizes converted to rem at your chosen base size.
Some quick references at the standard 16px base: 16px to rem is 1rem, 24px to rem is 1.5rem, 32px to rem is 2rem, 48px to rem is 3rem, and 14px to rem is 0.875rem. If your project uses a 10px base (a common CSS trick), then 16px to rem becomes 1.6rem and 24px becomes 2.4rem.
How to Use
- Set your Base Font Size — the root font size used in your CSS (default is 16px).
- Enter a value in the Pixels field to see the equivalent REM value.
- Or enter a value in the REM field to see the equivalent pixel value.
- The conversion table below updates automatically when you change the base size.
Why Use REM Instead of PX?
- Respects user browser font size preferences — improves accessibility
- Scales proportionally across the entire design when the root size changes
- Makes responsive typography with
clamp()and media queries much cleaner - Widely recommended by WCAG accessibility guidelines
- Easier to maintain consistent spacing ratios in design systems
Frequently Asked Questions
What is the difference between px and rem in CSS?
px (pixels) is an absolute unit — 16px is always 16px regardless of user settings. rem (root em) is a relative unit based on the root font size of the page. If the root font size is 16px, then 1rem equals 16px. If the user changes their browser font size, rem values scale accordingly while px values stay fixed.
How many rem is 16px?
At the default browser root font size of 16px, 16px equals 1rem. The formula is: rem = px ÷ base font size. So 16 ÷ 16 = 1rem. At a 10px base, 16px would be 1.6rem.
Why should I use rem instead of px?
rem respects user browser font size preferences, which is important for accessibility. Users who increase their browser font size for readability will see rem-based layouts scale correctly, while px-based layouts stay fixed and may become hard to read. WCAG accessibility guidelines recommend relative units.
What is the default root font size in browsers?
Most browsers default to 16px as the root font size. This means 1rem = 16px by default. Some developers set the root font size to 10px in their CSS (html { font-size: 10px; }) to make rem math simpler — at 10px base, 1.6rem = 16px.
How do I convert px to rem in CSS?
Divide the pixel value by your base font size. For example, 24px ÷ 16 = 1.5rem. You can use this tool to convert instantly — type any px value and get the rem equivalent, or set a custom base size if your project uses a non-standard root font size.