Skip to content
Dozo Tools

CSS unit converter

Convert CSS lengths in the browser. Pick a group, edit any field, and the others follow. Nothing you type is uploaded.

Rem, px, and em

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.

Start typing a value in any field above.

Copies the pixels field.

Common sizes

Start typing a value.

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, px to em.

Questions

What does this page convert?

Five groups in one tool: rem/px/em, absolute lengths, percent and viewport, ch/ex/lh, and dpi/dppx/dpcm. Pick a tab. The fields in the other tabs stay as you left them.

Does anything I type get uploaded?

No. The conversion runs in the browser. There is no account and no saved history.

How do the tabs work?

Each tab is one unit group. Switching tabs does not clear the other groups.

Where are the px, rem, and em walkthroughs?

On px to rem, rem to px, em to px, and px to em. Those pages use the same root and parent fields as the Rem/Px/Em tab.

Does this change my site’s font size?

No. The fields are a calculator. 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.