About the Typography Unit Converter
This typography unit converter moves type sizes and layout measurements between the systems designers actually juggle: PostScript points and picas from print and InDesign, CSS pixels and em/rem from the web, inches and millimetres from page sizes, the Japanese Q unit, and traditional European Didot points and ciceros.
It is built for graphic and web designers turning a 12 pt print spec into CSS, developers converting pixel values into rem, and anyone setting margins or column widths in picas. Adjust the base font size to control what one em or rem means, and the pixels-per-inch value to match screen CSS (96), print resolution (300) or a specific device.
Points here are desktop-publishing points of exactly 1/72 inch, which is what CSS, PDF and every modern layout app use. The Didot point uses the traditional value of 0.3759715 mm (often rounded to 0.376 mm).
How to use the typography unit converter
- 1Enter the size you want to convert.
- 2Pick the unit it is in and the unit you need.
- 3Set the base font size if you are converting to or from em/rem.
- 4Set pixels per inch: 96 for CSS, 72 for legacy design apps, 300 for print.
- 5Read the result and the full table of equivalents.
Formula and method
Every unit is converted through inches. A desktop-publishing (PostScript) point is exactly 1/72 inch and a pica is 12 points, or 1/6 inch. One millimetre is 1/25.4 inch, and the Japanese Q (kyu) is a quarter of a millimetre. A pixel is 1/PPI inch — with the CSS reference value of 96 pixels per inch, 1 pt = 4/3 px and 12 pt = 16 px.
Em and rem are relative units: 1 em equals the current font size in pixels, so its physical size depends on the base font size you enter (browsers default to 16 px). The traditional Didot point is 1/72 of the old French royal inch, 0.3759715 mm, and a cicero is 12 Didot points, about 4.51 mm.
- pt
- Point, 1/72 inch
- pc
- Pica, 12 points = 1/6 inch
- PPI
- Pixels per inch (96 in CSS)
- em
- Multiple of the base font size
Worked examples
12 pt print text in CSS pixels
12 pt is 12/72 = 1/6 inch. At 96 px per inch that is 16 px, which is exactly 1 rem with the default 16 px root size, or 4.23 mm on paper.
10 mm margin in points
10 mm ÷ 25.4 = 0.3937 in, and 0.3937 × 72 = 28.35 pt, or 2.36 picas.
24 px heading in rem
24 px ÷ 16 px = 1.5rem. At 96 ppi, 24 px is also 24 × 72 ÷ 96 = 18 pt.
One inch at 300 ppi
At a print resolution of 300 pixels per inch, one inch is 300 px. It is always 72 points, whatever the resolution.
Frequently asked questions
How many pixels is 12 pt?+
In CSS, 12 pt equals 16 px because CSS fixes 1 inch at 96 px and 72 pt. The ratio is always 1 pt = 1.333 px, so 9 pt = 12 px and 18 pt = 24 px.
How many points are in a millimetre?+
One millimetre is about 2.835 points, and one point is 0.3528 mm. So 10 pt type has a body size of about 3.53 mm.
What is a pica?+
A pica is 12 points, or 1/6 of an inch (about 4.23 mm). Designers often measure column widths and margins in picas, written like 30p0 for 30 picas.
What is the difference between em and rem?+
Both are multiples of a font size. An em is relative to the font size of the current element, while a rem is relative to the root (html) font size, usually 16 px.
Why does Photoshop show a different pixel size for points?+
Older design software assumed 72 pixels per inch, so 1 pt = 1 px. CSS uses 96 ppi, so 1 pt = 1.333 px. Set the pixels-per-inch field to 72 to match the older convention.