Should I use rem or em?

Default to rem for global scales (font-size, spacing tokens) — they're always relative to the root, no compounding. Use em for component-internal spacing where you want it to scale with the parent's font-size (typical in icon buttons that should match line-height).

What's the 10px trick?

Setting html { font-size: 62.5% } makes 1rem = 10px (10 ÷ 16 = 0.625). Designers like it because mental math is easier — 14px = 1.4rem. Slide the base to 10 in this tool to match.

Developer Utilities · Free tool

PX to REM Converter

Transform CSS pixels to rem/em units at any base font-size in your browser instantly. Free online converter with no download or registration needed.

Updated June 2026

Pixel valueBase font size (16px)

Browser default is 16. Designers using html { font-size: 62.5% } (the "10px trick") set this to 10.

16px in rem / em

1rem

1em

16rem in px

256px

rem vs em — quick rule

rem is always relative to the <html> root font-size. Same value everywhere.
em is relative to the parent's font-size, so it compounds in nested elements. Useful for spacing inside a component, dangerous for global type scales.
Default to rem for most things; reach for em only when the value should scale with its container.

Found this useful?Email Buy Me a Coffee

What it does

Convert between CSS pixels and rem/em at any base font-size. Default 16px is the browser default; designers using the "html { font-size: 62.5% }" 10px trick can slide the base to match. Includes a quick rule for when to use rem vs em.

Embed this tool on your siteShow snippet

Paste this snippet into any page. Loads on-demand (lazy), no tracking scripts, and sized to most dashboards. Replace the height to fit your layout.

<iframe src="https://freetoolarena.com/embed/px-to-rem-converter" width="100%" height="720" frameborder="0" loading="lazy" title="PX to REM Converter" style="border:1px solid #e2e8f0;border-radius:12px;max-width:720px;"></iframe>

Embed docs →

How to use it

Type a pixel value.
Adjust the base font-size if your design system uses a custom one.
Copy the rem or em value into your stylesheet.

Frequently asked questions

Should I use rem or em?: Default to rem for global scales (font-size, spacing tokens) — they're always relative to the root, no compounding. Use em for component-internal spacing where you want it to scale with the parent's font-size (typical in icon buttons that should match line-height).
What's the 10px trick?: Setting html { font-size: 62.5% } makes 1rem = 10px (10 ÷ 16 = 0.625). Designers like it because mental math is easier — 14px = 1.4rem. Slide the base to 10 in this tool to match.

Learn more

Explore more developer utilities tools

100% in-browserNo downloadsNo sign-upMalware-freeHow we keep this safe →