When to use it
Translating Figma pixels into rem, converting designer-supplied pt into px, or checking how big an em really is given a parent's font size.
The units
- px — the absolute anchor. Every conversion routes through px.
- rem — relative to the root (
<html>) font size, adjustable above. - em — relative to the parent font size, adjustable above.
- pt — 1pt = 1/72in = 96/72px ≈ 1.333px (CSS standard).
- pc — 1pc = 12pt.
- % — proportion of the parent font size (em × 100).
Sync behavior
Type into any unit; the others update immediately. Changing the root or parent font size only affects rem, em, and %. The absolute units (px, pt, pc) stay put.
Gotchas
- The
html { font-size: 62.5% }trick — sets the root to 10px so1rem = 10px. Set "Root font size" to 10 above to mirror that scheme exactly. - Email clients — some strip rem entirely. Stick to pt or px in email templates.
Design tokens are pure arithmetic
px ↔ rem ↔ em ↔ pt ↔ pc ↔ % conversions are integer/float math. Root and parent font-size adjustments take effect instantly. Zero external traffic.