Why use rem instead of px?

rem scales with the user's root font size. If a reader bumps their browser default from 16 to 20 (a common accessibility tweak, especially on phones for older eyes), every rem-based layout grows proportionally — type stays readable, gutters stay balanced. A px-based layout ignores that setting and stays small. For body type, line-height, and spacing, rem is the accessibility-friendly default. Reserve px for borders, shadows, and 1-device-pixel hairlines where you genuinely want a fixed size.

How does em differ from rem?

rem is always relative to the html root font size. em is relative to the nearest parent's computed font-size, so it compounds. A 1.25em padding inside a .card { font-size: 1.25rem } element computes to 1.25 × (1.25 × 16) = 25px, not 20px. That's a feature for component-scoped scaling (badges inside a heading inherit the heading's size) and a footgun for layout (nested lists growing unboundedly). The em field here lets you set the parent font size explicitly so you can see the compounding before it bites you.

What base font size do most sites use?

16px — it's the browser default and what every major design system (Tailwind, Bootstrap, Material, Chakra) assumes unless overridden. The famous exception is the "62.5% trick" (html { font-size: 62.5% } → 1rem = 10px), which makes rem math nicer (1.6rem = 16px) but breaks user font-size preferences. Modern advice: leave the root at 16, do the math, or use this tool. The base font input lets you switch to 10 or 14 if you've inherited a codebase that ships one of those.

Should I use px or rem for media queries?

em (not rem, not px) is the safest choice for media queries in 2024+ browsers. Safari has historically had bugs where px-based media queries don't honor user zoom; rem in media queries always resolves against the browser default (not your overridden html font-size), which can surprise you. em in media queries reliably resolves against the browser default, so `@media (min-width: 48em)` triggers at 768px on a 16px-default browser and scales with user zoom. Tailwind v3+ switched to rem for breakpoints; both em and rem are fine, px is the one to avoid.

Does the visual preview reflect my own browser font size?

The preview renders at the absolute px size you input, so it shows what the text would measure if your browser default were 16px. If you've zoomed your browser or set a custom default, the preview will appear scaled the same way — the ratios still hold. To audit exactly how a value would render in production, open this tool at 100% zoom with default font size and trust the preview row.

Migrating a px-based stylesheet to rem for accessibility

You inherited a layout in fixed px and want body type to honor reader font-size settings. Paste 14px 16px 18px 24px 32px into batch mode and get a px-to-rem table at base 16, then swap the values into your CSS so a reader who bumps their default to 20 sees everything scale.

Matching a design system that ships a custom base font

The handoff spec sets html to 18px, not the browser default. Set the base font input to 18 and the px and rem fields recompute, so 1.5rem reads as 27px instead of 24px. The live preview renders the actual pixel size so you can confirm a heading looks right before committing.

PX ↔ REM ↔ EM Converter — Live, Visual, Batch

CSS px ↔ rem ↔ em converter — visual scale, base font size adjustable.

Runs locally
Category Calculator
Best for Getting a realistic range before a purchase, plan, workout, or schedule decision.

Root font size (html)

Parent font size (for em)

Pixels

rem

Points

Live preview at this px (16px)

The quick brown fox jumps over the lazy dog

Common breakpoints

px	rem	em	pt	Label
12	0.75	0.75	9	caption / small
14	0.875	0.875	10.5	body small
16	1	1	12	body / base
18	1.125	1.125	13.5	body large
20	1.25	1.25	15	h5
24	1.5	1.5	18	h4
32	2	2	24	h3
48	3	3	36	h2
64	4	4	48	h1 / display

Batch convert

Paste a list (e.g. "12px 14 16 18 24 32") to get a full table

px	rem	em	pt
12	0.75	0.75	9
14	0.875	0.875	10.5
16	1	1	12
18	1.125	1.125	13.5
20	1.25	1.25	15
24	1.5	1.5	18
32	2	2	24
48	3	3	36
64	4	4	48

What this tool does

A four-way CSS unit converter for front-end developers and designers. Type a value in px, rem, em, or pt and the other three recompute live — no submit button, no round-trip lag. The root (html) font size defaults to 16px (the browser default) but you can override it from 12 to 24 to match a design system that shipped a custom base. Em uses a separate "parent" font size so you can sanity-check how a nested component scales relative to its container, not just to root. A live preview renders sample text at the current pixel size, so you can tell at a glance whether 1.125rem actually looks like a heading. Batch mode takes a list like "12px 14px 16px 18px 24px 32px" and outputs a clean px → rem / em / pt table you can paste into a design spec. A built-in reference shows the canonical breakpoints every CSS framework agrees on (12px = 0.75rem, 16px = 1rem, 24px = 1.5rem, 32px = 2rem). 100% client-side; nothing leaves your browser.

Tool details

Input: Text + Numbers; The page exposes text boxes, numeric controls, file pickers, or structured inputs depending on the tool.
Output: Live result + Copy + Preview; The result area focuses on usable output, with copy, download, or preview actions when supported.
Privacy: Browser-side processing; The main tool logic does not call an external API, so inputs normally stay in the current tab.
Save / share: No account required; Open the page and use it; whether results survive refresh depends on the tool.
Performance budget: Initial JS <= 12 KB; No WASM budget is declared, keeping the tool quick to open on mobile.
Best fit: Calculator · Developer; Category and role tags drive related tools, internal links, and quick fit checks.

How to use

1. Input

Paste or drop your content into the tool panel.
2. Process

Click the button. All processing is local in your browser.
3. Copy / Download

Copy the result or download to disk in one click.

How PX REM EM Converter fits into your work

Use it for fast estimates, comparisons, and planning numbers before you make the final call.

Calculation jobs

Getting a realistic range before a purchase, plan, workout, or schedule decision.
Comparing scenarios by changing one input at a time.
Turning rough assumptions into a number you can discuss.

Calculation checks

Double-check units, dates, rates, and rounding assumptions.
Treat health, finance, tax, and legal outputs as planning aids, not professional advice.
Save the inputs that produced an important result so you can reproduce it later.

Good next steps

These links move the current task into a more complete workflow.

Real-world use cases

Migrating a px-based stylesheet to rem for accessibility
You inherited a layout in fixed px and want body type to honor reader font-size settings. Paste 14px 16px 18px 24px 32px into batch mode and get a px-to-rem table at base 16, then swap the values into your CSS so a reader who bumps their default to 20 sees everything scale.
Matching a design system that ships a custom base font
The handoff spec sets html to 18px, not the browser default. Set the base font input to 18 and the px and rem fields recompute, so 1.5rem reads as 27px instead of 24px. The live preview renders the actual pixel size so you can confirm a heading looks right before committing.

Common pitfalls

Forgetting to change the base font input when your html isn't 16px, so every rem result is off
Reading the em field against root: em compounds on the parent font size, not the html root
Using the 62.5 percent trick to make 1rem equal 10px, which breaks readers' custom font-size preferences
Treating the preview as exact while your browser is zoomed or set to a non-default font size

Privacy

Every conversion runs in your browser with plain JavaScript. The values you type, batch lists, and base font setting are never sent to a server, logged, or stored anywhere off your device.

FAQ

Tool combos

Folks in your role tend to reach for these alongside this tool.

Browse all tools for this role

PX ↔ REM ↔ EM Converter — Live, Visual, Batch

What this tool does

Tool details

How to use

1. Input

2. Process

3. Copy / Download

How PX REM EM Converter fits into your work

Calculation jobs

Calculation checks

Good next steps

Real-world use cases

Migrating a px-based stylesheet to rem for accessibility

Matching a design system that ships a custom base font

Common pitfalls

Privacy

FAQ

CSS Formatter & Minifier

CSS Box Shadow Generator

Unit Converter

Aspect Ratio Calculator

Color Converter

Number Base Converter

Linux Permission (chmod) Calculator

Unix Timestamp Converter

Scientific Calculator

24-Point Solver & Game

555 Timer Calculator

A1C to Blood Glucose Calculator