Skip to main content

Utility · CSS unit tool

Multi-unit CSS size calculator

Enter a pixel value once and read its REM, EM, viewport, and point equivalents side by side. Built for audit sessions where you are mapping a legacy page onto a consistent, tokenized scale.

PX ↔ REM

px

Enter the pixel value first.

Calculation base

px

Usually html { font-size }

Result

1.5000 rem

24px ÷ 16px = 1.5000rem

CSS snippet

css
gap: 1.5000rem; /* or margin / padding */

PX ↔ VW

px
px

Result

50.0000 vw

720px ÷ 1440px × 100 = 50.0000vw

CSS snippet

css
width: 50.0000vw;

PX → PT

px

Result

12.000 pt

16px × 0.75 = 12.000pt

CSS snippet

css
font-size: 12.000pt;

Keyboard tip: press Tab or Shift+Tab to switch fields.

Why a multi-unit view

During a migration you rarely need just one conversion—you want to see how a 24px value reads as rem for tokens, vw for a hero, and pt for the print stylesheet, all at once.

Seeing every unit together makes it obvious which representation belongs in which layer of the system, and reduces tab-switching during reviews.

A typical migration workflow

Normalize design tokens to REM so the scale respects user settings; map legacy pixel margins onto your spacing staircase (4, 8, 12, 16…).

Export vw values only for genuinely fluid elements like hero metrics, and keep pt aside for any print comp that still ships.

Copy-ready examples

24px across units @16 root
css
/* 24px = 1.5rem = 1.5em(@16) = 18pt */

Frequently asked questions

Does this tool store my values?
No. Every calculation runs locally in your browser tab; nothing is sent to a server.
Which unit should the migration target?
Default layout and type to REM for accessibility, use vw (inside clamp) for fluid elements, and reserve pt for print.
Is multi-unit css size calculator 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.
Can I copy the generated CSS output?
Yes. Each tool provides copy-ready snippets so you can paste values directly into code.