PX to REM Converter

REM (root em) is always relative to the root element (html) font size — consistent and predictable throughout the page. EM is relative to the parent element, which means it compounds: if a parent is 1.2em and the child is also 1.2em, the child ends up at 1.44× the root size. Use REM for font sizes and consistent spacing; use EM when you intentionally want scaling relative to a component's own font size (like padding on a button).

REM respects the user's browser font size preference. If a user sets their browser default to 20px for accessibility, 1rem becomes 20px and your layout scales proportionally. PX values are fixed and ignore this preference. Using REM makes your site more accessible and easier to scale with a single root font-size change.

PT (points) is a print unit: 1pt = 1/72 inch. For web, 12pt = 16px at standard screen resolution. PT is occasionally used for print stylesheets (@media print) but rarely in regular web CSS. Stick to PX, REM, or EM for screen layouts.

Enter multiple PX values one per line in the Bulk Converter field and click Convert. You get REM, EM, and PT equivalents for each value in a single table. Useful when migrating a design system or converting an existing stylesheet from PX to REM all at once.

The CSS Variables section generates ready-to-paste CSS custom property declarations from your bulk conversion results. For example: --font-sm: 0.875rem; --font-base: 1rem; --font-lg: 1.25rem. You can paste these directly into your :root {} block.

Use whatever font size you have set on the html element in your CSS. If you haven't set anything, it defaults to the browser default (16px). Some developers set html { font-size: 62.5% } to make 1rem = 10px for easier mental math (e.g., 24px = 2.4rem). Change the base size input to match your project's actual root font size.

No. All conversions are calculated locally in your browser with JavaScript. Nothing is transmitted or stored. You can use it offline after the page loads.