CSS Unit Converter (px, rem, em, vw, vh)

Convert CSS units between px, rem, em, vw and vh.

Input
Convert


PX vs REM vs EM vs VW vs VH

Unit Relative to Best for Avoid for
px Device pixel Borders, icons Typography
rem Root font-size Text, spacing Component isolation
em Parent font-size Components Deep nesting
vw Viewport width Fluid layouts Body text
vh Viewport height Full-height sections Mobile UI chrome


Recommended usage

What is px?

px is an absolute CSS unit.

  • Does not scale with user font settings
  • Ideal for borders, hairlines and icons
  • Not recommended for typography

What is rem?

rem (root em) is relative to the root element’s font-size.

  • Scales consistently across the document
  • Respects accessibility settings
  • Recommended for typography and spacing

Default browser root font-size is 16px.

What is em?

em is relative to the font-size of the current element.

  • Useful for component-scoped scaling
  • Scales children together
  • Can compound when nested

What are vw and vh?

Viewport-relative units.

  • 1vw = 1% of viewport width
  • 1vh = 1% of viewport height
  • Useful for fluid layouts and hero sections

Avoid using viewport units for small text sizes.

Common mistakes with CSS units
  • rem behaves differently inside media queries
  • em compounds when deeply nested
  • vh changes on mobile when browser UI appears
  • vw text can become unreadable on large screens



Example CSS usage

html {
  font-size: 16px;
}

h1 {
  font-size: 2rem;
}

.container {
  padding: 4vw;
}


How this CSS unit converter works

Other tools