CSS Unit Converter (px / rem / em)

About the CSS Unit Converter (px / rem / em)

Converts CSS length units between pixels, rem, em and points based on a chosen root font size (default 16px).

How to use

Enter a value, its unit, the target unit and root font size, then click Convert.

Worked example

24px at 16px root = 1.5rem.

How to use this calculator

1. Enter the value you want to convert.
2. Choose the source unit and the target unit.
3. Set the root font size, and set the current font size if you are converting em.
4. Review the converted value and the formula shown by the tool.

The formula explained

• \(\text{px}\) = Pixels, the CSS unit being converted from or to
• \(\text{rem}\) = Root em, based on the root font size
• \(\text{em}\) = Relative to the current element font size
• \(\text{pt}\) = Points, a print style unit
• \(\text{root font size}\) = The base font size used for rem conversion
• \(\text{current font size}\) = The element font size used for em conversion

Step by step method

1. Identify which unit your starting value uses, such as px, rem, em, or pt.
2. Decide what unit you want the result in.
3. Use the root font size for rem conversions, and the current font size for em conversions.
4. Read the converted value and check the worked example to confirm the calculation path.

Worked example

A designer wants to convert a 24 px heading into rem using a root font size of 16 px.

1. Start with 24 px and the root font size 16 px.
2. Use \(\text{rem} = \frac{\text{px}}{\text{root font size}}\), so \(\frac{24}{16} = 1.5\).
3. The converted value is 1.5 rem.

Tips and common mistakes

• Use the correct base size, because rem depends on the root font size and em depends on the current element size.
• Be careful when converting nested em values, since they can change with context.
• Check whether your project uses a root font size other than 16 px before converting.
• Treat pt as a separate print-style unit, not a direct design system default.

Frequently asked questions