Free PX to REM Calculator Online

Convert pixels to rem, em, percent, and print units instantly. This free px to rem calculator gives you accurate results based on your project's base font size, so every conversion matches what the browser actually renders.

How to Convert PX to REM

To convert px to rem, divide the pixel value by the root font size. Most browsers default to a 16px root, so the formula is: rem = px / 16. For example, 24px divided by 16 gives you 1.5rem. If your project uses a different base, like 14px or 18px, change the base font size setting above and the calculator will adjust every result automatically. You can also use this tool as a rem to px converter by entering a rem value in the result field or by swapping the unit direction.

Conversion Formula

The px to rem conversion formula is simple: rem = px / base font size. With the standard 16px base, 16px equals 1rem, 32px equals 2rem, and 8px equals 0.5rem. To go from rem to px, multiply instead: px = rem * base font size. So 2.5rem at a 16px base equals 40px. This calculator handles both directions so you never have to do the math yourself.

Common Conversion Values

At the default 16px base font size, here are the most common px to rem values developers look up: 10px is 0.625rem, 12px is 0.75rem, 14px is 0.875rem, 16px is 1rem, 18px is 1.125rem, 20px is 1.25rem, 24px is 1.5rem, 32px is 2rem, and 48px is 3rem. Use the conversion table above to see the full list, or change the base font size to recalculate all values for your own project.

REM vs EM in CSS

Both rem and em are relative CSS units, but they reference different things. rem is always relative to the root element's font size, which makes it predictable across your entire stylesheet. em is relative to the font size of the current element or its parent, so it compounds when elements are nested. Most developers prefer rem for global typography scales and spacing systems because the value stays consistent. Use em when you want component-level sizing that scales with its own context, like padding that grows with a button's text size. This converter handles both px to rem and px to em conversions.

Why Use REM in CSS

Using rem instead of px gives your CSS three practical advantages. First, it respects user preferences: people who increase their browser's default font size for accessibility see your layout scale properly, helping meet WCAG accessibility guidelines. Second, it makes responsive design easier because changing the root font size at a single breakpoint can resize your entire layout. Third, rem values create a consistent spacing and typography system across components, which is why most design systems and CSS frameworks use rem as their base unit.

When to Use REM, EM, PX, or Percent

Each CSS unit has a sweet spot. Use rem for font sizes, margins, padding, and anything that should scale with the user's root setting. Use em for component-internal spacing that should scale with the component's own text. Use px for borders, shadows, and fine details where you need exact pixel control. Use % for widths, fluid containers, and inherited text scaling. This calculator also supports print and physical units like pt, pc, mm, cm, and in, which are useful when converting between screen CSS and print stylesheet values.

Base Font Size and Your Project

The base font size is the root value that all rem calculations depend on. Browsers default to 16px, but some design systems set it to 14px, 18px, or another value by styling the font-size CSS property on the html element. If your project uses a non-standard base, update the setting above and every conversion, including the px to rem table, will recalculate instantly. This is especially useful when auditing an existing codebase with hard-coded pixel values or when building a new rem-based spacing scale from scratch.