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.
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