AZ Tools

CSS Unit Converter

Convert

Type a value in any CSS unit and see it instantly converted to all the others. Customize the root font size (default 16 px) for rem, the parent font size for em and %, and the viewport dimensions for vw and vh. Handy for translating designs into Tailwind / CSS values, sanity-checking responsive font sizes, or remembering how 1rem maps to px in a non-default setup.

Base sizes (root, parent, viewport)

All units

  • px16.000
  • rem1
  • em1
  • pt12.000
  • vw1.1111
  • vh1.7778
  • %100.00

How to use

  1. Type a value and pick a source unit (px, rem, em, pt, vw, vh, %).
  2. All other units update instantly.
  3. Expand the 'base sizes' panel to change root / parent font size or viewport.
  4. Copy the formatted value next to any unit.

Frequently asked questions

Why are rem and em different?
rem is relative to the document root (html font-size, default 16 px). em is relative to the parent element. They're equal only when the parent itself uses the root size.
Why does pt = 1.333 px?
CSS defines 1 in = 96 px and 1 pt = 1/72 in, so 1 pt = 96/72 ≈ 1.333 px.
Are vw / vh accurate?
They use the viewport width and height you enter in the base-sizes panel. Default 1440 × 900 matches a common desktop; change them to match your design canvas.
What about %?
% is computed against the parent font size (treated the same as em for typography). For other CSS properties, % depends on the property's containing block.

Related tools