CSS Unit Converter — px ↔ rem ↔ em

When to use which CSS unit?

• px — fixed pixels. Use for borders, shadows, small icon sizes. Doesn't scale with user zoom.
• rem — relative to <html> font-size (default 16px). Best for font-size and spacing — scales when users change their default font.
• em — relative to the parent's font-size. Good for padding/margin inside buttons or badges — scales with context.
• % — relative to the parent's corresponding value (width/height/font-size). Useful for fluid layouts.
• vw / vh — 1% of viewport width/height. Use for full-screen heroes or responsive font sizes.
• pt — point (1/72 inch). Rarely used on the web — mostly for print and PDF.

Rules of thumb

• 16px = 1rem (browser default). Foundation of every calculation.
• Tailwind uses rem: p-4 = 1rem = 16px by default.
• Font-size: use rem. Borders & shadows: use px. Hero sections: use vh.
• Avoid em in nested components — scaling can compound unpredictably.

Tips

• Change Base font-size if your page uses html { font-size: 14px } — the conversion updates instantly.
• Click 12px / 16px / 24px preset buttons to quickly check common sizes.
• Click "Copy" on any card to paste straight into CSS.