CSS Units Converter
Convert between px, rem, em, and pt. Set your base font size for accurate results.
Points (pt):12pt
Root font size of your site's <html> element (browser default is 16px)
rem is relative to the root (<html>) font size. The browser default is 16px, so 1rem = 16px unless overridden.
1pt = 1.333px at screen resolution (96 DPI). Points are mainly used in print CSS and design tools.
Common CSS Sizes
| px | rem | pt | Typical Use |
|---|---|---|---|
| 8 | 0.5 | 6 | Icon / border radius |
| 10 | 0.625 | 7.5 | Code, small text |
| 12 | 0.75 | 9 | Small text / hint |
| 14 | 0.875 | 10.5 | Body text (compact) |
| 16 | 1 | 12 | Default body text |
| 18 | 1.125 | 13.5 | Body text (comfortable) |
| 20 | 1.25 | 15 | Large text / subtitle |
| 24 | 1.5 | 18 | H3 / large heading |
| 32 | 2 | 24 | H2 / display heading |
| 48 | 3 | 36 | H1 / hero heading |
Frequently Asked Questions
px (pixels) is an absolute unit that always renders the same size regardless of user settings. rem (root em) is relative to the root <html> element's font size — at the browser default of 16px: 1rem = 16px, 2rem = 32px. em is relative to the current element's parent font size. Designers prefer rem for scalable layouts: if a user sets their browser font size to 20px for accessibility, all rem values scale proportionally.
Divide the pixel value by your root font size. With the browser default of 16px: rem = px ÷ 16. For example, 24px ÷ 16 = 1.5rem, 32px ÷ 16 = 2rem, 14px ÷ 16 = 0.875rem. Many developers set html { font-size: 62.5%; } to make 1rem = 10px, simplifying the math: 24px becomes 2.4rem.
At the browser default base font size of 16px: 16px = 1rem. Key anchor values: 8px = 0.5rem, 12px = 0.75rem, 20px = 1.25rem, 24px = 1.5rem, 32px = 2rem, 48px = 3rem. If your site sets a different base (e.g. 10px via html { font-size: 62.5%; }), recalculate accordingly — that's why this converter has a base font size setting.
rem respects the user's browser font size preference, which is important for accessibility. Users who need larger text (due to low vision or personal preference) can set their browser to 20px base, and all rem-based sizes scale automatically. px values ignore this setting. rem also makes responsive design easier: scale the root font size with a media query and every rem-based element scales proportionally.