Convert Design Specs to CSS Units

Translate Figma or Sketch pixel values to rem/em units for clean, scalable CSS implementation.

Non é necesario iniciar sesión

From

1rem

Context (affects rem/em/vw/vh/%)

Root font (px)

Parent font (px)

Viewport W (px)

Viewport H (px)

All conversions for 16 px

Root EM (rem)1 rem

EM (em)1 em

Points (pt)12 pt

Viewport Width (vw)1.11111 vw

Viewport Height (vh)1.77778 vh

Percent (%)100 %

Common pixel sizes → rem (at 16px base)

Design Handoff tips

🎨

Figma outputs measurements in pixels. When implementing in CSS, convert font sizes and spacing to rem units to respect user browser preferences.

💡

A quick mental shortcut: divide any px value by 16 to get rem (at the 16px default base). 24px ÷ 16 = 1.5rem. This tool handles any base font size.

📋

For design tokens: 1rem = 16px base is standard. Capture all your token values in rem so they scale correctly when users adjust their font preferences.

⚡

Click any entry in the common sizes table to load it into the converter. Quickly check 12px, 14px, 16px, 18px, 24px, and 32px against your current base size.