Which unit should I default to?

For modern UI, default to rem for spacing and type, clamp() for fluid sizing, and em for component-local rhythm where needed.

What's the difference between rem and em?

rem is always relative to the root font-size; em is relative to the current element's font-size, so em can compound when nested.

When should I use viewport units?

For fluid hero sizing and full-viewport sections—ideally wrapped in clamp() so values stay within readable, non-overflowing bounds.

Does UnitCraft send my input values to a server?

No. Calculator inputs are processed locally in the browser tab.

CSS Unit Converter for PX, REM, EM, Viewport and Container Units

CSS has two families of length units: absolute (fixed, like px and pt) and relative (computed from something else, like rem, em, %, and the viewport units). Pick a focused tool below for accurate math and copy-ready snippets.

All converters & generators

Absolute units

Absolute units have a fixed size: px, pt, in, cm, mm, pc. On the web, px is by far the most common, and the others derive from it (96px = 1in = 72pt).

Use absolute units sparingly for screen UI—they ignore user zoom and font-size preferences—but they remain useful for print stylesheets.

Relative units

Relative units compute from a reference: rem from the root font-size, em from the element's font-size, % from the containing block, and vw/vh/vmin/vmax from the viewport.

Container units (cqw, cqh, cqi, cqb) compute from a query container instead of the viewport, enabling components that adapt to their own box.

Which unit should you reach for

Default to rem for type and spacing tokens so the interface scales with user settings. Use em for component-local rhythm and clamp() + vw for fluid sizing with guardrails.

Reach for % and container units for layout that should respond to its parent, and keep px for hairline borders and other genuinely fixed details.

Frequently asked questions

Which unit should I default to?: For modern UI, default to rem for spacing and type, clamp() for fluid sizing, and em for component-local rhythm where needed.
What's the difference between rem and em?: rem is always relative to the root font-size; em is relative to the current element's font-size, so em can compound when nested.
When should I use viewport units?: For fluid hero sizing and full-viewport sections—ideally wrapped in clamp() so values stay within readable, non-overflowing bounds.
Is css unit converter for px, rem, em, viewport and container units free to use?: Yes. UnitCraft calculators are free and run entirely in your browser.
Does UnitCraft send my input values to a server?: No. Calculator inputs are processed locally in the browser tab.