About px ↔ rem Table

Generate a pixel-to-rem scale table for a chosen base size. Part of the DevTools Surf developer suite. Browse more tools in the Web / Frontend collection.

Use Cases

• Converting pixel-based Figma designs to rem-based CSS values
• Building a responsive type scale for a design system
• Creating a quick-reference card for frontend team onboarding
• Verifying rem calculations when debugging responsive layouts

Tips

• Set your base font size to match your CSS root font-size
• Use the table as a reference when converting design mockups
• Print or bookmark the generated table for quick access

Fun Facts

• The rem unit was introduced in CSS3 and stands for 'root em' — it is always relative to the root element's font-size, unlike em which is relative to the parent.
• The default browser font-size is 16px in all major browsers, making 1rem equal to 16px unless overridden — a standard since the mid-1990s.
• The em unit gets its name from typography, where it originally referred to the width of the capital letter 'M' in a given typeface.

FAQ

What base size should I use?

16 by default (browser default). If your root has `font-size: 62.5%` (10px), use 10 — some projects do this for round-number rem math.

Why convert at all?

rem scales with user font-size preferences (accessibility). px doesn't. Building UIs in rem respects users who've increased their browser font size.

When are pixels OK?

Thin borders (1px), often media query breakpoints, and some specific icon sizes. Body text, margins, and padding should be rem.

What about em?

em is relative to the current element. Use sparingly for tight local scaling (a button's padding relative to its font-size). rem for global consistency.