PX to REM Converter

Overview

Converts pixels to rem and rem to pixels for any root font size, shows a quick reference table of common sizes, and rewrites every px value in a pasted CSS snippet to rem. Zero values, url() paths and optional 1px hairlines are left alone, so the converted CSS is ready to paste back.

How It Works

Set the root font size; it defaults to 16px, the default in every major browser. Type a value into Pixels or REM / EM and the other field updates. Changing the root size recalculates the rem value for the pixels you entered. Click any button in the reference table to load that size. Below, paste CSS into the left box and the right box shows the same CSS with px values converted to rem, ready to copy. The checkbox controls whether 1px borders stay in pixels.

Step-by-Step Usage Guide

1. Set the root font size to match your stylesheet, usually 16.
2. Type a pixel value to get rem, or a rem value to get pixels.
3. Paste a CSS block to convert all of its px values at once.
4. Copy the converted CSS and paste it back into your project.

Technical Specifications & Standards

A rem is a multiple of the root element's font size, so 1.5rem is 24px when the root is 16px. The point of using rem rather than px is accessibility: when someone raises the default font size in their browser settings, rem-based text and spacing grow with it, while px values ignore the preference. Browser zoom scales both units, but the font-size setting only scales rem and em, which is why accessibility guidance recommends relative units for text. The conversion is a single division, px divided by the root size, and results are rounded to four decimal places with trailing zeros removed, so 10px becomes 0.625rem rather than a long float. The root size must match your stylesheet. If your CSS sets html { font-size: 62.5% } so that 1rem equals 10px, enter 10 here, or every result will be off by the same factor. The snippet converter uses a regular expression that skips anything inside url(...), so a file name such as icon-24px.png is never rewritten, and it turns 0px into 0 because zero needs no unit. One-pixel borders are kept as px by default because a hairline that becomes 0.0625rem can render blurry or disappear at some zoom levels; untick the option to convert them too. em values use the same arithmetic but are relative to the parent element's font size, so use this tool's results for em only when the parent is the root size.

Targeted Use Cases

• Translating pixel sizes from a Figma or Sketch design into rem for a stylesheet.
• Migrating an older px-based stylesheet to rem so text respects user font settings.
• Checking what a design token such as 0.875rem means in pixels.
• Setting spacing scales in Tailwind or CSS variables with consistent rem values.

Notes & Gotchas

• Use rem for font sizes and most spacing so layouts follow the user's font-size preference.
• Keep 1px borders and box-shadow offsets in px so thin lines stay crisp.
• Enter the root size your CSS actually uses; a 62.5% root means 10, not 16.
• Prefer rem over em for component sizes, because em compounds when components are nested.

Frequently Asked Questions