toolready. CSS Units Converter

CSS Units Converter

px ↔ rem, em, pt, % — with adjustable base size. Live both ways.

Quick reference (at current root size)

What this does

Five linked fields — px, rem, em, pt and % — plus two settings that define what the relative units are relative to. Type in any field and the other four recalculate immediately; there is no convert button and no direction to pick. Every conversion routes through pixels internally, so the numbers stay consistent no matter which field you edit. Results are rounded to four decimal places. 

/* 24px at a 16px root */
padding-block: 1.5rem;
font-size: 1.125rem;   /* 18px */
border-width: 1px;     /* stays px on purpose */

What are the two base fields for?

Root font size is what rem resolves against — the computed font-size of the html element. It defaults to 16 px because every major browser does. Parent font size is what em and % resolve against: the font size of the element's parent. Both default to 16 px, which is why rem and em show the same number until you change one. Set the parent field to your button's or heading's actual font size and the em column becomes meaningful.

How do I convert px to rem?

  1. Leave the root font size at 16 unless your stylesheet overrides html { font-size }.
  2. Type your pixel value into the px field.
  3. Read the rem field — 32 px gives 2, 24 px gives 1.5, 42 px gives 2.625.
  4. Going the other way is the same move in reverse: type into rem and read px.

Under the fields there is a quick-reference strip showing the common type sizes — 10, 12, 14, 16, 18, 20, 24, 32, 48 and 64 px — already converted to rem at whatever root size is currently set. It saves re-typing the same handful of values while transcribing a spec.

Why does 1pt equal 1.3333px?

CSS defines its physical units against a fixed 96 dpi reference, and a point is one seventy-second of an inch. That makes the ratio exactly 4:3 in both directions — 12pt is 16px, and 16px is 12pt, which is why the two default type sizes of print and web line up. The conversion here is a plain multiply by 0.75 or divide by it; no screen DPI is consulted, because CSS does not consult it either.

Which units does it not cover?

Viewport units are deliberately absent. vw, vh, dvh and friends depend on the size of the window at render time, so a static conversion table would be misleading — the answer changes when the user rotates their phone. If you need a value that moves with the viewport, build it as a fluid expression in the clamp() calculator, which solves the vw coefficient for you from two viewport widths. Absolute print units (in, cm, pc) are out of scope too; for physical measurements use the general unit converter.

Should I write px or rem?

Use rem for anything that should grow when someone raises their browser's font size: type, the spacing around type, and max-widths on text columns. Keep px for details that should not scale — hairline borders, icon strokes, one-pixel offsets. Use em when a value should track the local text instead of the page root, which is what makes button padding stay proportional across a size scale. The old font-size: 62.5% trick — setting the root to 10 px so 1 rem is 10 px — still works; enter 10 in the root field and the quick reference re-bases itself.

What else is worth having open?

The clamp() generator for fluid type, the aspect ratio calculator for box dimensions, and the contrast checker when the size question is really a legibility question. It is arithmetic in the page; nothing is sent anywhere.