PX to REM

When to use PX to REM

• Converting Figma specs to accessible CSS: Figma reports all measurements in pixels. Convert each type and spacing value to rem before writing your CSS to ensure user font-size preferences are respected.
• Setting up a spacing scale: Convert your design system spacing values (4, 8, 12, 16, 24, 32, 48, 64 px) to rem equivalents and store them as CSS custom properties or design tokens.
• Auditing an existing stylesheet: Paste pixel values found in legacy CSS to check their rem equivalents before deciding which to migrate for accessibility compliance.
• Verifying a non-standard base font size: If your project uses html { font-size: 62.5% }, set the base to 10 and confirm your rem values in the codebase are producing the intended pixel output.

How PX to REM conversion works and why the base matters

The PX to REM converter applies the formula: rem value = pixel value / base font size. The default base is 16 px, which matches the default font size set by all major browsers (Chrome, Firefox, Safari, Edge) unless the user or a stylesheet overrides it. If your project sets html { font-size: 62.5%; } - a common pattern that makes 1rem equal to 10 px - you must change the base to 10 to get accurate results.

The rem unit is relative to the root element's font size, not the parent element's font size (which is what em uses). This distinction matters for accessibility: when a user increases their browser's default font size in system or browser settings, rem-based values scale proportionally while hardcoded px values stay fixed. The WCAG 2.2 Success Criterion 1.4.4 (Resize Text) requires that text can be resized up to 200 percent without loss of content or functionality - using rem for font sizes and line heights is the most reliable way to satisfy this criterion across all browsers.

The tool converts a list of values simultaneously, which speeds up the process of converting an entire design spec from Figma (which outputs in pixels) into a stylesheet that uses rem. Paste your pixel values as a comma-separated list and the tool returns each rem equivalent in a format ready to copy into CSS, Sass, or a design token file.