UnitCraft tools
Developer-first calculators for sizing, typography, accessibility checks, and responsive CSS—optimized for predictable internal linking and reusable snippets.
Read the CSS units hub →PX to REM converter
Convert pixels to REM with your root font-size. Essential for scalable CSS, Tailwind-compatible tokens, and accessible typography.
REM to PX converter
Multiply REM × root px to audit comps, tokens, or legacy px-only specs alongside REM layouts.
PX to EM converter
Convert PX to EM using the element’s own font-size (not the root). Watch cascade compounding.
EM to PX calculator
Convert EM to PX with configurable element font-size for inspections and spreadsheets.
REM to EM converter
Bridge REM and EM using root font-size and element font-size—handy for mixed token systems.
Percentage to PX converter
Convert CSS percentage lengths to pixels when you know the containing block’s width.
PX to VW converter
Convert pixels to viewport width units for fluid layouts. Set your design viewport width.
VW to PX converter
Turn viewport width units into pixels for a known viewport—useful when translating vw tokens to fixed mockups.
VH to PX converter
Convert vh to pixels with your viewport height. Remember mobile `100vh` vs `100dvh` differences.
VMIN to PX converter
Convert vmin to pixels. vmin = 1% of the smaller viewport axis—great for balanced scaling.
VMAX to PX converter
Convert vmax to pixels using viewport width and height.
PX to PT converter
Convert pixels to points using the web’s 96 dpi mapping (1pt = 96/72 px).
PT to PX converter
Convert typographic points to CSS pixels.
PX to CQW converter
Convert pixels to container query width units when you know the container width in px.
CSS clamp() calculator
Build clamp(min, preferred, max) snippets for typography and spacing with live preview.
Fluid typography generator
Generate a clamp() equation from minimum/maximum font sizes and viewport breakpoints.
CSS size calculator
Quick stacks of PX↔REM, PX↔VW, and PX↔PT for mixed audit sessions—one screen, several conversions.
Responsive typography tool
Pair fluid clamp() output with line-height targets and REM-friendly minimums.
CSS spacing generator
Convert pixel spacing steps into REM snippets for margin/padding scales.
Line height calculator
Convert font-size px and desired line-height px into a unitless line-height multiplier.
Tailwind spacing converter
Map pixel distances to Tailwind spacing keys (divide by 4) and REM equivalents.
Border radius generator
Convert radius px values to REM-ready `border-radius` declarations.
Responsive breakpoint calculator
Convert common viewport widths into min/max media queries—sync your design breakpoints with code.
Aspect ratio calculator
Reduce width × height pixels to simplified **w / h** for `aspect-ratio` in CSS.
WCAG contrast checker
Compute WCAG contrast ratio between two HEX colors — supports quick AA/AAA text checks.