When you need this conversion
Handing type sizes from a screen design to a document, a PDF, a print layout or an email template that expects points. Points are the unit of Word, Google Docs, InDesign, Illustrator and PDF. Pixels are the unit of CSS and screen design tools.
Choosing the DPI
- 96 DPI for anything that started in CSS, Figma or Sketch. This is the standard CSS relationship: 1 px = 0.75 pt.
- 72 DPI for older Mac tools, some PDF generators and Illustrator documents set up in pixels. Here px and pt are 1:1.
Common sizes (96 DPI)
- 12 px = 9 pt, 14 px = 10.5 pt, 16 px = 12 pt
- 20 px = 15 pt, 24 px = 18 pt, 32 px = 24 pt
Common mistakes
Assuming 1 px = 1 pt. That’s only true on a 72 DPI canvas. In a browser, text set to 12pt renders at 16 px.
Using pt in web CSS. Browsers support pt, but it doesn’t scale with the user’s font preference any better than px. Use rem for text on the web and pt only for print style sheets.
The reverse is the points to pixels converter. For physical sizes, try points to millimeters.