freeonlinetools

What is Typography Unit Converter?

Typography Unit Converter converts between pixels (px), em, rem, points (pt), percentages (%), and viewport units (vw, vh). Set a base font size and viewport size, then type a value in any field to see all other units update at once.

Conversions use the CSS standard: 1pt = 96/72 px, em and rem multiply by the base font size, percentage uses the base as 100%, and vw and vh are fractions of the viewport width and height. Edit any field and the other six recalculate live. The base font size defaults to 16px (the common root default) but you can change it to match a design system that uses 14, 18, or any other root value, and the viewport defaults to 1920×1080 so vw and vh stay accurate.

How to use

  1. Step 1 — Set the base font size in pixels (default 16px) which determines how relative units like em, rem, and % are calculated.
  2. Step 2 — Enter a numeric value in any of the seven unit fields (px, em, rem, pt, %, vw, or vh) to see all other units update instantly.
  3. Step 3 — Copy any converted value to use in your CSS, design specs, or print layouts.

When to use

  • Translating a print designer's pt specifications into the CSS pixel values a stylesheet actually applies.
  • Auditing a design system to see whether a 1.25rem heading translates to the intended 20px at the chosen root.
  • Picking the right em or % value when working inside a parent that already changes the inherited font size.

Result

A designer hands you specs in points (14pt body text). Enter 14 in the pt field with a 16px base to instantly see it equals 18.67px, 1.167em, 1.167rem, and 116.7% — ready to use in your stylesheet.

FAQ

Why does 1pt convert to 1.333px instead of 1px?
CSS defines 1pt as exactly 1/72 of an inch and 1in as 96px, so 1pt = 96/72 = 1.333px. That's the conversion every browser uses. Print sizes in pt look bigger on screen than the number suggests because of this 4/3 multiplier.
What's the difference between em and rem?
rem always references the root font size (the <html> element). em references the font size of the nearest parent element. So 2em inside a 20px parent is 40px, but 2rem is 2 × root regardless of any nested parent.
How does the base font size setting affect the conversions?
It changes the px value of 1rem and 1em. The default 16px matches most browsers, so 1rem = 16px. If your root is 18px, 1rem = 18px and a 1.25rem heading becomes 22.5px instead of 20px. The pt conversion is unaffected, since pt is absolute.
Should I use px, rem, or em in my stylesheet?
rem for type sizes (so users can override the root via browser zoom or accessibility settings), px for borders and tiny spacing where exactness matters, and em for spacing relative to the current element's font size (like padding inside a button).
Why does the percentage value not equal 100% when px equals the base?
It does — try it. If px equals your base (e.g. 16 with base 16), the % field shows 100. If you see a different number, the px value is not exactly equal to the base, perhaps because of rounding in another field, or because you changed the base after typing the px.

Related Tools

Time Unit Converter

Convert between time units instantly

Timestamp Converter

Convert Unix timestamps to dates

Torque Converter

Convert between torque units

Angle Converter

Convert degrees, radians, gradians, turns, arc minutes, arc seconds, and DMS

Area Converter

Convert area units instantly

Clothing Size Converter

Convert clothing sizes between US, UK, EU, AU, JP and CN — by label or by body measurement, with France, Italy and Korea on tap