Pixel to Rem/Em Converter

The switch from px to rem is one of the most impactful accessibility improvements you can make to a codebase. It takes maybe an hour to understand the mental model, and after that you think in rem automatically. But getting there requires a reliable conversion reference, because you'll constantly be working backwards from design specs (which usually use px) to code (which should use rem).

The Core Relationship

In most browsers, the default root font size is 16px. This means:

rem value = px value / root font size

1 rem = 16px (at browser default)

So 24px = 1.5rem, 32px = 2rem, 14px = 0.875rem.

The key insight: if a user has changed their browser's default font size to 20px (for accessibility), then 1rem = 20px in their browser. Your rem-based UI scales up with their preference. If you used px, it stays at 16px regardless.

Quick Conversion Table (Base 16px)

px	rem	Common Use
10	0.625rem	—
12	0.75rem	Small/caption text
14	0.875rem	Supporting text, labels
16	1rem	Body text (base)
18	1.125rem	Slightly larger body
20	1.25rem	Lead paragraph, h4
24	1.5rem	h3, card heading
28	1.75rem	h2 area
32	2rem	h1 on mobile
36	2.25rem	h1
48	3rem	Display heading
64	4rem	Hero heading

The CalcHub Pixel to Rem Calculator handles any base font size (not just 16px) and converts both ways — enter a px value and get rem, or enter rem and get px at your chosen base.

Rem vs Em: When to Use Which

Both are relative units, but relative to different things:

rem (root em) — relative to the html element's font size. Consistent regardless of nesting level. Use for: font sizes, padding, margin, border-radius, max-widths. em — relative to the parent element's font size. Can cascade and compound through nested elements. Use for: spacing that should scale with the element's own font size (like padding on a button that changes between sizes).

Practical guideline: use rem for font sizes and layout-level spacing; use em for component-internal spacing (button padding that should scale if you change the button's font size).

/ Button component: em scales with font-size /
.button {
  font-size: 1rem;        / rem: relative to root /
  padding: 0.5em 1em;    / em: scales if you change font-size /
  border-radius: 0.25em; / em: scales with the button's font size /
}

.button.large {
  font-size: 1.25rem;     / Change this: padding/radius scale automatically /
}

The 62.5% Trick (and Why It's Debated)

A common trick: set html { font-size: 62.5%; } which makes 1rem = 10px (easier mental math). Then 24px = 2.4rem instead of 1.5rem.

The downside: it overrides the user's browser font size preference. If a user has 20px set, 62.5% of 20px = 12.5px, not 10px. Your math is cleaner but accessibility behavior is slightly compromised.

A better approach: keep the browser default, memorize a few anchor values (16 = 1rem, 24 = 1.5rem, 32 = 2rem), and use the CalcHub calculator for everything else.

Tips

• Don't mix px and rem for spacing in the same component. Pick one system and stay consistent. Mixed units cause subtle bugs when font size changes.
• Media queries should use em, not rem. Browsers have a known inconsistency: rem in media queries doesn't respond to root font size changes in some scenarios. Always write breakpoints as em (e.g., @media (min-width: 48em) instead of min-width: 768px).
• Figma designs are in px. When you get a design spec in px, divide by 16 for rem values. Most teams build a px→rem lookup table into their Figma documentation.

Is px ever acceptable in modern CSS?

Yes. Use px for: borders (border: 1px solid), minimum sizes (min-height: 2px), box shadows, and situations where you explicitly don't want the value to scale. The "no px" rule is specifically about font sizes and major spacing, not every single CSS value.

What if my design system uses a different base size?

Common alternatives are 10px (for easy mental math at the cost of accessibility) or 18px (for larger default text). Enter your actual base in the CalcHub calculator and it generates a custom conversion table.

How do I audit an existing codebase for px font sizes?

Search for font-size:.px in your CSS files. Most IDEs support regex search: font-size:\s\d+px. This finds all hard-coded px font sizes. Common exceptions (very small decorative sizes, border-related) can stay as px; body text, headings, and labels should be converted.

Related Calculators

• Font Size Calculator — fluid responsive font sizes in rem
• Typography Scale Calculator — build your full type scale
• Spacing Calculator — spacing system in rem alongside typography