CrispKit Runs on your device

PX to REM Converter

Turn pixels into rem, rem into pixels, or pixels into em, at whatever root font size your site uses. Type in any box and the others follow. Below the converter: a table for your base size, and a bulk converter that rewrites every px in a block of CSS.

  1. 1Set the base size
  2. 2Type a value
  3. 3Copy

1Set the base font size

Base font sizes

2Type a value in any box

Values

24px ÷ 16px = 1.5rem

Everything runs in your browser: values and CSS you paste are never sent anywhere. We count visits and finished downloads (tool name only) with analytics that sets no cookies.

PX to REM table at 16px

Pixelsrem

3Convert a whole block of CSS

Bulk CSS converter options

Comments, quoted strings and url() are never changed. em values are left alone because they depend on each element's own font size.

How to convert px to rem

Divide the pixels by the root font size: rem = px ÷ root font size. With the usual 16 px root, 24 px ÷ 16 = 1.5rem. To go back, multiply: px = rem × root font size, so 1.5rem × 16 = 24 px. For em, divide by the font size of the parent element instead of the root.

  1. Set the base. Leave 16 px unless your CSS sets a different font-size on html (for example 62.5%, which is 10 px when the browser default is 16 px).
  2. Type a value. Type pixels, rem or em; the other two update as you type.
  3. Copy it. Each Copy button copies the value with its unit, ready to paste into CSS.

What rem and em mean

The W3C's CSS Values and Units spec defines rem as "equal to the computed value of the em unit on the root element", and em as equal to the computed font size "of the element on which it is used". So rem always follows the font size of html, while em changes from element to element. A px is an absolute unit: the same spec sets 1px to 1/96th of an inch.

Because rem follows the root font size, a page sized in rem grows when a reader turns up the default font size in their browser settings, while one sized in px does not.

Is 1rem always 16px?

No. 1rem equals the root font size. With browser settings left alone, Chromium, Firefox and WebKit (the engine behind Safari) each reported a root font size of 16 px in our test on 27 October 2026, so 1rem = 16 px and 1px = 0.0625rem. If a reader changes their default font size, or your CSS sets html { font-size: … }, 1rem changes with it.

Why the bulk converter skips media queries

Media Queries Level 4 says "relative length units in media queries are based on the initial value", so a rem inside @media ignores any font-size you set on html. If your root font size is not 16 px, converting breakpoints with it would move them. Tick "Also convert inside @media" only if your base is the browser default.

Sources, read 27 October 2026: W3C, CSS Values and Units Module Level 4 (Working Draft, 12 March 2024), sections 6.1.1 and 6.2; W3C, Media Queries Level 4 (Candidate Recommendation Draft, 19 February 2026), section 1.3. The 16 px default was measured by us in three browser engines, not taken from a spec.

FAQ

What is 1px in rem?

At a 16 px root font size, 1px = 1 ÷ 16 = 0.0625rem. At a 10 px root it is 0.1rem. Set your base above and the table shows the rest.

How many px is 1rem?

As many as the root font size: 16 px with default browser settings, but more or less if the reader or your CSS changes the root font size.

Should I use rem or em?

Use rem when a size should follow the page's base font size everywhere, such as spacing and type scales. Use em when it should follow the element's own font size, such as padding on a button that grows with its text.

How do I convert a whole stylesheet from px to rem?

Paste it into "Convert a whole block of CSS", choose px → rem and press Copy the converted CSS. 1px borders are left as they are unless you untick that option, and media queries are skipped by default for the reason above.

What is the 62.5% trick?

Setting html { font-size: 62.5% } makes the root 10 px when the browser default is 16 px, so 1.4rem = 14 px. Press the 10 px preset to convert for that setup.

Is my CSS sent anywhere?

No. The conversion runs in your browser. You can check: open your browser's developer tools, go to the Network tab, and use the tool. The page counts visits and copies (tool name only) with analytics that sets no cookies, and never sends the values or CSS you type (see privacy).

More free tools