PX to REM/EM Converter - CSS Unit Converter

How to use this tool

Set font sizes. Enter your root font size (default 16 px) and parent font size.
Enter a value. Type a number and select its source unit (px, rem, em, %, or pt).
Read conversions. All equivalent values appear instantly. Use bulk mode for multiple px values.

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

Frequently asked questions

What is the difference between rem and em?

rem (root em) is relative to the root element font size (usually 16 px), while em is relative to the nearest parent element font size. rem values are more predictable because they don't cascade.

Why use rem instead of px?

Using rem allows users who have changed their browser's default font size to get an appropriately scaled experience. It also makes scaling your entire design easier - change the root font size and everything scales.

How is pt (point) related to px?

1 pt = 1/72 inch = 1.333... px at 96 dpi. Points are a typographic unit historically used in print and still used in some CSS contexts.

What does % mean in this context?

For font sizes, % is relative to the parent element font size. 100% = parent px, 50% = half the parent size.