Why CSS Units Matter

Pixels are absolute: they map directly to screen pixels and don't scale with user preferences. Relative units like rem and em scale with font size settings, making them the foundation of accessible, responsive typography.

rem vs em

rem (root em) is always relative to the <html> element's font size: typically 16 px unless overridden. It is predictable and doesn't accumulate through nested elements. em is relative to the nearest ancestor's font size, which can compound unexpectedly in deeply nested components.

Points and Percentages

pt (points) are a print-centric unit: 1 pt = 1/72 inch ≈ 1.333 px at 96 dpi. % for font size is identical to em: 100% equals the parent font size.

Bulk Conversion

The bulk tab converts a list of pixel values at once, useful when migrating a design token file from px to rem, or generating a spacing scale.

Viewport units

Viewport-relative units are increasingly important for responsive design:

vw: 1% of the viewport width
vh: 1% of the viewport height
vmin: 1% of the smaller viewport dimension (width or height)
vmax: 1% of the larger viewport dimension
svh / dvh: small/dynamic viewport height — account for collapsing mobile browser chrome (CSS 2022)

Use viewport units for full-screen layouts, hero sections, and elements that must respond to browser chrome changes on mobile.

Common design token conversions

The 8-point spacing scale (base font = 16px):

px	rem	Common use
4	0.25 rem	xs spacing (icon gap)
8	0.5 rem	sm spacing (tight padding)
12	0.75 rem	sm/md (compact UI)
16	1 rem	Base spacing unit
24	1.5 rem	Section padding
32	2 rem	Card padding
48	3 rem	Large spacing
64	4 rem	Section gaps