The PX to REM Formula
REM conversion is simple division. The key is knowing your root font-size—browsers default to 16px unless you override it.
Conversion Formulas
PX to REM: rem = px ÷ root-font-size
REM to PX: px = rem × root-font-size
Default root-font-size: 16px
Worked Example: Converting a Design Spec
Your designer gives you a mockup with these pixel values:
- Heading: 32px → 32 ÷ 16 = 2rem
- Body text: 16px → 16 ÷ 16 = 1rem
- Small text: 14px → 14 ÷ 16 = 0.875rem
- Container padding: 24px → 24 ÷ 16 = 1.5rem
The 62.5% Trick
Dividing by 16 is awkward for mental math. Many developers use this trick:
html {
font-size: 62.5%; /* 62.5% of 16px = 10px */
}
body {
font-size: 1.6rem; /* Reset to 16px equivalent */
}
h1 {
font-size: 2.4rem; /* = 24px */
margin-bottom: 1.6rem; /* = 16px */
}
Now 1rem = 10px, making conversions trivial: 14px = 1.4rem, 20px = 2rem, 36px = 3.6rem.
When to Use REM vs PX
| Use REM For | Use PX For |
|---|---|
| Font sizes | Borders (1px solid) |
| Padding and margins | Box shadows |
| Container widths | Outline widths |
| Media query breakpoints | Fine decorative details |
Accessibility: Why REM Matters
When users increase their browser's default font size (for readability), REM-based layouts scale with them. Pixel-based layouts ignore this preference entirely.
Test it: In Chrome, go to Settings → Appearance → Font size. Change from "Medium" to "Large." Sites using REM will grow proportionally. Sites using only PX won't change.
Common Conversions Reference
| Pixels | REM (16px base) | Common Use |
|---|---|---|
| 10px | 0.625rem | Fine print, labels |
| 12px | 0.75rem | Captions |
| 14px | 0.875rem | Secondary text |
| 16px | 1rem | Body text (default) |
| 18px | 1.125rem | Large body text |
| 24px | 1.5rem | H3 headings |
| 32px | 2rem | H2 headings |
| 48px | 3rem | H1 headings |
Frequently Asked Questions
What is REM in CSS?
REM stands for "root em." It's a CSS unit relative to the html element's font-size. Browsers default to 16px, so 1rem = 16px. Unlike em, rem doesn't compound in nested elements—2rem always equals 32px (at default settings), regardless of parent element sizes.
How do I convert PX to REM?
Divide the pixel value by your root font-size. With the default 16px: 24px ÷ 16 = 1.5rem. For easier math, set html { font-size: 62.5% } to make 1rem = 10px, then 24px = 2.4rem. The tool above handles the calculation automatically.
Why use REM instead of PX?
Accessibility. When users increase their browser's default font size for readability, REM-based layouts scale proportionally. A user who sets 20px as default will see your 1rem text at 20px instead of stuck at 16px. WCAG guidelines recommend relative units.
What's the difference between REM and EM?
REM is always relative to the root (html) element—predictable and consistent. EM is relative to the parent element and compounds: 1.2em inside 1.2em becomes 1.44× the root. Use REM for consistent sizing, EM when you intentionally want elements to scale with their parent.
Should I use REM for borders and shadows?
Generally, no. Borders, box-shadows, and fine decorative details usually look best at fixed pixel sizes. A 1px border should stay 1px. Use REM for text, spacing, and element sizes that should scale with user preferences.
What is the 62.5% font-size trick?
Setting html { font-size: 62.5% } changes the root from 16px to 10px (62.5% of 16 = 10). This makes conversion trivial: 14px = 1.4rem, 24px = 2.4rem. You must then set body { font-size: 1.6rem } to restore readable body text. It's a trade-off between easier math and slightly more setup.