px to rem converter

Type a size in pixels, with or without px, and the rem value appears on the right. 24 gives 1.5rem. A list works too, and 8, 12, 16 comes back as 0.5rem, 0.75rem, 1rem with the commas where you left them.

Paste a whole rule or stylesheet and every px value in it is rewritten. Numbers without a unit stay put, so a line-height of 1.5 or a z-index of 10 doesn't change, and 0px becomes plain 0. Anything inside comments, quoted strings or url() is left alone, along with @media and @container conditions.

Set Leave values under to 2 to keep 1px borders and hairlines in pixels. Press swap, or open the rem to px converter, to go the other way. Nothing you paste leaves your device.

Divide by the root font size. The root is the <html> element, and unless your CSS sets its font-size, browsers start it at 16px. So 24px ÷ 16 = 1.5rem, and 14px ÷ 16 = 0.875rem.

If your stylesheet sets a different root, put that in the Root font size box and the converter and the table above both follow it. At a 10px root, 24px is 2.4rem.

A px is a fixed CSS length, defined as 1/96 of an inch. On a high-density screen one CSS pixel covers several device pixels, but it's still the same size to your eye.

rem means root em. One rem is the font size of the <html> element, the same everywhere on the page.

em is the font size of the element you're styling. Inside a font-size declaration it's the parent's size, so ems compound. A list at 0.8em inside another list at 0.8em ends up at 0.64 of the outer text. rem never does that, so it's the easier unit for sizes you want to stay put. em is handy when something should scale with its own text, like the padding on a button.

Browsers have two ways to make text bigger. Zoom enlarges everything, pixels included. The font size setting changes the default text size, and the default is what 1rem is measured against. Text set in rem grows when a reader picks a larger default; text set in px ignores it.

WCAG 2.2 success criterion 1.4.4, Resize Text, asks that text can be resized to 200% without losing content or function. That's level AA. Zoom alone can meet it, but rem-based sizes honour the reader's chosen default as well, and some people with low vision rely on that setting.

Some stylesheets set html { font-size: 62.5%; }. 62.5% of 16px is 10px, so 1rem becomes 10px and the sums get easier, with 24px becoming 2.4rem. Written as a percentage it still follows the reader's default. A reader who picks 20px gets a 12.5px root and everything scales with it.

The cost shows up elsewhere. Body text then needs font-size: 1.6rem to get back to 16px. Anything written for a 16px root shrinks to 62.5%, including third-party widgets and Tailwind, whose p-4 turns from 16px into 10px. Never set the root in px, like font-size: 10px, because that replaces the reader's choice outright.