Typography Converter

Enter a typography value in pixels, points, em, rem, percent, or pica, and the converter cross-translates it to every other unit at once. Type sizes are the messiest part of a CSS handoff — designers think in points, browsers default to pixels, and modern systems prefer rem for accessibility.

The rem and em conversions assume a 16px root font size, which is the browser default. If your project sets html { font-size: 14px } or similar, scale the rem column accordingly — the math is linear.

Line-height-as-unit-less is conceptually different from font-size, so the converter treats them separately. Don't try to convert 1.5 (line-height) to pixels without knowing what font-size it's applied to.

The conversion factors: 1pt = 1.333px (because 1pt = 1/72 inch, 1px = 1/96 inch on standard displays). 1rem = root font-size in pixels (default 16px, so 1rem = 16px = 12pt). 1pica = 12pt = 16px. Percent on font-size is a relative-to-parent unit, identical in behavior to em. The converter resolves all of these against the assumed 16px root unless you override it.

Worked example: your designer sends specs in points — body 11pt, headlines 24pt. Run 11pt through the converter: 14.67px, 0.917rem, 91.7%. Run 24pt: 32px, 2rem, 200%. For modern accessibility-friendly CSS, use the rem values: body { font-size: 0.917rem } and h1 { font-size: 2rem }. Now a user who bumps their browser default to 20px gets proportionally larger text everywhere automatically. If you'd hardcoded the px values, the user's settings would be ignored.

Where it gets tricky: the assumption that 1px = 1/96 inch is true on a 96 DPI display, which used to be the desktop standard but isn't anymore. Modern Retina displays handle the device-pixel mapping internally; CSS pixels stay logical and the conversions stay valid. But if you're targeting print (where points and inches are real physical units), or if you care about exact rendering across devices with vastly different DPI, you'll find the px↔pt conversion is a software convention, not a physical guarantee.

For a clean type scale, lock the math to a ratio. Common scales: 1.125 (major second), 1.25 (major third), 1.333 (perfect fourth), 1.5 (perfect fifth), 1.618 (golden ratio). Pick one, multiply each step, and your sizes feel coherent. With a 16px base and a 1.25 ratio: 16, 20, 25, 31, 39, 49, 61. Translate those to rem (1, 1.25, 1.563, 1.953...) for accessibility-friendly CSS, and you've shipped a type system in five minutes.