px ↔ rem
CSS unit conversion
About This Calculator
In CSS, px (pixels) are absolute units; rem (root em) units are relative to the root element's font size (typically 16px by default in browsers). Designing with rem makes layouts scale proportionally when users change their browser's base font size, improving accessibility. Converting between px and rem is a daily task for web developers.
Formula
rem = px / root font size (default: 16px)
px = rem × root font size
1rem = 16px (default browser setting)
em = relative to parent element's font size (not root)
Example Calculation
Convert 24px to rem and 1.5rem to px (base font size 16px)
- rem = 24 / 16 = 1.5rem
- px = 1.5 × 16 = 24px
24px = 1.5rem; 1.5rem = 24px (at 16px base)
px to rem Conversion Table (base 16px)
| px | rem | px | rem |
|---|---|---|---|
| 8px | 0.5rem | 36px | 2.25rem |
| 10px | 0.625rem | 40px | 2.5rem |
| 12px | 0.75rem | 48px | 3rem |
| 14px | 0.875rem | 56px | 3.5rem |
| 16px | 1rem | 64px | 4rem |
| 18px | 1.125rem | 72px | 4.5rem |
| 20px | 1.25rem | 80px | 5rem |
| 24px | 1.5rem | 96px | 6rem |
Frequently Asked Questions
Why use rem instead of px?
rem units scale with the user's browser font size preference. Users who increase their browser's base font size for accessibility will see rem-based layouts scale proportionally, while px layouts stay fixed. WCAG accessibility guidelines recommend relative units for text.
What is the difference between em and rem?
em is relative to the parent element's font size — it compounds through nested elements (an em inside an em inside an em can produce unexpected values). rem is always relative to the root (html) element, making it predictable. rem is generally preferred for component-based design.
What base font size should I use?
Browser default is 16px. Most designers don't change this in their CSS, keeping 1rem = 16px. Some teams use `html { font-size: 62.5% }` to make 1rem = 10px for easier mental math (24px = 2.4rem). This is a preference — both approaches are common.
Are there other relative CSS units I should know?
vw (viewport width) and vh (viewport height) are relative to the browser window size — useful for full-screen layouts. ch is relative to the width of the '0' character — useful for setting line widths. clamp() combines min, preferred, and max values for fluid typography.