How do I convert px to rem?

Divide the pixel length by the root font size. At the usual 16 px root, 24 px is 1.5rem, and the page prints the division it did, 24px / 16 px root = 1.5rem, under the answer. Type 24 in the px box and read the rem box, or set Answer in to rem to put the rem value on the big display with a CSS snippet under it.

Is the root font size always 16 px?

16 px is the common default, not a fact about your page. It is whatever the html element ends up with, so a stylesheet that sets html { font-size: 62.5% } against a 16 px parent lands on 10 px, and a visitor who raised their browser text size has a larger one. That is why the root is a box here: set it to 10 and 24 px becomes 2.4rem rather than 1.5rem.

What is the difference between rem and em?

rem divides by the root font size and em divides by the font size of the element's parent, the size it inherits where the rule applies. The same 24 px is 1.5rem at a 16 px root and 1.2em against a 20 px parent, so the two answers differ whenever the parent differs from the root. Going the other way, 1.5em against a 20 px parent is 30 px.

How do I convert px to em inside a nested element?

Put the size the element actually inherits in the parent box, not the root size. em compounds down a tree: 1.5em inside an element that is itself 1.5em of a 16 px root resolves against 24 px, so type 24 as the parent and 30 px comes back as 1.25em. This page converts against one parent size you name, and it cannot see your markup, so the nesting is yours to state.

Why does another converter give a different answer?

Almost always because it assumed a 16 px root and your page does not use one, or because it converted an em against the root instead of the parent. Nothing is assumed here. Both sizes are boxes, the assumption is printed next to the result, and changing a box changes the answer in front of you, so you can see exactly which number the conversion turned on.

Does it handle %, vw and vh as well?

Yes, each against a reference you state. A percentage here is a font-size percentage, a share of the parent, so 24 px against a 20 px parent is 120% and 62.5% of a 16 px parent is 10 px. vw and vh use the viewport width and height boxes: 640 px of a 1280 px viewport width is 50vw, and 24 px of an 800 px viewport height is 3vh. No media query is applied to any of them.

What happens to a length that does not divide evenly?

It is shown to six decimal places and labelled as rounded, rather than being quietly cut short. 5 px at a 3 px root comes back as 1.666667rem with a line saying the answer is rounded. Empty boxes, text that is not a number, a unit typed into the wrong box, a size of zero and anything past the limits, lengths up to 1,000,000,000 and context sizes up to 10,000 px, each get a message naming the box and what to type.

Does anything I type leave my browser?

No. The arithmetic runs on your own device, nothing is uploaded and there is no account. The only thing kept is your last entry, saved in this browser under a single key so the page opens where you left it, and Start over at the top of the page forgets it.

CSS Unit Converter

Type a length in the px, rem or em box and the other two follow, with the root font size and the parent font size sitting right there as boxes you set. That is the part other converters leave out: rem is only a pixel length once a root size is named and em only once a parent size is named, so 24 px is 1.5rem at a 16 px root and 1.2em against a 20 px parent, and the same 1.5rem is 24 px at a 16 px root but 30 px at a 20 px one. Neither size is read from your browser, which is why the assumption is printed beside every answer instead of being left implied. Set Answer in to %, vw or vh and that unit gets a box of its own, with the size it is measured against moved up beside the answer, because a percentage needs a parent font size and a viewport unit needs a viewport size: 24 px against a 20 px parent is 120%, and 640 px of a 1280 px viewport width is 50vw. Under the result you get the working written out, a CSS snippet you can paste, and a line of text drawn at the converted pixel size. Media queries are not applied, so nothing here changes with the width of the window you are reading it in.

REM1.5rem24 px at a 16 px root · the same length is 1.2em against a 20 px parent

rem

Root (px)

Answer in

Parent (px)

24px / 16 px root = 1.5rem. rem is measured against the 16 px root font size in the box, not a default read from your browser.

font-size: 1.5rem; /* 24px at a 16 px root */

Preview at 24 px

The quick brown fox jumps over the lazy dog

Three conversions, with their context

Each row states the size it was measured against, because the answer changes when that size does. Copy gives you the CSS value.

24 px, root 16 pxto rem
1.5rem
1.5rem, root 16 pxto px
24 px
24 px, parent 20 pxto em
1.2em

Accuracy. Exact arithmetic on the context you type: rem divides by the root font size in the box, em divides by the parent font size in the box. Both boxes are yours and neither is read from your browser, so a visitor who has changed their default text size will get a different px value than the one on screen. Media queries are not applied. A percentage here is a font-size percentage, a share of the same parent em uses, and vw and vh are measured against the viewport boxes above rather than the window you are reading this in.

Common questions

How do I convert px to rem?: Divide the pixel length by the root font size. At the usual 16 px root, 24 px is 1.5rem, and the page prints the division it did, 24px / 16 px root = 1.5rem, under the answer. Type 24 in the px box and read the rem box, or set Answer in to rem to put the rem value on the big display with a CSS snippet under it.
Is the root font size always 16 px?: 16 px is the common default, not a fact about your page. It is whatever the html element ends up with, so a stylesheet that sets html { font-size: 62.5% } against a 16 px parent lands on 10 px, and a visitor who raised their browser text size has a larger one. That is why the root is a box here: set it to 10 and 24 px becomes 2.4rem rather than 1.5rem.
What is the difference between rem and em?: rem divides by the root font size and em divides by the font size of the element's parent, the size it inherits where the rule applies. The same 24 px is 1.5rem at a 16 px root and 1.2em against a 20 px parent, so the two answers differ whenever the parent differs from the root. Going the other way, 1.5em against a 20 px parent is 30 px.
How do I convert px to em inside a nested element?: Put the size the element actually inherits in the parent box, not the root size. em compounds down a tree: 1.5em inside an element that is itself 1.5em of a 16 px root resolves against 24 px, so type 24 as the parent and 30 px comes back as 1.25em. This page converts against one parent size you name, and it cannot see your markup, so the nesting is yours to state.
Why does another converter give a different answer?: Almost always because it assumed a 16 px root and your page does not use one, or because it converted an em against the root instead of the parent. Nothing is assumed here. Both sizes are boxes, the assumption is printed next to the result, and changing a box changes the answer in front of you, so you can see exactly which number the conversion turned on.
Does it handle %, vw and vh as well?: Yes, each against a reference you state. A percentage here is a font-size percentage, a share of the parent, so 24 px against a 20 px parent is 120% and 62.5% of a 16 px parent is 10 px. vw and vh use the viewport width and height boxes: 640 px of a 1280 px viewport width is 50vw, and 24 px of an 800 px viewport height is 3vh. No media query is applied to any of them.
What happens to a length that does not divide evenly?: It is shown to six decimal places and labelled as rounded, rather than being quietly cut short. 5 px at a 3 px root comes back as 1.666667rem with a line saying the answer is rounded. Empty boxes, text that is not a number, a unit typed into the wrong box, a size of zero and anything past the limits, lengths up to 1,000,000,000 and context sizes up to 10,000 px, each get a message naming the box and what to type.
Does anything I type leave my browser?: No. The arithmetic runs on your own device, nothing is uploaded and there is no account. The only thing kept is your last entry, saved in this browser under a single key so the page opens where you left it, and Start over at the top of the page forgets it.

Exact arithmetic on the context you type: rem divides by the root font size in the box, em divides by the parent font size in the box. Both boxes are yours and neither is read from your browser, so a visitor who has changed their default text size will get a different px value than the one on screen. Media queries are not applied.