PX to REM Converter

This tool converts pixel (px) values into rem units for CSS. The rem unit is always relative to the root element's font-size (the html element), which makes it the go-to unit for responsive, accessible designs. Set your root font size, type a pixel value, and the rem equivalent appears instantly — ready to paste into your stylesheet.

Most browsers default the root to 16px, so 16px = 1rem. If your project changes the html font-size, update the base in the settings to match.

Why Developers Choose REM

Responsive Scaling

Change one root font-size in a media query and the entire layout scales proportionally — no per-element edits.

Accessibility

rem respects the user's browser font-size preference, so text and spacing grow for readers who need larger type.

Predictable Sizing

Because rem never compounds with nesting, a value means the same thing anywhere on the page.

How to Convert PX to REM

1

Set the Root Font Size

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

2

Enter a Pixel Value

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

3

Read the Result

The rem value appears instantly in the results panel, next to the em and px equivalents. Use the decimal-places setting to control rounding precision.

4

Copy Into Your CSS

Click the copy button beside the rem result and paste it directly into your stylesheet.

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

REM vs PX vs EM

Choosing the right unit comes down to whether you want a fixed size or one that responds to context. Here is how the three units compare.

Unit	Relative To	Scales With User Settings	Best For
px	Nothing (absolute)	No	Borders, shadows, hairlines
rem	Root font-size	Yes	Typography, layout, spacing
em	Parent font-size	Yes	Component-local sizing

Best practice: use rem for font sizes, margins, and padding to keep your interface fully scalable, and reserve px for things that should never resize, like 1px borders.

Common PX to REM Conversions

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

Pixels	REM (16px root)	Typical Use
12px	`0.75rem`	Captions, fine print
14px	`0.875rem`	Secondary text, labels
16px	`1rem`	Body copy baseline
18px	`1.125rem`	Comfortable reading size
24px	`1.5rem`	Section headings
32px	`2rem`	Page titles

Frequently Asked Questions

What is the base font size and why does it matter?

It is the root (html) font-size that rem is calculated against. Browsers default it to 16px, so 1rem normally equals 16px. If your CSS sets a different root size, change this field to that value to get accurate conversions.

How is px converted to rem?

Divide the pixel value by the root font size: rem = px ÷ root. With a 16px root, 24px becomes 1.5rem. The tool calculates this instantly and rounds to your chosen number of decimal places.

Is rem better than px for accessibility?

Generally yes. Because rem scales with the user's browser font-size preference, people who increase their default text size get a proportionally larger interface. Fixed px values ignore that preference, which can hurt readability.

Does rem compound when elements are nested?

No. Unlike em, rem always references the root font-size, so the same rem value renders identically no matter how deeply an element is nested. This predictability is one of rem's biggest advantages.

Is the conversion done in my browser?

Yes. The calculation runs entirely client-side as you type. Nothing is uploaded to a server, so results are instant and the tool keeps working offline once loaded.