📏 CSS Unit Converter

Convert CSS length units instantly — px, em, rem, pt, pc, in, cm, mm, %, vw, vh, vmin, vmax. Set the base font size and viewport dimensions for accurate relative units.

Value

From unit

Base font size (px) — for em / rem

Viewport width (px) — for vw / %

Viewport height (px) — for vh

About the CSS Unit Converter

This converter runs entirely in your browser. Type any value, pick its unit, and instantly see the equivalent in every other CSS length unit. Relative units (em, rem, %) are computed against the base font size and viewport dimensions you specify, so you can match your actual layout.

CSS length units reference

px (pixels) — Absolute unit. 1 CSS pixel ≈ 1/96 inch. The most predictable unit for screen layouts.
em — Relative to the element's parent font-size. 2em = twice the parent font size. Compounds when nested.
rem (root em) — Relative to the root (<html>) font size. Stays consistent no matter how deep it's nested.
pt (points) — 1 pt = 1/72 inch. Common in print stylesheets.
pc (picas) — 1 pc = 12 pt. Used in typography and print.
in / cm / mm — Physical units. 1in = 96px = 2.54cm = 25.4mm in CSS.
% — Relative to the parent element's width (for most properties). Handy for fluid layouts.
vw / vh — 1 unit = 1% of the viewport's width / height. Great for full-screen responsive designs.
vmin / vmax — 1 unit = 1% of the smaller (vmin) or larger (vmax) viewport dimension.

How to use the converter

Enter the value you want to convert and select its unit.
Set the base font size (default 16px — the browser default) for accurate em/rem results.
Set the viewport width and height to match your target screen for vw/vh/vmin/vmax.
Read all equivalents in the results table, or copy the px / rem value with one click.

Common conversions (at 16px base)

1rem = 16px · 0.5rem = 8px · 2rem = 32px
1em = 16px (when parent font-size is 16px)
1pt = 1.333px · 12pt = 16px
1in = 96px · 1cm = 37.795px · 1mm = 3.7795px
1pc = 16px

Frequently asked questions

Why are my em values different from rem? em is relative to the parent element's font size, while rem is always relative to the root font size. If the parent has a different font size, em and rem diverge. This converter assumes the parent equals the base font size you set.

What base font size should I use? 16px is the default in every major browser. Use that unless you've explicitly changed your root font size.

Why is % based on width? In CSS, percentages for width, margin, and padding resolve against the parent's width. Percentages for height resolve against the parent's height. This converter uses width for %, which is the more common case.

Are physical units (in, cm, mm) accurate on screen? CSS maps them to pixels at 96px per inch regardless of the actual screen density. They're consistent but may not match a physical ruler on high-DPI displays.