HandyBench

PX to REM Converter

Convert pixels and rem with a custom root size.

Browsers default to 16px unless the user changes it.

=
pxrem
4px0.25rem
8px0.5rem
12px0.75rem
14px0.875rem
16px1rem
18px1.125rem
20px1.25rem
24px1.5rem
32px2rem
48px3rem
64px4rem

Use rem for font sizes and spacing so your layout scales when a visitor increases their browser's default text size for accessibility. Use px for things that should stay a fixed size regardless of text-size settings, like 1px borders.

How to use the PX to REM Converter

  1. 1 Set your root (html) font size — 16px is the browser default.
  2. 2 Type a value into either the px or rem field to convert instantly both ways.
  3. 3 Check the reference table for common sizes like 8px, 16px and 24px at your root size.

The formula and where the root size comes from

One rem equals the computed font size of the root <html> element. To convert, divide pixels by that size to get rem, or multiply rem by it to get pixels. The root box on this page defaults to 16, the usual browser default, and changing it redraws the quick-reference table straight away. Whichever of the px or rem boxes you edited last stays the source: change the root size after typing a px value and the rem box updates, and change it after typing a rem value and the px box updates. If you clear it or enter zero or less, the maths quietly falls back to 16. Results are rounded to three decimal places.

Worked example

At a 16px root, 24px is 24 / 16 = 1.5rem and 14px is 0.875rem. The same pixel values come out differently when the root changes, which is why the root box matters.

pxrem at 16px rootrem at 10px rootrem at 18px root
10px0.62510.556
14px0.8751.40.778
16px11.60.889
24px1.52.41.333
32px23.21.778

Pitfalls with rem

  • The 62.5% trick. Some stylesheets set html { font-size: 62.5%; } so that 1rem equals 10px on a default browser. If your project does this, enter 10 as the root here. It also shrinks any text you forget to size, so set body back to a readable size.
  • Setting the root in px. A rule like html { font-size: 16px; } overrides the user's browser text-size preference, which defeats the main reason for using rem. Prefer leaving it unset or using a percentage.
  • Rounded values. 13px becomes 0.813rem, which renders as 13.008px at a 16px root. That difference is invisible, but if you need exact output keep more decimals in your own stylesheet.
  • Media queries. In a media query, rem and em are measured against the browser's initial font size, not your own html rule. A breakpoint of 48rem is 768px on a default browser regardless of what the stylesheet sets.
  • Browser zoom versus text size. Zooming the page scales everything, pixels included. Only the browser's default font-size setting separates rem from px, so test that setting rather than zoom.

Typical values to convert are font sizes, line heights, padding and margins; hairline borders and shadows usually stay in px. If you are converting other units, the unit converter covers general measurement, and the border radius generator produces the radius values you may want to express in rem.

Examples

  • ▸ At the default 16px root, 24px = 1.5rem.
  • ▸ At an 18px root, 16px ≈ 0.889rem.

Frequently asked questions

How do I convert px to rem?

Divide the pixel value by the root font size. At the default 16px root, 24px ÷ 16 = 1.5rem. This tool does the division for you and updates live as you type.

What happens to my value when I change the root size?

The field you edited last stays as the source. If you typed pixels, changing the root recalculates the rem value. If you typed rem, the pixel value is recalculated instead.

Why use rem instead of px in CSS?

rem scales with the root font size, so when a user increases their browser’s default text size for accessibility, rem-based spacing and type scale up with it — px values stay fixed and can break layouts or hurt readability.

What is the difference between rem and em?

rem is always relative to the root (html) element’s font size, so it stays predictable no matter how deeply nested an element is. em is relative to the current element’s own font size, which can compound unexpectedly in nested components.

Do browsers really default to 16px?

Yes, 16px is the standard default root font size in every major browser, though users can change it in their accessibility settings — which is exactly why rem is useful.

What root size should I enter if my CSS uses the 62.5% trick?

Enter 10. Setting html { font-size: 62.5% } makes 1rem equal 10px on a default browser, so 24px converts to 2.4rem. Enter the size your own stylesheet actually produces, not the browser default.

Do rem values work the same inside media queries?

Not quite. In media queries, rem and em are measured against the browser’s initial font size, not the font-size you set on html. A 48rem breakpoint is 768px on a default browser whatever your stylesheet says.

Related tools

Calculators

Aspect Ratio Calculator

Simplify ratios or lock one to solve dimensions.
Generators

CSS Border Radius Generator

Round corners and copy the border-radius CSS.
Calculators

Unit Converter

Convert between every common unit, instantly.