What is PX・Rem Calculator?

PX・Rem Calculator is a tool for converting pixels and rem values in both directions. You can turn 24px into 1.5rem, or check what 2rem means in pixels based on a chosen base font size.

It is useful when moving values from design files into CSS, or when building layouts that rely on relative units.

How to Use

1. Set the base font size.
2. Enter a value on either the PX side or the Rem side.
3. Review the converted result.
4. Copy the value if needed.
5. Use the conversion tables below for common reference values.

Main Settings

Base Font Size

This is the value used as the conversion baseline. 16px is a common default, but you can adjust it anywhere from 8px to 128px to match your project.

Decimal Precision

You can choose 0, 1, or 2 decimal places. Use 0 for rough checks, 1 for common layout work, and 2 when you want more precise output.

Common Conversion Tables

The tool shows both a PX-based table and a Rem-based table, which makes it easier to check frequently used values without typing them each time.

How the Calculation Works

The formulas are straightforward:

rem = px ÷ base font size
px = rem × base font size

For example, with a base of 16px, 24px becomes 1.5rem, and 2rem becomes 32px.

Use Cases

• Converting px values from a design file into rem
• Checking how a different root font size changes the final values
• Standardizing font sizes and spacing in rem
• Using quick reference tables for common sizing values

Things to Keep in Mind

• rem values usually depend on the root font size of the page
• If the base font size in the tool does not match your project, the result will not match the real UI
• It is best to confirm your project's root font size before using the converted values in code