px to rem Converter — CSS Unit Calculator

What rem is and why it matters

The remunit in CSS stands for "root em." Unlike px, which is an absolute unit fixed to physical or logical screen pixels, rem is relative to the font size declared on the :root (html) element. By default, every browser ships with a root font size of 16px, so 1rem = 16px out of the box. Front-end developers, CSS authors, and design-system engineers reach for rem when they need spacing and typography that scales predictably across different user environments.

The accessibility argument for rem is straightforward. Pixels are absolute: font-size: 14pxwill always render at 14 logical pixels regardless of the user's browser preference. Rem respects that preference — if a user has raised their browser's base font size to 20px because they need larger text, a 0.875rem value scales with it. WCAG 1.4.4 requires that text can be resized to 200% without loss of function; rem-based font sizes satisfy this requirement naturally while px-based sizes do not.

This tool is a fast px to rem converter and rem to px calculator. Set your project's base font size, type a single value in either direction, or paste a batch list of px values to convert them all at once. A reference table of common sizes is always visible so you can spot-check values without typing anything.

The formula, and how rem compares to other units

The conversion is straightforward:

rem = px ÷ base-font-size
px  = rem × base-font-size

Example at base 16px:
  24px ÷ 16 = 1.5rem
  1.5rem × 16 = 24px

The only variable is the base. If your project sets html { font-size: 18px; }, then 1rem = 18px and the same formula applies with 18 as the divisor. Always match the base in this tool to the root font size in your stylesheet.

rem vs em

em is relative to the font size of the nearest ancestor element, not to the root. rem is always relative to :root. This distinction matters in nested components: a 1.2em value inside a 0.8em container ends up at 0.96em of the root — the compounding is hard to track. Rem has no compounding; it always refers back to a single anchor.

rem vs px

Neither unit is universally correct. Use rem for font sizes and layout spacing (padding, margin, gap) where respecting the user's preferences matters. Use px for details that genuinely must not scale with the user's font preference — 1px borders, small icons, box shadows. A simple policy: if the property communicates text or breathing room around text, prefer rem. If it is a decorative detail at a fixed physical size, px is fine. The CSS Clamp Calculator combines both — it outputs rem values inside a clamp()so font size scales both with the viewport and with the user's preference.

The 62.5% trick

Some developers set html { font-size: 62.5%; } so that 1rem = 10px, making mental math easier: 24px becomes 2.4rem, 48px becomes 4.8rem. The tradeoff is real: while a percentage base still scales with user preferences (unlike an absolute font-size: 10px), it affects every rem value in your codebase and can interfere with third-party components that assume the browser default. If you use this trick, set the base in this tool to 10 to get matching conversions.

Tailwind and the default rem scale

Tailwind CSS uses 0.25rem increments for its default spacing scale, assuming a 16px root. space-1 = 0.25rem = 4px, space-4 = 1rem = 16px, space-6 = 1.5rem = 24px. The reference table in this tool maps directly to that scale, so you can find the Tailwind class for any px value without memorizing the spacing table.

How to use this tool

1. Set the base font size— the default is 16px, which matches the browser default and Tailwind's assumption. Change this if your project sets a different root font size.
2. Type a px value to see the rem equivalent instantly, or type a rem value to see the px equivalent. The conversion updates on every keystroke.
3. Batch convert — paste a list of px values (one per line, or separated by spaces or commas). Values with units like 16px are stripped automatically. The tool outputs the full rem list, ready to copy.
4. Reference table — a built-in table of common px sizes (from 4px to 96px) and their rem equivalents at your chosen base is always visible. Use it to spot-check values or orient yourself in a design system.

Example conversions

Single value — base 16px:

Input (px):  24
Output (rem): 1.5

Input (px):  14
Output (rem): 0.875

Input (px):  48
Output (rem): 3

Batch input — paste multiple values:

Input (paste):
12, 14, 16, 18, 24, 32, 48

Output at base 16px:
0.75rem
0.875rem
1rem
1.125rem
1.5rem
2rem
3rem

Custom base — base 18px (a common choice for reading-focused sites):

Input (px):  36
Output (rem): 2  (because 36 ÷ 18 = 2)

Input (px):  18
Output (rem): 1

Technical notes

Why 1rem equals 16px by default. The HTML specification does not mandate a default font size, but all major browsers have shipped font-size: 16px on the html element as a user-agent stylesheet default since the mid-1990s. Unless a stylesheet overrides it, or the user has changed their browser preference, 1rem is 16px.

Setting a custom root font size in CSS.You can declare the base in pixels or as a percentage of the user's preference:

/* Absolute — breaks user font-size preferences */
html { font-size: 10px; }

/* Percentage — scales with user preference (preferred) */
html { font-size: 112.5%; }  /* 18px at default */
html { font-size: 62.5%; }   /* 10px at default, the "10px trick" */

