PX to REM Converter — Convert Pixels to Rem

Convert px to rem instantly. 16px = 1rem at the default base, plus any custom root font-size. Free, live two-way conversion that runs 100% in your browser.

No Tracking Runs in Browser Free

Root font-size

Pixels (px)

Rem (rem)

Preview

The quick brown fox

Reviewed for CSS rem-unit accuracy and accessibility guidance — Go Tools Engineering Team · Jun 11, 2026

Quick Reference

What Is 16px in rem?

16px = 1rem (at 16px base) At the browser-default 16px root font-size, 16px equals exactly 1rem. This is the anchor for every other conversion: rem = px ÷ 16.

What Is the px to rem Formula?

rem = px ÷ root-font-size Divide the pixel value by the root font-size. For example, 24px ÷ 16 = 1.5rem. Change the base in the tool if your project does not use 16px.

What Is the 62.5% Trick?

62.5% → 1rem = 10px Setting html { font-size: 62.5% } makes the root 10px, so 1rem = 10px and rem math is just "divide by 10". Set this tool's base to 10 to use it.

What Is a PX to REM Converter?

A px to rem converter translates pixel measurements into rem units for CSS. The rem ("root em") unit is relative to the font-size of the root element: 1rem always equals the root font-size, which browsers set to 16px by default. The conversion is a simple division — rem = px ÷ root-font-size — but doing it by hand for every font size, margin, and breakpoint in a stylesheet is tedious and error-prone, which is what this tool removes.

The reason to convert at all is accessibility and scalability. When a value is written in px, it is locked to a fixed size and ignores the user's browser font-size preference. When it is written in rem, it scales proportionally if the user increases their default font size — a critical accommodation for people with low vision and a smoother experience for everyone who zooms. Expressing a design system in rem also means a single change to the root font-size rescales the entire interface consistently.

This converter keeps both the pixel and rem fields linked in real time, so you can move in either direction, and — unlike tools that hard-code a 16px base — it lets you set any root font-size. That matters because a stylesheet using the 62.5% technique (a 10px root) converts differently from a default 16px setup. A live preview shows the resulting text size, and a reference table lists the most common px values at a 16px base for quick lookups.

Need the reverse direction? Use the rem to px converter. For tidying up the stylesheet itself, try the CSS formatter, and for color work see the color converter. Everything runs in your browser — your values never leave your device.

/* The core formula */
/* rem = px ÷ root-font-size (16px by default) */

:root {
  font-size: 16px; /* 1rem = 16px */
}

.title  { font-size: 1.5rem;  } /* 24px */
.body   { font-size: 1rem;    } /* 16px */
.caption{ font-size: 0.75rem; } /* 12px */
.card   { padding: 1.5rem;    } /* 24px */

/* JavaScript equivalent */
const pxToRem = (px, base = 16) => px / base;
console.log(pxToRem(24)); // 1.5
console.log(pxToRem(12)); // 0.75

Key Features of This PX to REM Converter

Custom Root Font-Size

Convert against any base, not just 16px. Match the 62.5% (10px) technique or your project's actual root font-size — most tools hard-code 16.

Live Two-Way Conversion

Pixels and rem fields stay linked in real time. Edit either side and the other updates instantly against your chosen base.

Built-In Size Preview

A preview line renders text at the resulting rem size so you can see the scale, not just the number.

One-Click Copy

Copy the px or rem value to your clipboard with a single click, ready to paste straight into your CSS.

Reference Conversion Table

A chart of the most common px values and their rem equivalents at a 16px base for quick, no-typing lookups.

100% Browser-Based & Private

All math happens locally in your browser. No server requests, no tracking, no data storage — your values never leave your device.

PX to REM Conversion Examples

Body Text — 16px to rem

1rem

At the default 16px root font-size, 16px equals exactly 1rem. This is the baseline every other conversion is measured against: rem = px ÷ 16.

Heading — 24px to rem

1.5rem

A 24px heading becomes 1.5rem (24 ÷ 16 = 1.5). Using rem means the heading scales automatically if the user changes their browser's default font size.

Small Label — 12px to rem

0.75rem

12px is 0.75rem at a 16px base. Fine print and captions are common candidates for rem so they respect the reader's font-size preferences.

Spacing — 8px to rem

0.5rem

8px equals 0.5rem. Many design systems express padding and margins in rem so spacing scales together with text.

62.5% Trick — 10px base, 18px to rem

1.125rem

If you set the root font-size to 10px (the 62.5% technique), 18px becomes 1.8rem. At the default 16px base, 18px is 1.125rem. Always convert against the base your project actually uses.

Breakpoint — 768px to rem

48rem

A 768px media-query breakpoint is 48rem at a 16px base. Rem-based breakpoints zoom more predictably when users scale their text.

How to Convert Common px Values to rem

Quick reference for the px values developers convert to rem most often, at the default 16px root font-size.

How to Convert 16px to rem

16 px → 1 rem

Divide 16 by the 16px root font-size to get 1rem. 16px is the anchor value — it equals exactly 1rem on a default setup, which is why it is the reference point for all other conversions.

16 px → 1 rem

Memorize 16px = 1rem. From there, halve for 0.5rem (8px) and double for 2rem (32px).