Convert Design Specs to CSS Units
Translate Figma or Sketch pixel values to rem/em units for clean, scalable CSS implementation.
Context (affects rem/em/vw/vh/%)
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.
Conas a Oibríonn sé
Cén fáth ár gceann a úsáid?
Also check out…
PX to REM for Web Development
Convert pixel values to rem units for scalable, ac
CSS Units for Responsive Design
Convert between px, vw, vh, and % to build layouts
Tailwind CSS Unit Reference
Understand how Tailwind CSS sizing classes map to
Convert CSS Units for Print Stylesheets
Convert between px, pt, and rem for print media qu