Rem to Px Converter

When to convert rem to px

The most common case: you are reviewing a design system or component in rem and need the physical pixel equivalent to validate against a Figma mockup. Designers and developers often work in different units, and translating between them is part of the daily workflow.

The formula

px = rem * base

With the default base of 16: 1rem = 16px, 1.5rem = 24px, 2rem = 32px. If your project redefines the root font-size, adjust the base.

How to verify in the browser

Open DevTools, inspect an element, and look at the Computed panel. Values appear there in real px, regardless of the original CSS unit. This is the source of truth when validating conversions.

When NOT to convert

If you work with a design system in rem, keep it in rem. The px conversion is for mockups or validation, not for writing code. Converting rem to px in production breaks the key property of rem: it scales with user preferences.

Mental table for design

• 0.5rem = 8px: micro-spacing.
• 0.75rem = 12px: caption, helper text.
• 1rem = 16px: body text.
• 1.25rem = 20px: subtitle or lead.
• 1.5rem = 24px: h3.
• 2rem = 32px: h2.
• 3rem = 48px: medium h1.
• 4rem = 64px: hero.

Notes for designers

If you work in Figma with a design system, set up a 4 or 8 px grid and always use multiples. That translates cleanly to rem (4px = 0.25rem, 8px = 0.5rem) and keeps visual consistency. Typography systems with scales of 1.125, 1.25 or golden ratio (1.618) produce balanced hierarchies and translate without odd rounding.

Common mistakes

• Wrong base: if the project uses the 62.5% trick, the base is 10px not 16.
• Converting everything to px: kills the accessibility benefit.
• Assuming 16 universally: verify with DevTools computed values.

Wrap-up

Converting rem to px helps for validating mockups and talking to design. For writing code, keep rem.