CSS Unit Converter

Enter a length in any CSS unit and see it in every other — px, rem, em, %, pt, pc, in, cm, mm, vw, vh, vmin, vmax. Set the root and parent font sizes and the viewport dimensions so the relative units come out right for your context, then click any value to copy it. Calculated instantly in your browser.

How to use the CSS Unit Converter

Type a value, pick the unit it's in, and the table below shows the equivalent in every CSS length unit. Click any result to copy it with its unit attached. The absolute units (px, pt, pc, in, cm, mm) are fixed conversions — CSS defines one inch as 96 reference pixels — so those never change. The relative units depend on context, which is what the settings row controls: rem uses the root font-size, em and % use the parent font-size, and the viewport units use the width and height you enter.

The defaults match a typical setup — a 16px root, a 16px parent, and a 1920×1080 viewport — so for most work you can ignore the settings and just convert. Adjust them when your situation differs: set the parent font-size to 20 if you're working inside a larger text block, or change the viewport to a phone's dimensions to see what a vw value resolves to on mobile. The common job, turning a pixel value into rem for accessible typography, is one entry away.

Absolute vs. relative CSS units

CSS length units fall into two families. Absolute units — px, pt, pc, in, cm, mm — have fixed ratios to one another. CSS pins them to a reference pixel where 1 inch equals 96px, so 1pt is 1/72 of an inch (about 1.333px) and 1pc is 12pt (16px). These are predictable but rigid: a size set in px doesn't respond to a user's font-size preference or the size of the screen. Relative units — rem, em, %, and the viewport units — are defined in terms of something else, which is exactly what makes them adapt.

The two relative units people mix up most are em and rem. Both are multiples of a font-size, but em is relative to the current element's (effectively its parent's) font-size, so it compounds when nested, while rem is always relative to the root element's font-size, so it stays stable no matter how deeply nested an element is. That stability is why rem has become the default choice for spacing and typography: set the root to 16px and a 1.5rem heading is 24px everywhere, but it also scales automatically if the user increases their browser's default font size — which px values stubbornly ignore. The percentage unit behaves like em for font-size but is relative to the containing block for most other properties.

The viewport units — vw, vh, vmin, and vmax — are each 1% of a viewport dimension: width, height, the smaller side, and the larger side respectively. They enable layouts and type that scale with the screen, which is the basis of fluid typography (often combined with clamp() to set floor and ceiling sizes). Converting between all these units by hand means juggling the 96px-per-inch constant and the relevant font-sizes; doing it in one place, with the contextual values exposed as settings, removes the arithmetic and the chance of getting a ratio wrong.

Common use cases

  • px to rem. Convert a pixel value from a design into rem for scalable, accessible typography.
  • Fluid type. Work out the vw equivalent of a pixel size for responsive headings.
  • Print styles. Translate between px and physical units (pt, mm, in) for print stylesheets.
  • Design handoff. Reconcile a designer's pixel spec with a codebase that uses rem or em.

Frequently asked questions

How is px related to inches and points?
CSS defines a reference pixel as 1/96 of an inch, so 1in = 96px, 1pt = 1/72in ≈ 1.333px, 1pc = 12pt = 16px, 1cm ≈ 37.8px, and 1mm ≈ 3.78px. These ratios are fixed by the spec and never change.

What is the difference between em and rem here?
rem is relative to the root font-size (the "Root font-size" setting), so it is stable regardless of nesting. em is relative to the parent font-size (the "Parent font-size" setting), so it compounds when elements are nested. Set both fields to match your situation.

What does the percentage unit convert against?
For length, % is context-dependent; this tool treats % like a font-relative unit against the parent font-size, the same basis as em ×100. For width or height as a percentage of a container, that depends on the container size rather than font-size.

How are vw and vh calculated?
1vw is 1% of the viewport width and 1vh is 1% of the viewport height, using the width and height you enter. vmin uses the smaller of the two dimensions and vmax the larger, matching how browsers resolve them.

Why should I prefer rem over px?
rem values scale with the user's chosen default font size, so a layout built in rem respects accessibility preferences, while px values stay fixed. Converting a design's pixel sizes to rem is one of the most common reasons to use this tool.