Mixing units with calc(). CSS allows mixing rem and px inside calc(): calc(1rem + 4px) is valid. This is useful when you want a size that includes a fixed offset (like a border) plus a scalable component. You can also mix rem with viewport units, which is exactly what the CSS Clamp Calculator does.

Media queries and em. There is a long-standing cross-browser quirk: rem inside media queries was historically unreliable in some browsers (notably Safari before 2015). The established recommendation is to use em, not rem, in @mediaconditions. Both units reference the browser's base font size inside media queries (not any element's computed font size), so the difference is mostly consistency and compatibility rather than a meaningful distinction today.

Limits of this tool

• Converts between px and rem only. It does not handle em, vw, vh, pt, ch, or other CSS length units.
• Batch mode accepts plain numbers and strips trailing px or rem suffixes. Values with other units (e.g., 2vw) will not convert correctly.
• The tool does not account for browser zoom level — it calculates at the base font size you specify, not at the user's actual computed value.

Common mistakes

• Using an absolute px base for the 10px trick. Setting html { font-size: 10px; } (not a percentage) hard-codes the root and breaks any user who has set a larger browser font size. Use 62.5% instead — it achieves the same 10px-per-rem effect while still honoring user preferences.
• Forgetting to update the base. If your project uses a non-16px root, every rem conversion done at the default 16px base will be wrong. Set the base in this tool once and leave it for the session.
• Using rem for border widths. A 1px border should stay 1px. Converting it to 0.0625rem adds unnecessary indirection with no accessibility benefit, since border widths are not font-size-dependent in any meaningful way.
• Mixing rem and px on the same element without a system. Using rem for padding-top and px for padding-bottom on the same element is not wrong per se, but it creates maintenance debt. Pick one unit per property category and apply it consistently across a component.
• Assuming the base is always 16. Some CSS resets (particularly older ones) or design systems change the root font size. Always verify the actual root value in your stylesheet before trusting any px-to-rem conversion.

Related tools

If you are working on responsive design, the CSS Clamp Calculator generates fluid clamp() values that use rem internally — a natural companion to this tool. For corner rounding in your UI, the CSS Border Radius Generator lets you preview and copy radius values visually. And if you are converting color codes while building a design system, the Color Converter handles hex, RGB, and HSL in one place.

Privacy

All calculations run in your browser. No values you enter are sent to a server, stored, or logged. The tool works fully offline once the page has loaded. Safe to use with private design tokens, unreleased brand guidelines, or client work.

Frequently asked questions

What is the difference between rem and em?

Both are relative length units, but their reference point differs. rem (root em) is always relative to the font size of the html element. emis relative to the font size of the element's nearest ancestor that has a font-size declaration. This means em compounds in nested elements: a 1.2em span inside a 0.875em paragraph computes to about 1.05em of the root, which can be surprising. Rem is predictable because it always resolves against one fixed value.

Should I use rem for everything?

No. Rem is the right choice for font sizes, line heights, and spacing (padding, margin, gap) — anything that benefits from scaling with the user's font preference. For pixel-perfect details that genuinely should not change — 1px borders, 2px outlines, small icon sizes — px is clearer and more intentional. There is no strict rule, but a common pattern is: typography and spacing in rem, decorative details in px.

What base font size should I use?

Use whatever your project sets on the html element. If you have not explicitly changed it, use 16 — that is the browser default. If your stylesheet sets html { font-size: 18px; }, use 18. If it uses the 62.5% trick (making 1rem = 10px at browser default), use 10. The key is consistency: the base in this css unit converter must match the root font size actually active in your project.

Why does 1rem equal 16px?

All major browsers set a default stylesheet on the html element with font-size: 16px. This default has been consistent across Chrome, Firefox, Safari, and Edge for decades. Users can change it in browser settings (usually under Accessibility or Appearance), but if no one touches it, 16px is what every browser uses. The 1rem = 16px identity holds as long as neither the user nor the stylesheet overrides the root.

How do I use the 62.5% trick safely?

Set html { font-size: 62.5%; } instead of font-size: 10px. The percentage form means the root scales proportionally from whatever the user has set in their browser — someone who has chosen 20px as their browser font size will get a 12.5px root (62.5% of 20), not a forced 10px. In this tool, set the base to 10 to match the default-browser result (62.5% of 16). Be aware that third-party components or browser extensions may assume a 16px base and look wrong if they use rem values internally.

Do media queries support rem?

Technically yes, but the conventional recommendation is to use em in media query conditions rather than rem. Inside a media query, both rem and emresolve against the browser's base font size (not any element's computed value), so they behave identically in practice on current browsers. The em preference stems from older Safari versions that had a bug with rem in media queries. For new projects targeting modern browsers the difference is negligible, but using em in media queries remains the safer, more widely cited convention.