Skip to content
Units

Units

Convert CSS lengths in the browser. Pick a group, edit any field, and the others follow. Rem uses the root font size. Em uses the parent. Nothing you type is uploaded.

Convert

Edit any field. Rem uses the root font size. Em uses the parent font size.

Base sizes

Used for rem. Browsers start at 16.

Used for em. Matches rem while this equals the root.

Copies the pixels field.

Common sizes

16 px, 1 rem, 1 em

Formulas

Rem, px, and em

  • rem = px / root
  • px = rem × root
  • em = px / parent
  • px = em × parent
  • Zero and negative lengths convert. A negative font-size is invalid in CSS.

Absolute lengths

  • 1in = 96px
  • 1in = 2.54cm = 25.4mm
  • 1pt = 1/72in = 1.3333px
  • 1pc = 12pt = 16px
  • The inch here is the CSS reference pixel, not a physical inch on every screen.

Percent and viewport

  • % = px / parent × 100
  • vw = px / viewport width × 100
  • vh = px / viewport height × 100
  • vmin uses the shorter viewport side. vmax uses the longer one.

ch, ex, and lh

  • ch = px / width of “0”
  • ex = px / x-height
  • lh = px / line-height
  • Defaults are 8px, 8px, and 24px. They are assumptions. Measure the font you actually ship.

Resolution

  • 1dppx = 96dpi
  • dpcm = dpi / 2.54
  • dpi = dpcm × 2.54

Worked examples: px to rem, rem to px, em to px.

Questions

How do you convert px to rem?

Divide the pixel value by the root font size. rem = px / root. At the browser default of 16px, 16px is 1rem and 18px is 1.125rem.

How do you convert rem to px?

Multiply the rem value by the root font size. px = rem × root. 1.5rem at a 16px root is 24px.

What is the difference between rem and em?

rem is relative to the root element’s font size, which is the html element. em is relative to the parent element’s font size. This converter uses the root field for rem and the parent field for em. When both are 16, the numbers match. If the parent is 20px, 20px is 1em and still 1.25rem.

Why is the root font size 16 by default?

Browsers use 16px as the default root font size unless a stylesheet changes it. If your site sets a different size on html, put that computed pixel size in the root field.

How do px and em convert?

em = px / parent, and px = em × parent. A length in em scales with that parent. It does not follow the root unless the parent font size itself came from the root.

Does this change my website’s font size?

No. The fields are a calculator in your browser. Nothing on this page edits a stylesheet.

How do absolute CSS units convert to px?

CSS treats 1in as 96px, and 1cm as 96 divided by 2.54. 1pt is 1/72 of that inch, so 12pt is 16px. 1pc is 12pt, so 6pc is 1in. These are reference pixels. A ruler held against a monitor often will not match.

How do vw, vh, and percent convert?

vw is a percentage of the viewport width you type. vh uses the height. 10vw on a 1000px-wide viewport is 100px. vmin uses the shorter side and vmax the longer one. Percent uses the parent size, not the viewport and not the font size.

What do ch, ex, and lh assume here?

ch is the width of the 0 glyph. ex is the x-height. lh is the element’s used line-height. This page cannot see your font, so the defaults are labeled guesses: 8px for ch, 8px for ex, and 24px for lh, which is 1.5 times a 16px font. Replace them with measurements from the font you ship.

How do dpi, dppx, and dpcm relate?

In CSS, 1dppx equals 96dpi. dpcm is dpi divided by 2.54, so 96dpi is about 37.7953dpcm. A device pixel ratio of 2 is 2dppx, which is 192dpi.