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
Enter the pixel value first.
Calculation base
Usually html { font-size }
Result
1.5000 rem
24px ÷ 16px = 1.5000rem
CSS snippet
gap: 1.5000rem; /* or margin / padding */
PX ↔ VW
Result
50.0000 vw
720px ÷ 1440px × 100 = 50.0000vw
CSS snippet
width: 50.0000vw;
PX → PT
Result
12.000 pt
16px × 0.75 = 12.000pt
CSS snippet
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 = 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.