REM to PX

REM to PX Converter

Find out how many pixels a rem value actually measures. Enter a value such as 1.5, keep the default 16px root or type your own, and the pixel result appears right away. It is handy when you inspect a stylesheet, audit a design system, or compare CSS against a pixel-based mockup.

Formula

px = rem × root font size

The root font size is the computed font-size of the html element.

Worked example: reading a framework's spacing scale

Many CSS frameworks define spacing in quarter-rem steps. A class that sets padding: 1.5rem means 1.5 × 16 = 24px by default. A gap of 0.625rem is 10px. If your project sets the root to 18px for better readability, those same classes become 27px and 11.25px – enter 18 as the base to check them.

Why rem values are not always 16px

The 16px figure is only a default. Three things can change it:

1. Your own CSS, such as html { font-size: 62.5%; } (10px) or html { font-size: 112.5%; } (18px).
2. The user's browser setting for default text size.
3. Fluid typography like html { font-size: clamp(16px, 1vw + 12px, 20px); }, which changes the root with the viewport.

In the third case, convert at each end of the range to see the smallest and largest pixel size.

Quick checks

Use the bulk box to paste a list of rem values from a design token file and get all pixel sizes at once. To convert the other way, open PX to REM; for print sizes, try REM to Point.