thedevtoolset
Dev

CSS px to rem Converter and rem to px Converter

Free px to rem converter (and rem to px): convert one value or a whole CSS block, with a configurable root font size. Instant, bidirectional, 100% in your browser.

Most browsers default to 16px.

16px = 1rem at a 16px root.

Why convert px to rem?

px is an absolute unit: 16px is always sixteen device pixels, no matter what the user has done in their browser. rem is relative — it scales with the root font size (<html>). When someone bumps their default font size up to 20px because they find small text hard to read, every length you authored in rem grows with it; every length you hard-coded in px stays stubbornly fixed. That single difference is why rem is the default recommendation for font sizes, spacing, and layout dimensions in accessible, responsive CSS.

The math is simple — rem = px ÷ root font size — but doing it by hand for a whole stylesheet is tedious and error-prone. Paste your CSS into the CSS block tab above and every px value is converted at once; use the Single value tab when you just need one number, in either direction.

The px to rem formula (and the reverse)

Both conversions come down to one relationship and the root font size:

  • px → rem: rem = px ÷ root font size
  • rem → px: px = rem × root font size

At the default 16px root, that means dividing or multiplying by 16:

24px ÷ 16 = 1.5rem
18px ÷ 16 = 1.125rem
1.5rem × 16 = 24px
0.75rem × 16 = 12px

If your project uses a different base, change the Root font size field and the whole calculation follows. On a 10px root (see the 62.5% pattern below), 24px becomes 2.4rem because you’re now dividing by 10 instead of 16. The converter does this live in both directions, so you never have to reach for a calculator — but knowing the formula makes the output easy to sanity-check.

What is the root font size (and why 16)?

The conversion depends entirely on the root font size. By default browsers render 1rem = 16px, so 16px → 1rem, 24px → 1.5rem, 8px → 0.5rem. That 16px is the browser default, not a fixed law — a stylesheet or a user’s browser settings can change it, and when it changes, the meaning of every rem on the page changes with it. If your design uses a different base, change the Root font size field and every result updates.

A common trick is the “62.5% font size” pattern:

html {
  font-size: 62.5%; /* 10px */
}

This makes 1rem = 10px, so the mental math becomes “move the decimal” — 24px → 2.4rem. Set the root field to 10 here and you’ll get the same numbers. It’s convenient, but be aware it changes the meaning of rem for everyone inheriting from <html>, including third-party components.

Common px to rem values (16px root)

At the default 16px root font size, these are the conversions you’ll reach for most often. For any other root, change the Root font size field above and the converter recalculates instantly.

px rem
4px 0.25rem
8px 0.5rem
10px 0.625rem
12px 0.75rem
14px 0.875rem
16px 1rem
18px 1.125rem
20px 1.25rem
24px 1.5rem
32px 2rem
40px 2.5rem
48px 3rem
64px 4rem

The pattern is simply rem = px ÷ 16. Values on a 4px or 8px spacing grid (8, 16, 24, 32…) divide cleanly into tidy rem numbers, which is one reason those grids are so popular — 0.5rem, 1rem, and 1.5rem are far easier to reason about than the ragged decimals you get from off-grid pixel values.

Converting rem to px

The reverse conversion — rem to px — comes up more often than you might expect. Multiply the rem value by the root font size (px = rem × root) and you’re done; the tool does it for you, but here are the situations where you’ll need it:

  • Debugging third-party CSS. A library ships spacing in rem and you need to know the rendered pixel size to line it up with a fixed-pixel element like a banner or ad slot.
  • Pixel-perfect design handoff. A designer specifies 1.25rem in Figma and you need the equivalent px value to verify it matches a screenshot or spec.
  • Legacy codebases. You’re integrating a new rem-based component into an older codebase that still uses px, and you need to match the exact computed size.
  • Media queries. Some developers prefer px breakpoints for clarity (768px is more scannable than 48rem), so they convert back after calculating in rem.

At a 16px root, these are the rem values you’ll convert to px most often:

rem px
0.25rem 4px
0.5rem 8px
0.625rem 10px
0.75rem 12px
0.875rem 14px
1rem 16px
1.125rem 18px
1.25rem 20px
1.5rem 24px
2rem 32px
2.5rem 40px
3rem 48px
4rem 64px

Use the CSS block tab, switch the direction to rem → px, and paste your stylesheet fragment. The tool swaps the converted output into the input automatically when you flip direction, so you can round-trip a block without copy-pasting.

px, rem, and em — which should you use?

  • rem — relative to the root only. Predictable, so it’s the right default for most font sizes and spacing. (See MDN’s <length> reference for how each unit resolves.)
  • em — relative to the parent’s font size, so it compounds when nested. Useful for things that should scale with their local context (padding inside a button that tracks the button’s own font size), risky for global layout because a value deep in the tree can inherit a surprising base.
  • px — keep it for things that genuinely shouldn’t scale: hairline borders (1px), box-shadow offsets, and occasionally media-query breakpoints.

A practical rule: author font sizes and spacing in rem, reach for em when you specifically want local scaling, and reserve px for borders and other crisp, fixed details.

Converting px to rem in Figma & design handoff

