How do I convert px to rem?

Divide the pixels by the root font size: rem = px / root. With the default 16 px root, 24px / 16 = 1.5rem. To go back, multiply: rem × root = px.

How many pixels is 1 rem?

1rem equals the font size of the root (html) element. Browsers default it to 16 px, so 1rem is 16px unless the page or the user changes it. At a 10 px root, 1rem is 10px; at 20 px it is 20px.

What is the difference between rem and em?

rem is always relative to the root element’s font size, so it stays the same everywhere on the page. em is relative to a font size that depends on where it is used: in the font-size property it is the parent element’s font size, and in every other property (padding, margin, width) it is the element’s own font size. Nested em values therefore compound; rem values do not.

What do I enter as the parent font size?

For an em or % value in font-size, enter the parent’s computed font size. For em in any other property, enter the element’s own font size. The tool uses one number for both and for %, read as a percentage of that font size, like font-size: 150%.

How many pixels is a point?

1pt is 1/72 of an inch and the CSS inch is 96 px, so 1pt = 96/72 = 4/3 px, about 1.3333px. That makes 12pt equal to 16px and 18pt to 24px. The pixel here is the CSS reference pixel, not a physical screen dot.

Should I use rem instead of px for font sizes?

Usually yes. A px font size ignores the default font size a visitor sets in their browser, while rem scales with it, which helps people who need larger text (WCAG 2.2 success criterion 1.4.4 requires text to be resizable up to 200%). Browser zoom scales px values too, so the benefit is mainly for the user’s font size preference.

Is the 62.5% root trick a good idea?

Setting html { font-size: 62.5% } makes 1rem = 10px at the default, which is easy to calculate. Everything not sized in rem (including body text if you forget to reset it) then shrinks, and the root is no longer the visitor’s preference unless you keep it in percent. Set the root in % or leave it alone, then enter the real value here.

How does the batch mode decide what to convert?

It converts only numbers directly followed by px, so 10px becomes 0.625rem at a 16 px root. Comments, strings, url(...) and names such as --gap-10px are copied unchanged, as is every other unit and all whitespace. A value of 0 is always kept, and values up to your "Skip values up to" size (1 px by default, for borders) stay in px.

Why are @media queries not converted?

In a media query, rem and em do not use your html font size; they use the browser’s initial font size (16 px by default), as Media Queries Level 4 defines. Converting 768px with a 10 px root would give 76.8rem, which a query reads as 1229px. So conditions in @media and @container are left alone unless you tick the option to convert them, and then they are divided by 16, not by your root size.

How are the results rounded?

Values are rounded to the nearest, after removing floating-point noise, to the number of places you pick (0 to 8, default 4). "Trim trailing zeros" shows 1.5 instead of 1.5000. Rounding can move a converted value slightly, so 10px at 16 px is exact (0.625rem) but 1px is 0.0625rem, and 5px with 2 places becomes 0.31rem.

Does anything I paste leave my browser?

No. The conversion runs on your device and nothing you enter or paste is uploaded or stored.

PX to REM Converter

24 px is 1.5 rem at the browser default root font size of 16 px (divide the pixels by the root size). The same length is 1.5 em, 18 pt and 150% of a 16 px font size. Change the root or parent font size, type in any unit field, or paste CSS to turn every px value into rem.

Updated 2026-10-16Runs in your browser: nothing you enter is uploadedHow this tool works

Convert a length

Type in any box and the others follow. Sizes are in CSS pixels; 1pt is 4/3 px.

PX to REM table

8 to 96 px at the root font size and rounding above.

px	rem	pt
8px	0.5rem	6pt
10px	0.625rem	7.5pt
12px	0.75rem	9pt
14px	0.875rem	10.5pt
16px	1rem	12pt
18px	1.125rem	13.5pt
20px	1.25rem	15pt
24px	1.5rem	18pt
28px	1.75rem	21pt
32px	2rem	24pt
36px	2.25rem	27pt
40px	2.5rem	30pt
48px	3rem	36pt
56px	3.5rem	42pt
64px	4rem	48pt
72px	4.5rem	54pt
80px	5rem	60pt
96px	6rem	72pt

Convert CSS in bulk

Paste CSS to turn every px value into rem at the root size above. Everything else stays exactly as it is.

CSS

Skip values up to (px)

Also convert @media and @container (at 16 px)

0 is always kept. Values from 0 up to the size above (1 px by default, for borders) stay in px. Comments, strings and url() are never changed.

Result

.card {
  padding: 1.5rem 1rem;
  margin: 0 auto;
  border: 1px solid #ccc;
  font-size: 1.125rem;
  /* 10px stays: comments are not touched */
}
@media (min-width: 768px) {
  .card { max-width: 40rem; }
}

4 px values converted to rem at a 16 px root; 1 value kept (0 or at most 1 px).

Common sizes at a 16 px and a 10 px root

rem is the pixel size divided by the root font size. A 62.5% root (10 px) makes the math easy but is not the default.
Pixels	rem at 16 px root	rem at 10 px root	Points
10px	0.625rem	1rem	7.5pt
12px	0.75rem	1.2rem	9pt
14px	0.875rem	1.4rem	10.5pt
16px	1rem	1.6rem	12pt
18px	1.125rem	1.8rem	13.5pt
20px	1.25rem	2rem	15pt
24px	1.5rem	2.4rem	18pt
32px	2rem	3.2rem	24pt
48px	3rem	4.8rem	36pt

rem to px at common root sizes

