CSS Unit Converter

The CSS Unit Converter translates between every CSS length unit: px (pixels), rem (root em), em (element em), vw/vh/vmin/vmax (viewport units), % (percentage), pt/pc (print units), cm/mm/in (physical units), ch (character width), ex (x-height), lh (line height), and modern dvh/svh/lvh (dynamic viewport units). Set the root font size (default 16px) and see how 1rem relates to every other unit. Essential for responsive design decisions: when to use rem vs em, px vs vw, %; for creating fluid typography with clamp(); for accessibility-respecting font sizes that scale with user preferences.

Understanding CSS units is the foundation of responsive, accessible design. Many developers default to px for everything, losing the benefits of rem (scales with user font size) or vw (scales with viewport). This converter makes the relationships concrete — see exactly what 1.5rem equals in pixels at different root sizes, what 50vw equals on different screen widths, and when each unit is appropriate. Pair with our other CSS tools for a complete responsive toolkit.

CSS units fall into several categories:

Absolute units (fixed size):

- px — pixels. On screens, 1px is the reference unit (actual size depends on device DPI). 1 CSS px ≈ 1/96 inch in print.
- pt — points. 1pt = 1/72 inch. Used in print. 1pt = 1.33px.
- pc — picas. 1pc = 12pt = 16px.
- cm, mm, in, Q — physical units. 1cm = 37.8px. Mainly for print stylesheets.

Relative to font size:

- em — size of the current element font-size. 1em = element's font-size. Nested elements stack (child em is based on parent em).
- rem — size of the root element (html) font-size. 1rem = 16px by default. Consistent regardless of nesting.
- ch — width of the "0" character of the element's font. Useful for max-width based on readability.
- ex — x-height of the element font. Rarely used.

Relative to viewport:

- vw — 1% of viewport width. 50vw = half the window width.
- vh — 1% of viewport height. 100vh = full window height.
- vmin — 1% of smaller viewport dimension.
- vmax — 1% of larger viewport dimension.
- dvh / svh / lvh — dynamic, small, large viewport height (accounts for mobile browser UI — address bar showing/hiding).
- cqw / cqh — container query units (relative to parent container).

Relative to parent:

- % — percentage of parent's corresponding dimension (width% is % of parent width, height% of parent height).

Typical use cases per unit:

| Unit | When to use |
|---|---|
| px | Fixed sizes: borders, small icons, shadows |
| rem | Font sizes, margins, padding (scalable) |
| em | Element-relative (line-height, padding on buttons matching font size) |
| % | Widths relative to parent |
| vw/vh | Full-viewport sections, fluid typography |
| ch | max-width for readable prose (~65ch) |
| dvh | Full mobile viewport height (accounts for address bar) |

Conversion reference (root = 16px):

| Units | px equivalent |
|---|---|
| 1rem | 16px |
| 1em (default) | 16px |
| 1pt | ~1.33px |
| 1pc | 16px |
| 1cm | ~37.8px |
| 1in | 96px |
| 1vw (1080px viewport) | 10.8px |
| 1vh (1080px viewport) | 10.8px |

Fluid typography with clamp():

clamp(min, preferred, max) creates fluid values:

``css
font-size: clamp(1rem, 2vw + 0.5rem, 2rem);
/* Scales with viewport but clamps at 1rem-2rem */
``

Accessibility considerations:

- User font size preferences: Users can change browser default font size. Using rem/em respects this; px does not.
- Root font-size shouldn't be pixel-fixed: Setting html { font-size: 16px } overrides user preference. Better: use browser default or percentage (html { font-size: 100% }).
- Icon/border sizes in px are OK: they do not need to scale with text preference.

Container queries (CSS Container Queries, 2023):

New units cqw, cqh, cqi, cqb, cqmin, cqmax relative to container, not viewport. Powerful for component-based responsive design.

Modern viewport units (2022+):

Mobile browsers dynamically show/hide UI (address bar). Old vh is based on large viewport (bar collapsed). New units:

- svh — small viewport height (address bar visible)
- lvh — large viewport height (address bar hidden)
- dvh — dynamic viewport height (current state)

Use dvh for elements that should fill the viewport at any moment: height: 100dvh.

rem vs em: rem is always relative to root (html) font-size — consistent. em is relative to current element font-size — compounds through nesting. Use rem for most things (font-size, margin, padding). Use em only when you want child to scale with parent element size.

px vs rem for font-size: px is fixed, ignores user accessibility font preference. rem scales with user preference. For body text and UI text, use rem for accessibility. For fine details (borders, shadows), px is fine.

vw/vh vs %: vw/vh are relative to viewport (full screen). % is relative to parent. For fluid layouts, % is more common. For full-screen hero sections, vh/vw.

vh vs dvh: vh is large viewport (mobile bar hidden). dvh is dynamic (current state including bar). For mobile full-height elements, use dvh to avoid overflow when bar is visible.

ch vs px for max-width: ch is relative to character width (scales with font). px is fixed. For readable prose width, 65ch is the sweet spot — roughly 65 characters per line. Better than arbitrary px.

pt vs px: pt is for print (1pt = 1/72 inch). px is for screens. Print stylesheets use pt, screen stylesheets use px. Both are absolute units.