CSS Unit Converter

rem (root em) is relative to the root font size (html element) — it doesn't compound. Use rem for font sizes, padding, and spacing to create a consistent scale tied to the user's browser preference. em is relative to the element's own font size (or nearest parent with a font size). Use em when you want spacing proportional to local font size, like letter-spacing or icon sizing.

All major browsers default to 16px. This means 1rem = 16px by default. Some developers set html { font-size: 62.5% } which makes 1rem = 10px for easier mental math (1.6rem = 16px). The user can override the browser default in settings, so rem-based designs respect accessibility preferences while px-based designs do not.

vw (viewport width) and vh (viewport height) are useful for full-screen layouts, hero sections, and fluid typography. 1vw = 1% of the viewport width. A popular technique is fluid type: font-size: clamp(1rem, 2.5vw, 2rem) which grows from 1rem to 2rem as the viewport widens. Avoid vh for height on mobile due to the browser chrome changing size.

On screen: 1pt = 1.333px (since 1 inch = 96px screen, 1pt = 1/72 inch = 96/72 px). In print: pt is an absolute physical unit. Use px for web (screen), pt for print stylesheets. Most web fonts use px or rem. The 12pt default in Word equals 16px on screen.