UnitCraft utility

PX to EM converter

em = px ÷ elementFontPx. EM is local to the element’s computed font-size—nested EMS can stack.

Element font-size (px)

Pixels

em = 1.2500

EM vs REM

REM: one global anchor.

EMS: typography-relative padding and nested scales.

Chip padding

css

.badge {
  font-size: 14px;
  padding: 0.3571em 0.5714em; /* 5px 8px */
}

Why did my spacing explode?: A parent bumped font-size; EMS on children scale with it.

Explore more