Typography converter — pt, px, em, rem, picas and mm

Enter a size, choose the unit it is in and the one you want, and set the resolution and base font size; the tool gives the answer and a table of the size in all ten units.

Live demo · real result from this tool
CSS defines 96 px per inch. Use your print resolution for print work.
Used for em, rem and %, in CSS pixels (1/96 in) whatever the resolution, so 16 px is 12 pt. Browsers default to 16 px.
12 points (pt, 1/72 in) =16 pixels (px)

At 96 px/in and a 16 px base font

UnitValue
pixels (px)16
points (pt, 1/72 in)12
picas (pc, 12 pt)1
inches0.166666666667
millimetres4.23333333333
centimetres0.423333333333
Q (quarter-millimetres)16.9333333333
em (× parent font size)1
rem (× root font size)1
% of font size100

Processed on your device — nothing is uploaded.

How to use the typography converter

  1. Type the size in Value.
  2. Choose its unit in From and the unit you want in To: pixels, points, picas, inches, millimetres, centimetres, Q, em, rem or % of font size.
  3. Leave Resolution at 96 px per inch for web work, or set your print or image resolution, such as 300.
  4. Set Base font size in px if your root size is not 16. It is used for em, rem and %.
  5. Read the result and the table. The swap button reverses From and To.

What it does and when to use it

Designers move between print units (points, picas, millimetres) and screen units (pixels, em, rem) all the time. A brand guide may say 10 pt body text and 18 mm margins, while the CSS needs px or rem. A print designer may need to know how many pixels a 24 pt headline covers in a 300 ppi image. This tool does those conversions with one set of settings that you can see and change.

For a quick list of rem values across a whole scale, the px to rem converter and the CSS type scale generator work well together. For page sizes in points and pixels, use the paper size converter. To find a screen’s real pixel density, use the PPI calculator.

How it works

Every value is turned into inches and then into the target unit. The fixed relationships come from the CSS absolute-length definitions, which match modern DTP software:

Unit Inches
point (pt) 1/72
pica (pc) 1/6 (12 pt)
millimetre 1/25.4
centimetre 1/2.54
Q 1/101.6 (0.25 mm)
pixel 1 ÷ Resolution
em, rem Base font size ÷ 96
% (value ÷ 100) × Base font size ÷ 96

At the default 96 px per inch this gives the familiar web values: 1 pt = 1.333 px, 1 in = 96 px, 1 mm ≈ 3.7795 px.

Worked examples

Body text for the web. 12 pt = 16 pixels (px) at 96 px per inch. The table also shows 1 em, 100 % and 4.23333333333 mm.

A rem heading. 1.5 rem = 24 pixels (px) with the default 16 px root, which is 18 pt.

Print resolution. At a Resolution of 300, 24 px is only 5.76 points (pt, 1/72 in), because each pixel is now 1/300 inch.

Limits and tips

  • Base font size is in CSS pixels (1/96 in) whatever the resolution, so a 16 px base is always 12 pt; 1 em at 300 px per inch is 50 device pixels.
  • Nested em values are not tracked; enter the parent’s font size as the base.
  • Point systems older than DTP (Didot, the American point of 0.3514 mm) are not included.

Frequently asked questions

How many pixels is 12 pt?
16 px on the web. CSS fixes 1 inch as 96 px and 72 pt, so 1 pt is 96 ÷ 72 = 1.333 px and 12 pt is 16 px. At a different resolution the answer changes; at 300 px per inch, 12 pt is 50 px.
What is the difference between em and rem?
In CSS, rem is a multiple of the root (html) font size, while em is a multiple of the current element's parent font size. This tool uses one Base font size for both, so it gives the same number for em and rem. If parent sizes are nested, work out the parent size first.
What is a pica?
A pica is 12 points, or 1/6 inch in the modern DTP definition. Page layout programs often measure column widths in picas.
What is the Q unit?
Q is a quarter-millimetre (0.25 mm), common in Japanese typesetting and supported in CSS. 10 mm is 40 Q.
Does a 16 px font look the same size on every screen?
No. A CSS pixel is a reference unit, not a physical dot. Phones and high-density screens use several device pixels for each CSS pixel, so on-screen physical size varies.

Sources

  1. CSS Values and Units Module Level 3, section 6.2 Absolute lengths — W3C, accessed 2026-10-08

Written by the ToolsRift team · Last updated

Pages are drafted with AI assistance and checked by automated tests. How we write and check pages.

Was this tool useful?

Report a problem

Start typing to search every tool.

↑ ↓ to moveEnter to openEsc to close