CSS Unit Converter

Why px-to-rem math keeps tripping people up

You write padding: 24px and your designer says “make it rem so it respects the user’s font setting.” Fine. But 24px in rem depends on the root font-size, and em depends on the parent element, not the root. Then someone asks for the same value in vw for a fluid hero. Suddenly you’re doing arithmetic in a browser console at 11pm.

This converter does all of it in one pass. Type a length, pick what unit it’s in right now, and every other unit shows up next to it. 16px, 1rem, 1em, 12pt, all lined up.

How the conversion actually works

Each unit gets resolved to a real pixel value first, then projected back out. That’s the only honest way to do it, because the units don’t share one reference point.

• rem divides by the base (root) font-size. Default is 16px, the browser default. Change it if your html sets something else.
• em divides by the parent font-size. A button inside a 14px card resolves em differently than the same button at the page root.
• pt uses the fixed CSS ratio: 96 CSS pixels per inch, 72 points per inch. So 1pt = 1.333px. This has nothing to do with print DPI.
• % here means percent of the parent font-size, the way font-size: 80% resolves. It’s not percent of width.
• vw and vh are slices of the viewport. 50vw at a 1440px-wide window is 720px.

Tweak the four context fields (base font, parent font, viewport width, viewport height) and watch every card update instantly. No submit button.

A few things worth knowing

rem and em are not interchangeable, and that bites people. Use rem for global spacing and type so the whole layout scales with one root change. Reach for em when you want a value to track its local font-size, like icon spacing inside a button.

The % card is font-size percent, not container percent. CSS reuses the % symbol for completely different references depending on the property: line-height, width, font-size all mean different denominators. This tool models the font-size case.

Viewport math assumes the values you typed. Real browsers also have scrollbars and the vw/vh quirks around mobile address bars, so treat the viewport numbers as your design target, not gospel. For responsive type, plenty of folks combine rem with a clamp() and a vw term anyway.

Want to drop the output straight into a stylesheet? Hit Download .css and you get a :root block with one custom property per unit. Handy for sanity-checking a token.

FAQ

What base font-size should I use?

16px unless your CSS overrides it. That’s every major browser’s default. If your html rule says font-size: 62.5% (the old “1rem = 10px” trick), set the base to 10.

Why is em different from rem here?

rem always points at the root. em points at the parent element’s font-size, which can be anything. Set the parent field to match the element you’re styling and the em number changes accordingly.

Is the pt conversion for print?

It’s the CSS definition: 1pt equals 1.333px because CSS pins 96px to an inch. Real print output depends on the printer and DPI, so don’t use these numbers for a press-ready PDF.

Does anything get uploaded?

Nope. It’s all arithmetic running in your browser. Close the tab and it’s gone.

Can I convert vw back to px?

Yep. Enter the value, switch the source unit to vw, and the px card shows the result for the viewport width you set. Works the same in reverse for any pair.