PX to PT Converter
Convert pixel values to typographic points. Essential for matching web designs to print specifications.
PX to PT Conversion Table
Complete reference: pixels 1–100 converted to points.
| px | pt |
|---|
How to Convert PX to PT
The relationship between pixels and points is based on a fixed ratio:
pt = px × 0.75
px = pt × 1.333...One point equals exactly 1/72 of an inch, while one CSS pixel equals 1/96 of an inch (at 96 DPI). This gives us the ratio: 72/96 = 0.75. So 16px = 12pt, 12px = 9pt, and 24px = 18pt.
Unlike rem or em conversions, the px-to-pt ratio is absolute and doesn't depend on any font-size setting. It's a direct mathematical relationship based on physical measurement standards.
When to Use Point Units
Points are primarily a print unit, but they appear in several web-related contexts:
- Print stylesheets: When creating
@media printCSS, using points for font sizes ensures text renders at predictable physical sizes on paper. A 12pt body text in CSS will match 12pt in Word or InDesign. - PDF generation: Libraries like jsPDF, Puppeteer, and wkhtmltopdf often use points for sizing. Converting your web pixel values to points ensures the PDF output matches the screen layout.
- Design handoff: Print designers think in points. When a print team provides specs in points, you'll need to convert to pixels for the web implementation.
- Email templates: Some email clients (notably older Outlook versions) handle point-based sizes more predictably than pixel sizes.
Points in Typography History
The point has been the standard unit of type measurement since the 18th century. The modern PostScript point (1/72 inch) was standardized by Adobe in the 1980s and adopted by CSS. Before that, the traditional Didot point (used in Europe) was slightly different at approximately 0.376mm.
Common print sizes and their pixel equivalents: 8pt (10.67px) for fine print, 10pt (13.33px) for footnotes, 12pt (16px) for body text, 14pt (18.67px) for subheadings, 18pt (24px) for headings, and 24pt (32px) for display text.
When building web pages that need to match print layouts exactly, use this converter alongside your px-to-rem conversion to set up a consistent type scale that works across both mediums.
Frequently Asked Questions
How many pixels is 12pt?
12 points equals 16 pixels. This is also the default browser font size, which is why 16px has become the standard body text size for the web — it matches the traditional 12pt print body text.
Why is the conversion factor 0.75?
Points are defined as 1/72 of an inch, while CSS pixels are 1/96 of an inch. The ratio 72 ÷ 96 = 0.75, which gives us the conversion factor. Multiply pixels by 0.75 to get points.
Should I use pt in web CSS?
Generally no. Points are designed for print media. For screen CSS, use rem or px. Reserve pt for @media print stylesheets and PDF generation where physical sizing matters.
Are CSS points the same as Word/InDesign points?
Yes. CSS uses the PostScript point (1/72 inch), which is the same definition used by Microsoft Word, Adobe InDesign, and other desktop publishing software.