rem	16 px root	18 px root	20 px root	10 px root
0.5rem	8px	9px	10px	5px
0.75rem	12px	13.5px	15px	7.5px
1rem	16px	18px	20px	10px
1.25rem	20px	22.5px	25px	12.5px
1.5rem	24px	27px	30px	15px
2rem	32px	36px	40px	20px
3rem	48px	54px	60px	30px
4rem	64px	72px	80px	40px

CSS absolute length units in pixels

Fixed by CSS Values and Units Level 4: the CSS inch is exactly 96 px, whatever the screen.
Unit	Name	Definition	Pixels
in	Inches	1in = 2.54cm = 96px	96px
cm	Centimeters	1cm = 96px / 2.54	37.7953px
mm	Millimeters	1mm = 1/10 of 1cm	3.7795px
Q	Quarter-millimeters	1Q = 1/40 of 1cm	0.9449px
pc	Picas	1pc = 12pt = 1/6 of 1in	16px
pt	Points	1pt = 1/72 of 1in	1.3333px
px	Pixels	1px = 1/96 of 1in	1px

How to convert px to rem

Set the root font size. Leave Root font size at 16 px (the browser default) or enter the font-size your html element really uses, for example 10 for a 62.5% root.
Type the value in any field. Enter 24 in Pixels and the Root em field shows 1.5 rem. You can also type in rem, em, pt, % or the viewport units; the other fields follow.
Set the parent font size and viewport for em, % and vw/vh. em and % are relative to a parent (or the element’s own) font size, and vw and vh to the viewport, so enter those sizes to get exact values.
Pick the rounding and copy. Choose how many decimal places to keep and whether to trim trailing zeros, then press Copy next to the unit you want. The value is copied with its unit.
Or convert a whole stylesheet. Paste CSS into the batch box. Every px value becomes rem; everything else stays byte for byte. Raise "Skip values up to" to keep small values such as 1px borders.

Frequently asked questions

How do I convert px to rem?: Divide the pixels by the root font size: rem = px / root. With the default 16 px root, 24px / 16 = 1.5rem. To go back, multiply: rem × root = px.
How many pixels is 1 rem?: 1rem equals the font size of the root (html) element. Browsers default it to 16 px, so 1rem is 16px unless the page or the user changes it. At a 10 px root, 1rem is 10px; at 20 px it is 20px.
What is the difference between rem and em?: rem is always relative to the root element’s font size, so it stays the same everywhere on the page. em is relative to a font size that depends on where it is used: in the font-size property it is the parent element’s font size, and in every other property (padding, margin, width) it is the element’s own font size. Nested em values therefore compound; rem values do not.
What do I enter as the parent font size?: For an em or % value in font-size, enter the parent’s computed font size. For em in any other property, enter the element’s own font size. The tool uses one number for both and for %, read as a percentage of that font size, like font-size: 150%.
How many pixels is a point?: 1pt is 1/72 of an inch and the CSS inch is 96 px, so 1pt = 96/72 = 4/3 px, about 1.3333px. That makes 12pt equal to 16px and 18pt to 24px. The pixel here is the CSS reference pixel, not a physical screen dot.
Should I use rem instead of px for font sizes?: Usually yes. A px font size ignores the default font size a visitor sets in their browser, while rem scales with it, which helps people who need larger text (WCAG 2.2 success criterion 1.4.4 requires text to be resizable up to 200%). Browser zoom scales px values too, so the benefit is mainly for the user’s font size preference.
Is the 62.5% root trick a good idea?: Setting html { font-size: 62.5% } makes 1rem = 10px at the default, which is easy to calculate. Everything not sized in rem (including body text if you forget to reset it) then shrinks, and the root is no longer the visitor’s preference unless you keep it in percent. Set the root in % or leave it alone, then enter the real value here.
How does the batch mode decide what to convert?: It converts only numbers directly followed by px, so 10px becomes 0.625rem at a 16 px root. Comments, strings, url(...) and names such as --gap-10px are copied unchanged, as is every other unit and all whitespace. A value of 0 is always kept, and values up to your "Skip values up to" size (1 px by default, for borders) stay in px.
Why are @media queries not converted?: In a media query, rem and em do not use your html font size; they use the browser’s initial font size (16 px by default), as Media Queries Level 4 defines. Converting 768px with a 10 px root would give 76.8rem, which a query reads as 1229px. So conditions in @media and @container are left alone unless you tick the option to convert them, and then they are divided by 16, not by your root size.
How are the results rounded?: Values are rounded to the nearest, after removing floating-point noise, to the number of places you pick (0 to 8, default 4). "Trim trailing zeros" shows 1.5 instead of 1.5000. Rounding can move a converted value slightly, so 10px at 16 px is exact (0.625rem) but 1px is 0.0625rem, and 5px with 2 places becomes 0.31rem.
Does anything I paste leave my browser?: No. The conversion runs on your device and nothing you enter or paste is uploaded or stored.

How it works

Every length is converted through pixels. Absolute units follow CSS Values and Units Level 4: 1in = 2.54cm = 96px and 1pt = 1/72in, so 1pt = 4/3px. rem uses the root element’s font size, em and % the font size you enter as the parent, and 1vw and 1vh are 1% of the viewport width and height you enter. A value in a field is multiplied by the pixels per unit, then divided by the pixels per target unit. Results are rounded to the chosen decimal places in base 10 after dropping floating-point noise (15 significant digits), then optionally trimmed of trailing zeros. Batch mode scans the CSS once from left to right: comments, quoted strings and url() are copied as they are; a number ending in px that is not part of a longer name is divided by the root size and written as rem; the conditions of @media, @container and @custom-media are skipped unless you opt in, because rem there refers to the initial font size (when opted in they are divided by 16). The example CSS gives 4 px values converted to rem at a 16 px root. Nothing is sent anywhere.

Sources

All tools Home & DIY calculators