CSS Unit Converter
px, rem, em & pt
Convert CSS px, rem, em, and pt values with a configurable base font size for design tokens, typography, and responsive layouts.
What is this tool?
This CSS unit converter translates between px, rem, em, and pt using a configurable pixel base. It is built for front-end work where design specs, CSS tokens, and browser rendering often use different units.
rem is based on the root font size, while em is based on the current element's computed font size in real CSS. This calculator uses the selected base for both so you can do quick token math, but nested CSS contexts may need manual review.
Use it when converting design values to responsive CSS, checking typography scales, documenting spacing tokens, or translating print-oriented point sizes into screen units.
How to use
- Enter the numeric value to convert.
- Choose the input unit: px, rem, em, or pt.
- Set the base font size in pixels.
- Copy the converted value that matches your CSS, design system, or handoff note.
Examples
| Input / setting | Output | Notes |
|---|---|---|
16px with 16px base | 16.00px; 1.0000rem; 1.0000em; 12.00pt | Default browser root size. |
24px with 16px base | 24.00px; 1.5000rem; 1.5000em; 18.00pt | Common heading or spacing conversion. |
1.5rem with 16px base | 24.00px; 1.5000rem; 1.5000em; 18.00pt | Relative unit converted back to pixels. |
Related tools & concepts
Last reviewed: 2026-05-08