CSS Unit Converter

Common Conversions

With the default settings (root font size 16px, viewport 1920px):

• 16px = 1rem = 1em = 0.833333vw
• 1rem = 16px
• 100vw = 1920px = 120rem

When to Use Each Unit

• px — a CSS pixel, not a device pixel: on a 2× screen one CSS pixel covers four device pixels, and page zoom enlarges it. It does not follow the browser’s font size setting. Good for borders, shadows, and fine details.
• rem — scales with the user’s browser font size setting, as long as the root font size is not fixed in px. Preferred for font sizes and spacing in accessible designs.
• em — relative to the element’s own font size (for font-size itself, the parent’s). Useful for component-scoped sizing.
• vw — relative to viewport width. Good for fluid typography and full-bleed layouts.

The Formulas

With a root font size of 16px and a 1920px viewport (the defaults):

rem = px ÷ root font size          24px ÷ 16 = 1.5rem
px  = rem × root font size         1.5rem × 16 = 24px
vw  = px ÷ viewport width × 100    24px ÷ 1920 × 100 = 1.25vw
px  = vw × viewport width ÷ 100    1.25vw × 1920 ÷ 100 = 24px

Two More Examples

Phone layout. Set Viewport Width to 390 and convert 16px: the results are 1rem, 1em and 4.10256vw. Going the other way, 5vw on that viewport is 19.5px (1.21875rem). The same 5vw on the default 1920px viewport is 96px, which is why a pure vw font size is too small on phones and too large on desktops; the CSS clamp calculator builds a value with a floor and a ceiling instead.

A 10px root. Some projects set html { font-size: 62.5%; } so that 1rem is 10px with the default browser setting. Enter 10 as Root Font Size and 24px becomes 2.4rem. The 62.5% form keeps the user’s font setting in play: a reader who chose 20px in the browser gets a 12.5px root and the same 2.4rem renders at 30px. Writing html { font-size: 10px; } instead fixes the root, so rem values no longer follow that setting.

Why em Can Surprise You

The converter treats em like rem, both relative to the root font size. In a real page, em in font-size is relative to the parent’s font size, so nested em values multiply (MDN):

html  { font-size: 16px; }
.card { font-size: 1.25em; }   /* 20px */
.card .title { font-size: 1.25em; }   /* 25px: 1.25 × 20px */
.card .title small { font-size: 1.25em; }   /* 31.25px */

With rem instead, every level stays at 20px. Use em for things that should scale with their own text, such as padding inside a button, and rem for font sizes and layout spacing.

Limits

• em is converted as rem. The result is right only when the element’s font size equals the root font size.
• Four units only: px, rem, em, and vw. vh, %, pt, and ch are not converted.
• vw uses the width you enter. The default 1920px is a desktop width; enter your target width (for example 390 for a phone) to get useful vw values.
• Results are rounded to 6 significant digits, for example 0.833333vw for 16px at 1920px.
• vw counts the scrollbar. In desktop browsers with a classic scrollbar, 100vw is the window width including the vertical scrollbar, so 100vw can be wider than the page’s content area and cause a horizontal scrollbar.
• Only numbers are accepted in the Value field; typing 16px with the unit is not parsed. Choose the unit from the list instead. An empty or zero Root Font Size or Viewport Width uses 16px or 1920px; a negative one shows an error and clears the results.