PX to REM Converter

Divide the pixel value by the root font size. With the browser default root of 16px, 24px ÷ 16 = 1.5rem and 14px ÷ 16 = 0.875rem. To go back, multiply: 2rem × 16 = 32px. If your stylesheet changes the root font size, enter that value above and every result updates.

Every major browser ships with a default font size of 16px, and 1rem equals the font size of the root html element. Users can change that default in their browser settings, which is exactly why rem is useful: sizes set in rem scale with the user's choice, while sizes set in px do not.

rem is relative to the root html element, so 1.5rem is the same size everywhere on the page. em is relative to the font size of the element's parent, so nested ems compound: 1.2em inside 1.2em is 1.44 times the root. rem is predictable for type scales and spacing; em suits values that should grow with their component, such as padding on a button.

Many people with low vision raise their browser's default font size. Text sized in rem respects that setting; text sized in px ignores it and stays small. Using rem for type, and often for spacing, is a straightforward way to support WCAG success criterion 1.4.4, Resize Text.

Setting html { font-size: 62.5% } makes the root 10px in a default browser, so 1.6rem is 16px and the mental maths becomes easy. It still respects user font preferences because it is a percentage. The trade-off is that every component must set its own font size, since anything unstyled inherits 10px text. Set the root font size above to 10 to calculate with it.

CSS defines 1 inch as 96px and as 72pt, so 1px equals 0.75pt and 16px equals 12pt. That fixed relationship is why a 12pt font in a design tool corresponds to 16px on the web. Physical print size still depends on the device and its resolution.