PX to REM and REM to PX Converter

Convert PX to REM, REM to PX, or EM instantly — right in your browser. Use the adjustable root font-size to match your exact project, or leave it at the browser default of 16px. No signup, no data leaves your device.

✓ 100% Client-Side ✓ Adjustable Root Font-Size ✓ Batch Conversion ✓ PX · REM · EM ✓ Free Forever
Root Font-Size (px)
Default browser root font-size is 16px. This is the base rem/em is calculated against for any property — width, padding, margin, gap, border-radius, and font-size alike. Change it to match your project's html { font-size: ... } value.
PX → REM / EM
Enter a pixel value
REM—
EM—
REM / EM → PX
Enter a rem or em value
PX—
Batch Conversion
One value per line — mix px, rem, and em freely, e.g. 16px, 1.5rem, 2em
Results will appear here as a table
Saeed Ahmed Saeed Ahmed Jul 14, 2026

Why convert between PX, REM, and EM?

  • Translate a designer's px-based Figma or Sketch spec into rem values for your CSS — widths, margins, padding, and gaps just as often as text
  • Build a spacing scale (rem-based margins, padding, and gaps) that stays proportional if a user changes their browser's font-size setting
  • Audit an existing stylesheet and standardize inconsistent px, rem, and em usage across layout and typography alike
  • Check how an entire component — not just its text — will reflow when a user changes their accessibility font-size preferences
  • Convert legacy px-based CSS to rem-based CSS during a design-system migration
  • Quickly sanity-check values while writing Tailwind, Bootstrap, or custom CSS without doing the math by hand

How to convert PX to REM

Divide the pixel value by your root font-size. With the default 16px root, 24px becomes 1.5rem, and 32px becomes 2rem. Enter your pixel value into the PX → REM panel above and the result updates instantly, using whichever root font-size you've set.

How to convert REM to PX

Multiply the rem value by your root font-size. With the default 16px root, 1rem becomes 16px, and 1.5rem becomes 24px. Enter your rem value into the REM → PX panel above, and switch the unit selector to em if you're converting an em value instead.

Common REM to PX conversions (16px root)

REM PX REM PX
0.25rem 4px 1.75rem 28px
0.5rem 8px 2rem 32px
0.75rem 12px 2.5rem 40px
1rem 16px 3rem 48px
1.25rem 20px 4rem 64px
1.5rem 24px 6rem 96px
Note

This table assumes the default 16px root font-size. If your project overrides html { font-size }, use the converter above with your own root value instead of these fixed numbers.

REM to PX converter — features you'll love

  • ✅ 100% browser-based — your values never leave your device, ensuring complete privacy
  • ✅ Fully bidirectional — convert px to rem and rem to px in one tool, with equal focus on both directions
  • ✅ EM support — convert em to px and em to rem alongside standard rem calculations
  • ✅ Adjustable root font-size — matches non-standard root values like the common 62.5% trick
  • ✅ Live inline preview — see the conversion update in real time as you type
  • ✅ Batch conversion — paste a mixed list of px, rem, and em values and convert them all at once
  • ✅ Copy results — copy any converted value to your clipboard with one click
  • ✅ Works offline after first load — no internet connection required

Why DataFrog's PX/REM/EM converter stands out

  • Privacy first — your CSS values are never uploaded to our servers.
  • Real project accuracy — the adjustable root font-size means results match your actual codebase, not just the browser default.
  • Equal treatment of both directions — most converters bury one direction as an afterthought; this tool gives px→rem and rem→px identical, side-by-side panels.
  • No signup, no watermarks — completely free, whether you need one conversion or a batch of hundreds.

Supported units

  • PX (pixels) — an absolute CSS unit, fixed regardless of font-size settings
  • REM (root em) — relative to the root <html> element's font-size, consistent everywhere on the page
  • EM — relative to the font-size of the nearest parent element; this tool calculates em against your chosen root font-size for a simple, consistent baseline
  • Decimal values are supported for all units (e.g. 1.25rem, 0.5em)

Common use cases

  • 🎨 Design handoff — convert a designer's px specs into rem for accessible, scalable CSS
  • 🔄 Legacy CSS migration — batch-convert an old px-based stylesheet to rem
  • ♿ Accessibility audits — check how components scale when a user increases their browser's default font size
  • 🧩 Design systems — verify spacing and typography scales stay consistent across breakpoints
  • 🛠️ Framework work — quickly convert Tailwind, Bootstrap, or custom design-token values

Privacy & Security

  • 🔒 All processing happens locally in your browser using vanilla JavaScript
  • 🚫 No data transmission — your values never touch our network
  • 🕵️ No tracking, no cookies, no third-party analytics scripts
  • 💼 Safe for proprietary design-system values and internal component libraries

Frequently asked questions (PX, REM & EM conversion)

How do I convert REM to PX?

Multiply the rem value by your root font-size (16px by default in most browsers). For example, 1rem = 1 × 16px = 16px, and 2rem = 32px. This tool does the math instantly and lets you change the root font-size if your project uses a different base.

How do I convert PX to REM?

Divide the pixel value by your root font-size. For example, 24px / 16px = 1.5rem. Enter your pixel value into the converter above and it calculates the rem equivalent automatically, using your chosen root font-size.

What is 1rem in px?

By default, 1rem equals 16px, since browsers set the default root font-size to 16px. If a site's CSS changes the root font-size (for example to 62.5% for easy math, making 1rem = 10px), the conversion changes accordingly — this tool lets you set that custom root size.

What is 3rem to px, and 6rem to px?

At the default 16px root font-size, 3rem equals 48px and 6rem equals 96px. If your project uses a different root font-size, multiply that value by 3 or 6 respectively, or use the converter above for instant results.

What is the difference between em and rem?

Rem is always relative to the root (html) element's font-size, so it stays consistent everywhere on a page. Em is relative to the font-size of its nearest parent element, so the same em value can compute to different pixel sizes depending on where it's used. This tool treats em as relative to the root font-size for simplicity, matching rem, since that covers the vast majority of real-world use cases.

Is the root font-size always 16px?

16px is the default in every major browser, but developers commonly override it in CSS (a popular pattern is setting html { font-size: 62.5% } to make 1rem equal 10px for easier mental math). Always check your project's actual root font-size before relying on rem-to-px conversions.

Why do px, em, and rem all matter in CSS?

Px gives you fixed, predictable sizing. Rem scales consistently with a user's font-size preferences, which is important for accessibility. Em is useful for sizing that should scale relative to a specific component's own font-size. Most modern CSS uses rem for layout and typography, and reserves px for things like borders that shouldn't scale.

Does root font-size only affect text size?

No. Rem and em are calculated against the root font-size no matter which CSS property they're used for — width, height, padding, margin, gap, border-radius, and font-size all convert the same way. If you use 1.5rem for a padding value, it equals the same pixel amount as 1.5rem used for font-size.

Does this tool support batch conversion?

Yes. Paste multiple values, one per line, in any mix of px, rem, or em (for example 16px, 1.5rem, 2em) and the tool converts every line into all three units at once in a results table.

Is my data sent to a server?

No. All conversion happens entirely inside your browser using local JavaScript. No values are uploaded or transmitted anywhere.