Does the converter run in my browser?

Yes. The math runs entirely in your browser with JavaScript — rem = px ÷ base. No pixel value or base size is sent to a server, and the tool works offline once the page has loaded. Copying uses your browser clipboard locally.

How do I convert rem back to px?

Multiply the rem value by the base font size: px = rem × base. At base 16, 1.5rem × 16 = 24px and 2rem × 16 = 32px. For the reverse direction with one click, use the companion REM to PX converter.

Does 1rem always equal 16px?

Only when the root font size is 16px, which is the browser default. If your CSS sets html { font-size: 62.5% } (a common trick), the root becomes 10px, so 1rem = 10px and 2.4rem = 24px. Set the converter’s base field to match your root font size for accurate results.

PX to REM Converter: Convert Pixels to rem Instantly

Q: Is this PX to REM converter free?

Yes. It is 100% free with no signup and no usage cap. Conversion, the editable base font size, the reference table, and copy-to-clipboard are all unlocked for everyone.

Q: How do I convert px to rem?

Divide the pixel value by the root (base) font size: rem = px ÷ base. With the default 16px base, 24px ÷ 16 = 1.5rem, 32px ÷ 16 = 2rem, and 8px ÷ 16 = 0.5rem. Type the px value, leave the base at 16 (or change it), and read the rem result.

Q: What base font size should I use?

Use 16px unless you have changed it. 16px is the default root font size in Chrome, Firefox, Safari, and Edge, so 1rem equals 16px out of the box. Only change the base if your CSS sets a different font-size on the html (:root) element.

Q: Why use rem instead of px?

rem respects the user’s browser font-size preference, so the whole layout scales when someone increases their default text size for readability. A px value is fixed and ignores that setting. Sizing type and spacing in rem is a simple, WCAG-friendly accessibility win.

Q: What is the difference between rem and em?

rem is always relative to the ROOT font size (the html element), so 1.5rem is the same everywhere. em is relative to the font-size of the element’s own context, so ems compound when nested — 1.5em inside 1.5em inside 1.5em ends up much larger than expected. rem avoids that compounding trap.

Enter a pixel value and the converter divides it by your base font size to give the rem equivalent — rem = px ÷ base. The base defaults to 16px (24px = 1.5rem), and you can change it. Includes a px↔rem reference table. Free and 100% in-browser.

Pixels (px)

Base font size (px)

Result (rem)

1.5rem

24 ÷ 16 = 1.5rem

Quick reference at base 16px

Pixels	rem	Typical use
8px	0.5rem	Tight padding, fine borders
10px	0.625rem	Captions, micro-labels
12px	0.75rem	Small text, helper copy
14px	0.875rem	Secondary body text
16px	1rem	Default body text (1rem = base)
18px	1.125rem	Comfortable reading body
20px	1.25rem	Lead paragraph, small headings
24px	1.5rem	H3 / subheading
32px	2rem	H2 / section heading
48px	3rem	H1 / hero heading

Exact px to rem Math

Converts with the precise formula rem = px ÷ base. 24px at base 16 returns 1.5rem, with no rounding surprises and no NaN on empty input.

Editable Base Font Size

The base defaults to 16px (the browser standard), but you can set any root font size — 10px, 18px, 62.5% tricks — and the rem updates live.

px ↔ rem Reference Table

A built-in table maps the most-used values (8, 12, 14, 16, 24, 32, 48px) to rem at base 16, so common conversions are one glance away.

Accessibility-Friendly Output

rem scales with the user’s browser font setting while px does not. Converting to rem is a quick win for WCAG-compliant, zoomable type.

Instant, Reserved-Height Result

The rem value updates on every keystroke and the output area has fixed height, so there is no layout shift while you type.

100% Client-Side

No values leave your browser — no signup, nothing is sent anywhere. The conversion runs in JavaScript and works offline once the page loads.

PX to REM Converter: Pixels to rem Using rem = px ÷ base

A PX to REM converter turns a pixel measurement into the equivalent rem value by dividing it by the root font size: rem = px ÷ base. With the browser-default base of 16px, 24px becomes 1.5rem, 32px becomes 2rem, and 8px becomes 0.5rem. Type a pixel value, keep the base at 16 (or change it to match your CSS), and read the rem result instantly. Free and 100% in your browser.

How to convert px to rem

Type your pixel value into the Pixels (px) field — for example 24.
Leave the Base font size at 16 (the browser default) unless your CSS sets a different root font size.
Read the rem result instantly — 24 ÷ 16 = 1.5rem — with the working formula shown beneath it.
Need a different root size? Set the base to 10, 18, or whatever your :root uses, and the rem recomputes live.
Press Copy to grab the value as 1.5rem, ready to paste into your stylesheet.

