px to rem converter

What it does

This px to rem converter turns pixel values into rem, and rem back into pixels, using whatever root font size your site sets. Enter one value for a quick answer, or paste a line of CSS and every px value in it is converted at once. A reference table lists the common sizes from 10px to 96px, so you can scan for the one you need without typing anything. All of the arithmetic happens in your browser.

How to use it

1. Type a value and choose px to rem or rem to px.
2. Check the root font size. Browsers default to 16px; change it only if your stylesheet sets a different size on html.
3. Paste a CSS declaration into the snippet box to convert every value in it at once.
4. Copy the converted snippet, or read the size you need from the table.

How to read the result

The rule is a single division. At the default 16px root, 24px ÷ 16 = 1.5rem. Going the other way, 2.25rem × 16 = 36px.

The snippet font-size: 24px; margin: 16px 32px; padding: 12px 20px; comes back as font-size: 1.5rem; margin: 1rem 2rem; padding: 0.75rem 1.25rem;. Every value is now tied to the root size. If a reader raises their browser's default font size to 20px, the 1.5rem heading grows to 30px and the margins grow with it. Pixel values would have stayed where they were.

Some older sites set html { font-size: 62.5%; } so that 1rem equals 10px and the maths is easier. If yours does, set the root size to 10 here, and 24px becomes 2.4rem. Do not mix the two conventions in one codebase.

The em column in the table only holds when the parent element has the root font size. Em is relative to the parent, so nested ems compound: 1.2em inside 1.2em is 1.44 times the root.

To make sizes scale with the screen as well, use the fluid typography calculator. Our website design and development team builds every site on rem-based tokens.