How do I convert px to rem or rem to px?

Divide px by the root font size to get rem; multiply rem by that size to get px. At a 16 px root, 24 px is 1.5rem and 1.5rem is 24 px. Type into the matching unit box and choose the answer unit. Change Root if your page uses a different computed root size.

How do I convert px to em or em to pixels?

For font-size, em uses the parent's computed font size. At a 20 px parent, 24 px is 1.2em and 1.5em is 30 px. Set Parent to the size the element inherits. For letter-spacing or line-height, select that CSS property and enter the element's own computed font size instead.

Can I convert letter spacing or line height from px to em?

Yes. Select letter-spacing or line-height under CSS property. Set Element font to the computed font size of the element being styled, then enter the px length and choose em. A 2 px letter spacing at a 20 px element font is 0.1em; the copied declaration is letter-spacing: 0.1em. The text-size preview is hidden for these properties.

How do I convert line height from px to rem?

Select line-height, enter the pixel length, set Root to the computed root font size, and choose rem. A 24 px line height at a 16 px root is 1.5rem. Copy CSS gives a line-height declaration. The converter handles length units and percentages, not unitless line-height multipliers.

What do %, vw and vh use as a reference?

Choose the answer unit to show its input and reference controls. A font-size percentage uses the parent font; a line-height percentage uses the element font. Letter-spacing does not accept percentages. At a 20 px font reference, 24 px is 120%. At a 1280 px viewport width, 640 px is 50vw. Viewport sizes are typed values; no media query is applied.

Is the root font size always 16 px?

No. The root is the computed font size of the html element. A stylesheet and browser text preferences can change it. Enter that size in Root; this page does not inspect your stylesheet. When Root is 10 px, 24 px is 2.4rem.

When should I use px, rem or em?

px specifies CSS pixels. rem follows the root font size. em follows the parent font size for font-size, and the element font size for other length properties. Use the reference that should control the value in your design, and compare the results here. A CSS pixel is not necessarily one physical screen pixel.

How are decimal and invalid values handled?

Most results display up to six decimal places; very small results keep six significant digits with extra decimal places. Rounded answers are marked. Values too small to represent produce an error. Use a decimal point, such as 0.75rem. Empty or invalid values, mismatched unit suffixes and nonpositive font references produce specific errors. Negative lengths can be calculated, but font-size and line-height CSS values cannot be negative.

Are my values saved or uploaded?

Calculations run in this browser. Values and settings you change are remembered locally when storage is available. There is no account or upload. A page preset keeps its supplied settings until you change those controls.

CSS Unit Converter

Type a value in the px, rem or em box and the other values update. Set the root font size for rem and the parent font size for font-size in em. Select letter-spacing or line-height to use the element's own font size for em instead. Choose the answer unit, inspect the formula and copy the value or CSS declaration. Font and viewport references are supplied by you.

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

px

rem

em

Root (px)

CSS property

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. Arithmetic on the sizes you type: px to rem divides by the root font size in the box; px to em divides by the parent font size in the box for font-size, or by the element font size for spacing and line height. Displayed decimals can be rounded. Media queries are not applied. A percentage uses the font reference in the box for font-size or line-height; letter-spacing does not accept percentages. Viewport units use the sizes you supply. Negative results are arithmetic values; font-size and line-height declarations require nonnegative values.

Common questions

How do I convert px to rem or rem to px?: Divide px by the root font size to get rem; multiply rem by that size to get px. At a 16 px root, 24 px is 1.5rem and 1.5rem is 24 px. Type into the matching unit box and choose the answer unit. Change Root if your page uses a different computed root size.
How do I convert px to em or em to pixels?: For font-size, em uses the parent's computed font size. At a 20 px parent, 24 px is 1.2em and 1.5em is 30 px. Set Parent to the size the element inherits. For letter-spacing or line-height, select that CSS property and enter the element's own computed font size instead.
Can I convert letter spacing or line height from px to em?: Yes. Select letter-spacing or line-height under CSS property. Set Element font to the computed font size of the element being styled, then enter the px length and choose em. A 2 px letter spacing at a 20 px element font is 0.1em; the copied declaration is letter-spacing: 0.1em. The text-size preview is hidden for these properties.
How do I convert line height from px to rem?: Select line-height, enter the pixel length, set Root to the computed root font size, and choose rem. A 24 px line height at a 16 px root is 1.5rem. Copy CSS gives a line-height declaration. The converter handles length units and percentages, not unitless line-height multipliers.
What do %, vw and vh use as a reference?: Choose the answer unit to show its input and reference controls. A font-size percentage uses the parent font; a line-height percentage uses the element font. Letter-spacing does not accept percentages. At a 20 px font reference, 24 px is 120%. At a 1280 px viewport width, 640 px is 50vw. Viewport sizes are typed values; no media query is applied.
Is the root font size always 16 px?: No. The root is the computed font size of the html element. A stylesheet and browser text preferences can change it. Enter that size in Root; this page does not inspect your stylesheet. When Root is 10 px, 24 px is 2.4rem.
When should I use px, rem or em?: px specifies CSS pixels. rem follows the root font size. em follows the parent font size for font-size, and the element font size for other length properties. Use the reference that should control the value in your design, and compare the results here. A CSS pixel is not necessarily one physical screen pixel.
How are decimal and invalid values handled?: Most results display up to six decimal places; very small results keep six significant digits with extra decimal places. Rounded answers are marked. Values too small to represent produce an error. Use a decimal point, such as 0.75rem. Empty or invalid values, mismatched unit suffixes and nonpositive font references produce specific errors. Negative lengths can be calculated, but font-size and line-height CSS values cannot be negative.
Are my values saved or uploaded?: Calculations run in this browser. Values and settings you change are remembered locally when storage is available. There is no account or upload. A page preset keeps its supplied settings until you change those controls.

Arithmetic on the sizes you type: px to rem divides by the root font size in the box; px to em divides by the parent font size in the box for font-size, or by the element font size for spacing and line height. Displayed decimals can be rounded. Media queries are not applied.