PX to REM Converter: Convert Pixels to REM Instantly

Type a pixel value to get its rem equivalent, or a rem value to get pixels, based on whatever root font size your project uses. A rem is always measured against the root (html) font size, which is 16px in every major browser unless you or the user change it. Sizing type and spacing in rem means your layout scales when a visitor raises their browser's default text size; fixed px does not.

How the conversion works

The formula is a single division: rem = px ÷ root font size, and the reverse is px = rem × root font size. At the default 16px root, 24px is 24 ÷ 16 = 1.5rem, and 0.875rem is 0.875 × 16 = 14px. Results here are rounded to four decimal places, which is finer than any browser renders.

rem vs em

An em is relative to the font size of the element itself (or its parent, when used for font-size), so nested ems compound: a 1.2em list inside a 1.2em list ends up 1.44 times the base. A rem always points back to the root, so 1.5rem means the same size everywhere on the page. That predictability is why most design systems use rem for type and spacing, and keep em for things that should scale with their local text, such as icon sizes or padding inside a button.

The 62.5% trick

Some stylesheets set html { font-size: 62.5%; } so that 1rem equals 10px and the maths becomes mental arithmetic. It works, but it means every component has to restate its body text size, and any third-party widget that assumes a 16px root will render small. If your project does use it, set the root font size above to 10 and the converter will match. To build a whole set of related sizes rather than converting one at a time, try the type scale calculator, and check your text and background pairings with the colour contrast checker.