CSS Unit Converter (PX, REM, EM, PT)
Convert between CSS units — pixels, rem, em, points, and percent — with adjustable base font size. Instant and client-side.
Runs in your browser — nothing uploaded
Default is 16 px, the browser's typical root font size.
Presets:
Convert between CSS sizing units — pixels, rem, em, points, and percent — with one type of the base font size that your site uses. The classic answer to "what is 24px in rem?" without doing mental arithmetic.
Private by design — your data never leaves your device
How to use it
No account, no upload — it all happens on your device.
1
Type a pixel value, or click one of the presets.
2
Adjust the base font size if your site uses something other than 16 px.
3
Copy the value from any row of the table into your CSS.
When to use which unit
The short version of every CSS book chapter on units.
- px— absolute and predictable. Best for borders, fine spacing, and icon sizes where the value should not scale with the user's preferences.
- rem— relative to the root. Best default for font sizes and spacing that should scale with the user's base font preference. Future-proof and accessible.
- em — relative to the parent. Best for component-local spacing that should track the surrounding text. Tricky when components nest because each nesting multiplies.
- pt— printers' points. Best for print-only stylesheets where a designer is thinking in typographic terms. Rare in web design.
- % — relative to a container. Best for layout widths and heights, less for typography.
Common conversions
- 16 px = 1 rem = 1 em = 12 pt = 100 %
- 24 px = 1.5 rem = 18 pt = 150 %
- 32 px = 2 rem = 24 pt = 200 %
- 14 px = 0.875 rem = 10.5 pt = 87.5 %
- 12 px = 0.75 rem = 9 pt = 75 %
Frequently asked
Why is the base font size adjustable?
Rem, em, and percent are relative units. They convert against the root font size — 16 pixels by default in every modern browser. If your site sets a different root size (e.g. html { font-size: 14px }), enter that here so the conversions match what your CSS actually computes.
Are rem and em really the same?
For this converter, yes — both resolve against the same base font size. In real CSS, em inherits from the closest parent's font size while rem always uses the root's. The arithmetic is identical given a single base.
How do points relate to pixels?
Browsers treat 1 inch as 96 pixels by CSS convention. A point is 1/72 of an inch, so 1pt = 96/72 = 1.333… px. The converter applies that ratio.