Hunt
Skip to content

PX to REM Converter

Type a pixel value to get rem, or rem to get pixels, for the default 16px root font size or your own. A table lists common sizes, and you can paste CSS to convert every px value at once, leaving 1px borders alone if you want.

Runs in your browser
px (browsers default to 16)pxrem

Common values

1px0.0625rem
2px0.125rem
4px0.25rem
6px0.375rem
8px0.5rem
10px0.625rem
12px0.75rem
14px0.875rem
15px0.9375rem
16px1rem
18px1.125rem
20px1.25rem
24px1.5rem
28px1.75rem
30px1.875rem
32px2rem
36px2.25rem
40px2.5rem
48px3rem
56px3.5rem
64px4rem
72px4.5rem
80px5rem
96px6rem

Convert CSS

CSS with px values

CSS with rem values

Why rem

rem is relative to the root element's font size, which follows the user's browser setting. Sizes in rem grow when someone increases their default font size for readability; sizes in px don't. Using rem for font sizes, and often for spacing, makes a layout respect that choice.

The conversion is rem = px ÷ root font size. With the default 16px root, 24px is 1.5rem and 14px is 0.875rem.

How to use the PX to REM Converter

  1. Set the root font size, if it isn't 16px.
  2. Type pixels to get rem, or rem to get pixels.
  3. Or paste CSS to convert every px value, and copy the result.

Examples

Pixels to rem

Input
24px
Output
1.5rem

Rem to pixels

Input
0.875rem
Output
14px

A CSS rule, hairline kept

Input
.card { padding: 12px 24px; border: 1px solid #ddd; font-size: 15px; margin: 0px; }
Output
.card { padding: 0.75rem 1.5rem; border: 1px solid #ddd; font-size: 0.9375rem; margin: 0; }

Keep 1px borders

A 1px border converted to 0.0625rem becomes thicker when the font size grows, and may round to a blurry width. Hairlines are usually better left in px: turn on Keep 1px when converting CSS.

Options

Root font size
The font-size of the html element in px. Browsers default to 16; some sites set 10 to make the maths easier.
Keep 1px
When converting CSS, leave 1px values (usually borders) in px.

Limitations

  • CSS conversion replaces px numbers in values; it doesn't parse selectors, and leaves strings, comments and url() alone.
  • Media queries are converted too; rem in media queries always uses the browser's default size, not your root setting.

Frequently asked questions

How many pixels is 1rem?

16px by default, because browsers set the root font size to 16px. If your CSS sets html { font-size: 62.5% }, 1rem is 10px.

Should I use rem or em?

Use rem for most sizes: it's always relative to the root, so it's predictable. em is relative to the element's own font size, which is useful for spacing that should scale with a component's text, such as button padding.

Is anything uploaded?

No. Conversions happen in your browser; nothing you paste is sent anywhere.