px → rem Converter

Convert pixels to rem, see the result live on real HTML elements, batch-convert CSS snippets, and browse a full reference table.

px
=
1rem
Root font size px
EM 1em
Percent 100%
Points (pt) 12pt
Live Element Preview Unique
Applying 1rem to real HTML properties
h1 font-size: 1rem

Page Heading

h2 font-size: 1rem

Section Heading

h3 font-size: 1rem

Subsection Heading

p font-size: 1rem

The quick brown fox jumps over the lazy dog.

small / caption font-size: 1rem

Helper text, label, or caption

button font-size: 1rem
div / card padding: 1rem
Content
section margin-bottom: 1rem
Block 1
Block 2
flex container gap: 1rem
Item A
Item B
Item C
p / span letter-spacing: 1rem
HELLO
p / article line-height: 1rem

First line of text

Second line of text

button / input padding: 1rem 2rem
div / img width: 1rem
16px
div / img height: 1rem
16px
div / card / img border-radius: 1rem
container / section max-width: 1rem
Container constrained to max-width
div / card border-width: 1rem
Content area
input / button outline-width: 1rem
Focus outline
div / img border-radius: 1rem
Rounded corners applied as border-radius
card / section border-top-width: 1rem
Card content below accent border
Reference Table

Common px values converted to rem, em, and % — updates instantly when you change the base font size above.

px rem em % pt
Batch CSS Converter

Paste any CSS snippet — all px values are converted to rem instantly using your current base font size.

CSS Input (with px)
rem Output

px vs. rem — What's the Difference?

px (pixels) is an absolute unit. 16px is always 16 pixels on screen regardless of user settings. It is predictable but rigid.

rem (root em) is a relative unit. 1rem equals the font size of the <html> element (root). Browsers default this to 16px, so 1rem = 16px by default — but users can change their browser's base font size, and rem-based layouts scale with it.

rem = px ÷ root font size   |   24px ÷ 16 = 1.5rem

Why Use rem Instead of px?

Accessibility. When a user increases their system or browser font size (common for users with low vision), rem-based layouts scale proportionally. px layouts do not — they override the user's preference.

Scalability. You can change the entire site's scale by adjusting a single CSS rule on the html element. Reducing html { font-size: 14px; } shrinks everything proportionally.

Design systems. Spacing and typography tokens in rem make it easy to enforce consistent rhythm across a design system.

The 62.5% Trick

Many developers set html { font-size: 62.5%; }, which makes 1rem = 10px (since 62.5% of 16px = 10px). This makes mental arithmetic much easier — 24px becomes 2.4rem instead of 1.5rem.

/* 62.5% trick — makes 1rem = 10px */ html { font-size: 62.5%; } body { font-size: 1.6rem; /* = 16px — restore body to normal */ } h1 { font-size: 3.2rem; } /* = 32px */ h2 { font-size: 2.4rem; } /* = 24px */ p { font-size: 1.6rem; } /* = 16px */

rem vs. em

rem is always relative to the root (<html>). em is relative to the nearest parent. This makes em compounding — a nested element with font-size: 1.2em inside a parent with font-size: 1.2em will actually render at 1.44em (1.2 × 1.2). rem avoids this compounding completely.

Use rem for font sizes, spacing, and layout dimensions. Use em only when you intentionally want an element to scale with its parent — common for padding inside a button (so padding scales with the button's font size).

When to Keep px

  • 1px borders — border: 1px solid is intentionally thin and should stay as px.
  • Box shadows — shadow blur and spread values are cosmetic, not layout-critical.
  • Media query breakpoints — use px (or em) for breakpoints; rem in media queries behaves inconsistently across browsers.
  • Icons and images — fixed icon sizes in px can be appropriate if they shouldn't scale with text.