What is rem and how does the conversion work?

rem stands for "root em" — a CSS length unit relative to the font size of the root (html) element. One rem equals the root font size in pixels, so the conversion is a single division: rem = px ÷ base. Browsers ship with a 16px default root size, which is why 1rem = 16px until your CSS changes it. The px unit, by contrast, is an absolute reference pixel and does not scale with the user's font preference. To go the other way, multiply: px = rem × base.

"rem — Represents the font size of the root element (typically <html>). When used within the root element font-size, it represents its initial value (a common browser default is 16px)."— MDN Web Docs, the CSS length unit reference, on CSS length units (rem)

The converter keeps up to four decimals and trims trailing zeros, so 16px shows as a clean 1rem, not 1.0000rem. Empty or invalid input returns a blank result rather than NaN, and a base of zero or less is rejected because dividing by it is undefined.

Worked examples: px → rem

Base 16 · 24px → rem

24 ÷ 16 = 1.5rem (a common H3 / subheading size)

Base 16 · 14px → rem

14 ÷ 16 = 0.875rem (secondary body text)

Base 16 · 1px → rem

1 ÷ 16 = 0.0625rem (a hairline border — px is usually fine here)

Edge case · changed root font size

The classic "62.5% trick" sets html { font-size: 62.5% }, making the root 10px instead of 16. Now the math changes: 24px ÷ 10 = 2.4rem, not 1.5rem. Set the converter's base field to 10 to match, or your rem values will be off by a factor of 1.6. This is also why accessibility matters: because rem tracks the root size, a user who bumps their browser's default font from 16px to 20px scales every rem-sized element up proportionally — something a px value would ignore.

px to rem reference table (base 16)

The most-used pixel sizes and their rem equivalents at the default 16px base. Memorize the anchors — 16px = 1rem, 8px = 0.5rem, 32px = 2rem — and the rest follow.

Pixels (px)	rem (base 16)	Typical use
8px	0.5rem	Tight padding, fine borders
10px	0.625rem	Captions, micro-labels
12px	0.75rem	Small text, helper copy
14px	0.875rem	Secondary body text
16px	1rem	Default body text (1rem = base)
18px	1.125rem	Comfortable reading body
20px	1.25rem	Lead paragraph, small headings
24px	1.5rem	H3 / subheading
32px	2rem	H2 / section heading
48px	3rem	H1 / hero heading

rem vs em: the compounding trap that catches everyone

Both rem and em are relative units, but to different references — and getting them mixed up is the single most common font-size bug. rem is relative to the ROOT(html) font size, so 1.5rem is exactly the same size no matter how deeply it is nested. em is relative to the element's own (inherited) font size, so it compounds: a 1.5em list inside a 1.5em list inside a 1.5em list resolves to 1.5 × 1.5 × 1.5 = 3.375×the root size — almost never what you intended.

That predictability is also why rem aids accessibility. Set your type and spacing in rem and the whole interface scales cleanly when a user raises their browser's default font size for readability. A px value stays frozen and can leave a low-vision user pinch-zooming a horizontally scrolling page. Reach for em only when you genuinely want a value to track its local context — for example, padding that should grow with a button's own font size.

Runs 100% in your browser

Your values never leave your device. The conversion runs locally in JavaScript and copying uses your browser's native clipboard — no uploads, nothing leaves your device. I tested it across the everyday range (8px to 48px), the awkward ones (1px = 0.0625rem, 13px = 0.8125rem), decimal pixels (1.5px), and non-default bases (10px and 18px). Empty input and a base of zero both return a blank result instead of NaN, and the output area keeps a fixed height so nothing jumps while you type.

Frequently asked questions

Is this PX to REM converter free?

Yes — 100% free with no signup and no usage cap. Conversion, the editable base, the reference table, and copy-to-clipboard are unlocked for everyone.

How do I convert px to rem?

Divide the pixel value by the base font size: rem = px ÷ base. At the default 16px base, 24px ÷ 16 = 1.5rem and 8px ÷ 16 = 0.5rem.

What base font size should I use?

Use 16px unless your CSS changes it. 16px is the default root font size in every major browser, so 1rem equals 16px out of the box. Match the base field to your :root font-size for accurate results.

Why use rem instead of px?

rem respects the user's browser font-size setting, so type and layout scale for readability; px stays fixed and ignores it. Sizing in rem is a straightforward WCAG-friendly accessibility win.

What is the difference between rem and em?

rem is relative to the root font size, so it never compounds. em is relative to the element's own font size, so nested ems multiply — 1.5em inside 1.5em becomes 2.25× the root. Use rem to avoid that trap.