REM to PX Converter

This tool converts rem values back into pixels. It is the reverse of a px-to-rem conversion and is invaluable for inspecting rem-based designs: enter a rem value, set your root font size, and instantly see exactly how many pixels it renders to. That makes it easy to verify spacing, check computed sizes, and hand off precise specs.

With the standard 16px root, 1rem = 16px. If your project uses a different html font-size, set the base accordingly for an accurate pixel result.

When You Need PX From REM

Inspect Computed Sizes

Translate a rem value from someone else's stylesheet into pixels to understand what it actually renders at.

Pixel-Perfect Handoff

Give designers and QA exact pixel measurements derived from your rem-based system.

Match Design Assets

Confirm a rem value lines up with fixed-pixel assets like icons, images, or 1px borders.

How to Convert REM to PX

1

Set the Root Font Size

Enter your project's root (html) font-size in the Base Font Size field. The default 16px matches the standard browser baseline.

2

Enter a REM Value

Select the rem unit tab and type the rem value you want to convert. The pixel equivalent updates live.

3

Read the Result

The pixel value appears instantly in the results panel, alongside the em and rem equivalents. Adjust the decimal-places setting for the precision you want.

4

Copy the Result

Click the copy button beside the px result and paste it wherever you need an exact pixel measurement.

The formula: px = rem × root font-size. For example, 1.5rem × 16px = 24px.

How REM and PX Relate

Pixels are absolute and rem is relative, so they answer different questions. Understanding the trade-off helps you decide which to declare in CSS and which to convert for reference.

REM

Relative and scalable

Tied to the root font-size
Scales with user font preferences
Recommended for layout and type
One value, consistent everywhere

PX

Absolute and fixed

One device pixel, no relativity
Ignores user font preferences
Best for borders and hairlines
Exact, predictable measurement

Tip: converting rem to px is purely for inspection and handoff. In production CSS, keeping values in rem preserves accessibility and responsive scaling.

Common REM to PX Conversions

Reference values assuming a 16px root font size. Change the base in the tool to recalculate for any other root setting.

REM	Pixels (16px root)	Typical Use
0.5rem	`8px`	Tight gaps, small padding
0.75rem	`12px`	Captions, fine print
1rem	`16px`	Body copy baseline
1.5rem	`24px`	Section headings, spacing
2rem	`32px`	Page titles, large gaps
3rem	`48px`	Hero spacing, big margins

Frequently Asked Questions

How is rem converted to px?

Multiply the rem value by the root font size: px = rem × root. With a 16px root, 1.5rem becomes 24px. The tool performs this instantly and rounds to your chosen decimal precision.

Why would I convert rem back to px?

Mostly for inspection and communication: checking what a rem-based design computes to, matching fixed-pixel assets, or handing exact measurements to designers and QA. You usually keep the actual CSS in rem for scalability.

What if my project's root font size isn't 16px?

Just change the Base Font Size field to your actual root value. For instance, with a 10px root (a common "62.5%" technique), 1.5rem equals 15px. The tool recalculates immediately.

Does rem-to-px depend on element nesting?

No. Because rem is always relative to the root font-size, nesting has no effect on the conversion. That is what makes rem predictable compared with em, which is relative to each parent.

Is the conversion done in my browser?

Yes. Everything is calculated client-side as you type. No data is sent to a server, so the tool is instant and works offline once the page has loaded.