What the CSS unit converter does
CSS lengths come in absolute units (px) and several relative ones — rem, em, %, vw, vh — that depend on a base value. This converter translates between them for a given base: root font size for rem, parent font size for em, parent width for %, and a viewport size for vw and vh. Enter a value in one unit and read it in the others. It runs in your browser and is the quick answer to “what is 1.25rem in pixels?” or “how many vw is 320px on a 1920 screen?”.
The formulas
px = rem × root font size (default 16px)
px = em × parent font size
px = % × parent dimension ÷ 100
px = vw × viewport width ÷ 100
px = vh × viewport height ÷ 100
24px = 1.5rem (at 16px root)
1.25rem = 20px
320px on a 1920px viewport = 16.67vw
50vh on a 1080px viewport = 540pxWhich unit, when
| Unit | Relative to | Use for | Avoid for |
|---|---|---|---|
| px | Nothing — fixed | Borders, shadows, hairlines, media-query breakpoints | Font sizes (ignores user preferences) |
| rem | Root font size | Font sizes, spacing, layout widths — scales with user settings | Things that must never scale (1px borders) |
| em | Parent / own font size | Padding and margins inside components, icon sizes next to text | Deep nesting — compounds unpredictably |
| % | Parent's corresponding dimension | Fluid widths, image sizing within containers | Heights (parent often has no set height) |
| vw / vh | Viewport width / height | Full-screen sections, fluid type with clamp() | Anything on mobile where 100vh includes hidden browser UI — use dvh/svh |
Common rem values at 16 px root
| px | rem | Typical use |
|---|---|---|
| 12 | 0.75 | Captions, labels |
| 14 | 0.875 | Secondary text, UI |
| 16 | 1 | Body text |
| 18 | 1.125 | Lead paragraphs |
| 20 | 1.25 | H4 |
| 24 | 1.5 | H3 |
| 32 | 2 | H2 |
| 48 | 3 | H1, hero |
| 4 / 8 / 16 / 24 / 32 | 0.25 / 0.5 / 1 / 1.5 / 2 | Spacing scale |
Why rem is the default for type and spacing
Users who set a larger default font size in their browser — common among people with low vision — get larger text only if sizes are in rem or em. Pixel font sizes ignore that setting entirely. A layout built on rem scales coherently: type, spacing and container widths grow together. Borders, shadows and other decorations that should stay hairline-thin are the reasonable exception and stay in px.
The 62.5% trick and why it is mostly gone
Setting html { font-size: 62.5% } makes 1rem = 10px, so 1.6rem = 16px and the mental arithmetic is easier. It was popular for years but has fallen out of favour: it changes the root size that third-party components and user stylesheets rely on, and modern editors and design tools display rem values directly. Most current systems keep the root at the browser default (16px) and use a converter like this one when they need the pixel equivalent.
Fluid type with clamp()
font-size: clamp(1rem, 0.5rem + 1.5vw, 2rem);
/* 16px minimum, grows with viewport, 32px maximum */Mixing rem and vw in clamp() gives text that scales between breakpoints without media queries. The converter helps pick the vw coefficient: decide the pixel size at two viewport widths and solve for the slope.