PX to REM Converter

Enter one or more values, choose the direction and the root font size, and press Convert. You get a results table, a copy-ready CSS block, a size ruler, and a reference table for common pixel sizes.

Try an example

About this px to rem converter

Using rem and em instead of pixels lets text and spacing grow when a reader raises the font size in their browser. One rem equals the font size of the page root, which is 16 pixels in most browsers, so 24px is 1.5rem. An em is relative to the parent element’s font size, which is why it needs its own base value. This converter handles all four directions, supports a 10px root for the popular 62.5% technique, converts up to 20 values at once, and writes CSS custom properties with the original pixel value as a comment.

How to convert px to rem

  1. Enter your values. Type one or more numbers, with or without the unit, separated by spaces, commas, or line breaks. Press an example to see the format.
  2. Choose the direction. Pick px to rem, rem to px, px to em, or em to px under Convert.
  3. Set the base size. Choose the Root font size for rem, or enter the Parent font size in px when converting em values. Choose how many Decimal places you want.
  4. Press Convert values. Copy the CSS block, or read the results table, the size ruler, and the reference table.

Frequently asked questions

How do I convert px to rem?

Divide the pixel value by the root font size. With the default 16px root, 24px is 24 divided by 16, which is 1.5rem. Going the other way, multiply the rem value by the root size.

What is the 62.5% trick?

Setting the root font size to 62.5% makes it 10px in a default browser, so 1rem equals 10px and 14px is simply 1.4rem. Choose 10px as the Root font size to convert with that rule.

What is the difference between rem and em?

A rem is relative to the root element, so it means the same everywhere. An em is relative to the font size of the parent, so nested elements can compound. Em conversions need the parent size you enter.

Why use rem instead of px for font sizes?

Readers who raise the default font size in their browser settings get larger text only if sizes are relative. A fixed pixel size ignores that setting, which the accessibility preview shows.

What does Automatic precision do?

It shows as many decimals as needed, up to five, and removes trailing zeros, so 16px at a 16px root is 1rem. The fixed options always show exactly that many decimals, such as 1.000.