CSS px to rem Converter

What this tool does

This px to rem converter divides or multiplies by a root font size you type. px to rem is rem = px / root. rem to px is px = rem × root. The root is a number of pixels. The field starts at 16, which is the usual browser default, but the arithmetic uses whatever finite number is in the field when you convert.

The result is a number and one CSS declaration, either font-size: 2rem or font-size: 32px. That declaration is text. It is not applied to this page, it is not written to a file, and it does not change document.documentElement. The page does not read computed styles, so a browser minimum font size, page zoom, or a user stylesheet is outside the result.

Numbers are shown to at most four decimal places, and trailing zeros are removed. An exact value stays exact: 32 px with root 16 is 2rem, and 24 px with root 16 is 1.5rem. Zero is allowed and becomes 0. Negative lengths are rejected. The value cannot be over 1,000,000. The root must be greater than 0 and at most 512.

There is no parent element, so em is not offered. Percent, vw, vh, ch, and ex are not offered either. A stylesheet is not an input. If the value contains a unit such as px or em, it is not a plain number and Convert reports an error instead of stripping the unit.

How to use

1. Type the value as a plain number.
2. Choose px to rem or rem to px. Set the root in pixels. Leave 16 if that is the root you mean.
3. Choose Convert, or press Enter in a field. Copy writes the number and the declaration. Clear empties the value and the root.

After Clear, the root is empty. The next Convert will not silently use 16. Type the root again. An error clears the previous number and declaration.

Example

Value 32, direction px to rem, root 16 produces 2 and font-size: 2rem. Value 24 with the same root produces 1.5 and font-size: 1.5rem. Value 1, direction rem to px, root 16 produces 16 and font-size: 16px.

Root 20 turns 40 px into 2rem. Root 10 turns 15 px into 1.5rem. Value 0 produces font-size: 0rem or font-size: 0px, depending on the direction. Root 0, a negative value, a blank field, and a number over the stated caps are errors. The previous declaration does not stay on screen.

Limits

• px and rem only, from the root you type. Not em, percent, viewport units, or a stylesheet.
• Value from 0 to 1,000,000. Root greater than 0 and at most 512.
• Four decimal places at most. The declaration is text and is not applied.

This is not a physical length conversion. Metres, inches, and the other length tools answer a different question. The number here is a CSS font calculation, and only for the root sitting in the field.

Nothing is sent or stored. If the browser would round a used value because of zoom or a minimum font size, this page does not try to reproduce that used value. It shows the division or the product of the two numbers you entered.