**How to Use the PX to REM Converter**
Converting pixels to rem units is one of the most common tasks in modern CSS development. Whether you're building a responsive layout, ensuring accessibility compliance, or following a design system, rem is the unit of choice for scalable, maintainable stylesheets. This tool makes the conversion instant — no mental math, no spreadsheets.
**Step-by-Step**
1. Enter any pixel value in the input field (e.g., 24, 32, 48, or any number from your design spec)
2. The rem equivalent appears immediately — no button press required
3. Copy the result and paste it directly into your CSS
4. Optionally, change the base font size if your project uses a root font size other than 16px
The formula is simple: rem = px divided by root font size. With the standard 16px root, 24px becomes 1.5rem, 32px becomes 2rem, and 16px becomes 1rem.
**Understanding PX vs REM vs EM**
| Unit | Relative to | Scales with user preferences | Compoundable |
|------|-------------|-------------------------------|--------------|
| px | Screen pixel (fixed) | No | No |
| em | Parent element font size | Indirectly | Yes — compounds with nesting |
| rem | Root element (html) font size | Yes | No — always anchors to root |
**px** are absolute. 16px is always 16px, regardless of what the user has set in their browser. This breaks accessibility: users who set their browser default font size to 20px get no benefit when your CSS is entirely in px.
**em** is relative to the parent element. This causes compounding — if a parent has font-size: 1.2em and a child also has font-size: 1.2em, the child ends up at 1.44x the root size. Useful for component-relative spacing but dangerous for font sizes.
**rem** (root em) is always relative to the html element font size. No compounding. Predictable across the entire page. Crucially: if the user has set their browser default to 20px instead of 16px, your rem values scale proportionally — a 1.5rem heading becomes 30px instead of 24px, exactly as the user needs.
**When to Use REM**
Use rem for:
- **Font sizes** — Always. This is the primary use case for rem and the reason it was invented.
- **Spacing (padding, margin)** — Rem for spacing means layouts scale with user font preferences.
- **Media query breakpoints** — @media (min-width: 48rem) will trigger at the right point even when users have larger default fonts.
- **Max-width containers** — max-width: 75rem (1200px equivalent) gives a scalable container.
Use px for:
- **Borders** — 1px borders should stay 1px. Scaling them to rem creates visually inconsistent borders.
- **Box shadows** — Shadow blur and spread values are aesthetic and should stay fixed.
**Typography Scale Conversions (16px base)**
- 12px = 0.75rem (caption text)
- 14px = 0.875rem (secondary body)
- 16px = 1rem (base body)
- 18px = 1.125rem (slightly enlarged body)
- 20px = 1.25rem (large body / small heading)
- 24px = 1.5rem (h3 heading)
- 32px = 2rem (h2 heading)
- 40px = 2.5rem (h1 heading)
- 48px = 3rem (display heading)
- 64px = 4rem (hero display)
**Spacing Scale (8-point grid)**
- 4px = 0.25rem (xs — icon gap)
- 8px = 0.5rem (sm — button padding)
- 16px = 1rem (md — standard section padding)
- 24px = 1.5rem (lg — card gap)
- 32px = 2rem (xl — section separator)
- 48px = 3rem (2xl — major section gap)
- 64px = 4rem (3xl — page-level spacing)
**Converting a Complete Design Spec**
You receive a Figma design with: H1 = 48px, H2 = 36px, body = 16px, small = 14px, button padding = 12px 24px, card padding = 24px, section gap = 64px.
Converting to rem (divide each by 16):
h1 { font-size: 3rem; } /* 48px */
h2 { font-size: 2.25rem; } /* 36px */
body { font-size: 1rem; } /* 16px */
small { font-size: 0.875rem; } /* 14px */
.btn { padding: 0.75rem 1.5rem; } /* 12px 24px */
.card { padding: 1.5rem; } /* 24px */
.section { gap: 4rem; } /* 64px */
Now your entire design scales proportionally when a user changes their browser default font size.
**5 Common Mistakes When Using REM**
**Mistake 1: Not setting a root font-size explicitly**
If you don't set html { font-size } in your CSS, rem inherits the browser default (16px). The mistake is using the 62.5% trick without documenting it — a new developer converts 24px to 1.5rem (dividing by 16), but the project uses a 10px base, making it 15px on screen. A 37.5% sizing error invisible until QA.
**Mistake 2: Using px for font sizes entirely**
Setting all font sizes in px blocks users with visual impairments who have set a larger browser default. WCAG 1.4.4 (Resize Text) requires text to be resizable up to 200% without loss of content. Px-only CSS can fail this criterion.
**Mistake 3: Mixing rem and em for font sizes**
Using font-size: 1.2rem on a parent and font-size: 0.9em on a child creates compounding confusion. The em compounds against the rem, making it hard to predict final sizes.
**Mistake 4: Using rem for borders and box shadows**
Converting border: 1px solid to border: 0.0625rem solid is technically correct but unnecessary. At larger font sizes (20px user default), a 0.0625rem border becomes 1.25px and may render as a blurry half-pixel.
**Mistake 5: Forgetting rem in media queries**
Using @media (min-width: 768px) instead of @media (min-width: 48rem) means your breakpoint won't scale with user font sizes.
**Pro Tips for REM in Production**
**Tip 1: The 62.5% base trick**
Set html { font-size: 62.5%; } to make 1rem = 10px. Then body { font-size: 1.6rem; } resets to 16px. Conversions become easier: 48px = 4.8rem. Requires resetting body font-size and clear team documentation.
**Tip 2: Tailwind CSS rem configuration**
Tailwind uses rem by default with a 16px base. All spacing utilities (p-4 = 1rem, mt-8 = 2rem) are already rem-based. If you customize Tailwind's fontSize or spacing scale, use rem values to stay consistent.
**Tip 3: Use rem in CSS clamp() for fluid typography**
Example: h1 { font-size: clamp(2rem, 5vw, 4rem); } — min 32px, preferred 5vw, max 64px. The min and max in rem scale with user preferences.
**Tip 4: Document your base assumption**
Add a comment in your root CSS: /* 1rem = 16px (browser default) */ or /* 1rem = 10px (62.5% base applied) */. This prevents teammate confusion.
**Accessibility: Why REM Matters**
Approximately 1 in 4 adults in the US has some form of disability, and vision impairments affect tens of millions of people. Many users set their browser's default font size larger than 16px through browser settings or OS accessibility features.
When you use px throughout your CSS, these preferences are overridden. When you use rem, your font-size: 1rem becomes 20px for that user — exactly what they asked for. The Web Content Accessibility Guidelines (WCAG) 2.1 Success Criterion 1.4.4 requires text to be resizable to 200% without loss of content or functionality. Using rem throughout your CSS is the simplest way to meet this criterion.