Figma reports everything in px, and there’s no rem unit inside the design file itself — the conversion happens on the way into code. Pick your project’s root font size first (16px unless you’ve deliberately changed it), then divide each px value Figma gives you by it: a 32px heading becomes 2rem, 12px padding becomes 0.75rem, a 4px radius becomes 0.25rem. Paste the px values into the Single value or CSS block tab above to convert them in bulk.

The handoff stays clean when designers and developers share the same spacing scale — a fixed set of steps (4, 8, 12, 16, 24, 32…) that map to predictable rem values. Off-grid one-off pixel values are what produce ugly decimals like 1.1875rem and drift between the mockup and the build, so agreeing on the scale is worth more than any single conversion.

Why teams are moving from px to rem

The core reason is respecting the reader. Browsers let people raise their default font size, and browser zoom scales relative units the way users expect. Type, spacing, and layout authored in rem grow with that preference automatically; the same values in px stay locked, which can crowd text into fixed-size boxes and force horizontal scrolling. Building in rem means one set of values that scales gracefully — no extra media queries, no separate “large text” stylesheet — which is why accessibility guidance and most modern design systems now default to it.

Using the converter

  1. Set the root font size to match your project (usually 16).
  2. For a one-off number, use Single value — type into either the px or rem field and the other updates instantly.
  3. For a block, switch to CSS block, paste your declarations, choose px → rem (or rem → px to go the other way), and copy the result. Zero values stay 0, and px inside other tokens is matched on word boundaries so it won’t mangle unrelated text.

Pairs well with several related tools: check your color choices with the color contrast checker, preview how a page looks in search results with the SERP simulator, convert epoch values on the back end with the Unix timestamp converter, and once you’re shipping, verify your <head> markup with the favicon checker.

Frequently asked questions

  • What is the formula to convert px to rem?

    The formula is <code>rem = px ÷ root font size</code>. On the default 16px root that means dividing by 16: <code>24px ÷ 16 = 1.5rem</code>, <code>8px ÷ 16 = 0.5rem</code>. To go the other way, multiply: <code>px = rem × root font size</code>. Change the Root font size field above if your project doesn't use 16 and every result recalculates.

  • Is 1rem always 16px?

    No. <code>1rem</code> equals the root (<code>&lt;html&gt;</code>) font size, and 16px is only the browser default. If a stylesheet sets <code>html { font-size: 20px }</code>, then <code>1rem = 20px</code>. Users can also raise their default font size in browser settings, which is exactly why rem is preferred — it tracks that value instead of ignoring it. So 1rem is 16px by default, but not guaranteed.

  • What is 24px in rem?

    At the standard 16px root, <code>24px = 1.5rem</code> (24 ÷ 16). If your root is 10px (the 62.5% trick), the same 24px is <code>2.4rem</code>. See the common-values table above for the conversions you'll reach for most often.

  • How do I convert rem to px?

    Multiply the rem value by the root font size: <code>px = rem × root</code>. At a 16px root, <code>1.5rem × 16 = 24px</code> and <code>0.75rem × 16 = 12px</code>. Switch the CSS block tab to the <code>rem → px</code> direction to convert a whole stylesheet fragment at once, or just type into the rem field in Single value mode and read the px.

  • When should I use rem vs px?

    Use rem for anything that should scale with the user's font-size preference — font sizes, margins, padding, gaps, and most layout dimensions. Keep px for details that must stay crisp and fixed regardless of zoom, such as hairline borders (<code>1px</code>) and box-shadow offsets. As a default, author in rem and treat px as the exception.

  • When should I use em vs rem vs px?

    rem is relative to the root font size, so it's predictable and global — the right default. em is relative to the element's own (or parent's) font size, so it compounds when nested; reach for it when something should scale with its local context, like padding inside a button that tracks the button's text size. px is absolute; reserve it for borders and other fixed, non-scaling details.

  • Why use rem instead of px?

    Because rem respects the reader. When someone increases their default font size — a common accessibility need — every length you wrote in rem grows with them, while px values stay locked and can push text into fixed-size containers. Sizing type, spacing, and layout in rem gives you a design that scales cleanly to user preference and browser zoom without any extra media queries.

  • How do I convert px to rem in Figma?

    Figma works in px, so there's no rem unit in the design file itself — you convert on the way into code. Decide your project's root font size (usually 16px), then divide each px value Figma reports by it: a 32px heading becomes <code>2rem</code>, 12px padding becomes <code>0.75rem</code>. Paste the px values into the converter above to get the rem equivalents, and keep a shared spacing scale so designers and developers stay in sync.

  • Will converting px to rem change how my site looks?

    No — at the default 16px root, 16px and 1rem render identically, so a straight conversion is visually a no-op. The appearance only changes when the root font size itself changes, which is exactly the scaling behavior you're opting into by using rem.

  • How many decimal places should I keep?

    This tool rounds to five places and trims trailing zeros, which is plenty — sub-pixel differences aren't visible. If you prefer rounder numbers, nudge your source values (design on a 4px or 8px grid) so they divide cleanly by your root size and produce tidy rem values like 0.5, 1, or 1.5.

  • What is 0.5rem and 0.25rem in px?

    At the default 16px root, <code>0.5rem = 8px</code> and <code>0.25rem = 4px</code> (0.5 × 16 and 0.25 × 16). These land exactly on a 4px/8px spacing grid, which is one reason those fractional rem values show up so often in design systems.

Related tools