📐

CSS Unit Converter — px ↔ rem ↔ em

Convert between px / rem / em / pt / % / vw / vh in CSS. Adjustable base font-size and viewport. Perfect for design systems and responsive layouts.

Value

Unit

Base font-size (px)

Default 16px (browser default). Change if your page uses a custom html/body font-size.

+ Advanced

Parent font-size (px)

For em — parent element font-size (default = base)

Viewport width

Viewport height

Common values:

CSS Unit Converter — switch between px / rem / em / pt / % / vw / vh. Useful for design systems and responsive layouts.

rem is relative to the <html> root font-size. em is relative to the parent element. Default browser is 16px.

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.

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.