What does CSS Unit Converter do?
Convert responsive CSS units with live updates.
Convert between px, rem, em, pt, vh, vw, and %. Click any result to copy it.
Conversion settings
px
px
px
px
Common conversions (base: 16px)
| px | rem | pt | Notes |
|---|---|---|---|
| 10px | 0.625rem | 7.5pt | small labels |
| 12px | 0.75rem | 9pt | small text |
| 14px | 0.875rem | 10.5pt | body small |
| 16px | 1rem | 12pt | default body |
| 18px | 1.125rem | 13.5pt | large body |
| 20px | 1.25rem | 15pt | h5 |
| 24px | 1.5rem | 18pt | h4 |
| 32px | 2rem | 24pt | h3 |
| 48px | 3rem | 36pt | h2 |
| 64px | 4rem | 48pt | h1 |
CSS Units: Key Concepts
- rem (root em)
- Relative to the root element (
html) font size. 1rem = 16px by default. Unlikeem, rem is not affected by nesting — it always references the root. Preferred for scalable layouts. - em
- Relative to the current element's font size (or inherited). In nested elements, em compounds: a child of
font-size: 1.5eminside a parent of1.5emresults in 2.25× the root size. Useful for component-scoped scaling. - vw / vh
- Viewport width and height units.
1vw= 1% of the viewport width;1vh= 1% of the viewport height. Dynamic on resize. On mobile,100vhincludes the browser chrome; usedvh(dynamic viewport height) to exclude it. - pt (points)
- A physical print unit: 1pt = 1/72 inch. At 96dpi screen resolution, 1pt ≈ 1.333px. Used in print stylesheets and design tools (Figma, Illustrator). Avoid pt for screen CSS — use px, rem, or em instead.
Frequently Asked Questions
When should I use rem instead of px in CSS?
Use rem for font sizes, spacing, and anything that should scale when a user changes their browser's default font size. Browsers default to 16px, so 1rem = 16px — but users on accessibility settings may raise this to 20px, and rem values will scale proportionally. Use px only for things that should stay fixed regardless of user settings, like border widths or icon sizes.
What base font size does rem use by default?
The browser default is 16px, so 1rem = 16px. You can override this with html { font-size: 62.5%; } to make 1rem = 10px, which simplifies mental math (1.4rem = 14px). However, this overrides the user's browser font preference, which hurts accessibility. A better approach is to leave the root font size as the browser default and use rem values as they are.
Why does em compound in nested elements?
em is relative to the element's own font size. If a parent has font-size: 1.5em and a child also has font-size: 1.5em, the child ends up at 1.5 × 1.5 = 2.25em relative to the root — not 1.5em. This compounding behavior makes em tricky in deeply nested components. Use rem when you want consistent sizing that ignores nesting depth.
What is the difference between vw/vh and dvw/dvh?
vw and vh are relative to the initial viewport size — on mobile, this includes the browser's address bar and bottom navigation. When those UI elements hide during scroll, elements sized with vh can overflow. dvw (dynamic viewport width) and dvh (dynamic viewport height) update in real time to always equal the currently visible area. Use dvh for full-screen layouts on mobile to avoid scroll issues.
Should I ever use pt (points) in web CSS?
Generally no. pt is a print unit (1pt = 1/72 inch) and it is only meaningful in print stylesheets (@media print). On screen, pt values are converted based on a fixed 96dpi assumption — 1pt ≈ 1.33px. Design tools like Figma and Illustrator use pt, so this converter helps you translate those values to rem or px for your CSS.