Open a CSS file and you'll see px, rem, % everywhere — but rarely pt. That's not an accident. Points come from an entirely different medium than the one CSS was built for.
Where Points Come From
A point is a print-industry unit dating back to traditional typesetting: 1 point = 1/72 of an inch. It's the unit word processors still default to for font sizes (that "12pt" in Microsoft Word), and it's baked into PDF generation and print stylesheets.
The PT-to-PX Formula
Since browsers treat 1 inch as 96px by convention: PX = PT × (96 ÷ 72), which simplifies to PX = PT × 1.3333. A 12pt heading converts to 16px — which isn't a coincidence, since 16px is also the default browser font size.
The reverse is just as simple: PT = PX × 0.75. A 24px heading is 18pt; a 14px caption is 10.5pt. Because 96 ÷ 72 is exactly 4/3, every multiple of 3pt lands on a whole number of pixels, and every multiple of 4px lands on a whole number of points.
PT to PX Conversion Table
| Points | Pixels | rem (16px root) | Typical use |
|---|---|---|---|
| 6pt | 8px | 0.5rem | Fine print, legal text |
| 8pt | 10.67px | 0.667rem | Footnotes |
| 9pt | 12px | 0.75rem | Captions |
| 10pt | 13.33px | 0.833rem | Small body text |
| 10.5pt | 14px | 0.875rem | Secondary text |
| 11pt | 14.67px | 0.917rem | Printed body text |
| 12pt | 16px | 1rem | Default body text |
| 14pt | 18.67px | 1.167rem | Subheadings |
| 18pt | 24px | 1.5rem | Headings |
| 24pt | 32px | 2rem | Large headings |
| 36pt | 48px | 3rem | Display text |
| 72pt | 96px | 6rem | One full inch |
If you prefer working in rem on screen, combine the two steps: convert pt to px, then divide by 16. The PX to REM converter handles the second step.
Why 72 and 96 Don't Match
The 72-points-per-inch definition comes from desktop publishing, where the PostScript and PDF formats standardised the point at exactly 1/72 inch. Early Macintosh screens were also built around 72 pixels per inch, so on those machines one point and one pixel were the same size. Windows took a different route and assumed 96 pixels per inch, which made on-screen text a little larger and easier to read at typical viewing distances. CSS adopted the 96 figure, which is why points and pixels in a browser are not interchangeable today.
The same history explains a common confusion with design software. In an image editor where the document resolution is set to 72 PPI, a 12pt font and 12px are the same size, because the editor converts points using the document's own resolution. Bring that design into a browser and 12pt suddenly equals 16px. The safest habit is to ask for or export pixel values for anything going to the web. For background on pixel density, see DPI vs PPI.
Worked Example: Turning a Word Document Into a Web Page
Suppose a client sends a styled document with 11pt body text, 14pt subheadings, and 20pt titles, and wants a matching web page. Converting each value:
- Body: 11 × 1.3333 = 14.67px
- Subheadings: 14 × 1.3333 = 18.67px
- Titles: 20 × 1.3333 = 26.67px
Rounding to the nearest whole pixel and moving to rem gives a clean, accessible scale:
body { font-size: 0.9375rem; } /* 15px, rounded up from 14.67px */
h2 { font-size: 1.1875rem; } /* 19px, from 14pt */
h1 { font-size: 1.6875rem; } /* 27px, from 20pt */Many teams also round body text up to 16px on screen, since text that reads comfortably on paper held at arm's length can feel small on a monitor.
Where You'd Actually Use PT
- Print stylesheets — a
@media printblock that sets font sizes in pt produces more predictable results on a physical printout than px, since pt is tied to real-world inches. - PDF generation — tools that render HTML to PDF often expect or output measurements in pt because the underlying PDF format is point-based.
- Porting a print design — if a designer hands you a print mockup with sizes in points, converting those directly to px keeps proportions accurate on screen.
Why Not Just Use PT Everywhere?
Because it's an absolute unit tied to a fixed physical size assumption (96 PPI), the same way px is — it doesn't respond to a user's accessibility font-size preference the way rem does, and it carries no real advantage over px for on-screen work. For anything the user will only ever see on a screen, stick with px or rem; save pt for content headed to paper or a PDF.
There's also an accessibility angle. Browsers let users raise their default font size, and only relative units such as rem and em follow that setting. Text in pt behaves exactly like px here: it stays fixed. Page zoom still scales it, but a user who has simply asked for larger default text won't get it.
Using pt Correctly in a Print Stylesheet
Where pt shines is @media print. Paper has real inches, so a 10pt footnote really is 10/72 of an inch tall when printed at 100% scale:
@media print {
html { font-size: 11pt; } /* rem values now scale from 11pt */
h1 { font-size: 20pt; }
small,
.note { font-size: 8pt; }
table { border: 0.75pt solid #000; } /* 1px on screen */
}Setting the root size in pt is a neat trick: any rem-based sizes in your existing styles automatically adapt to a print-appropriate scale. More on this in CSS Units for Print vs. Web.
Common Mistakes
- Copying pt values straight into CSS as px. 12pt written as
12pxrenders 25% smaller than intended. - Treating pt as a "print-safe" screen unit. On screen it's just px multiplied by 1.3333; it doesn't look sharper or more consistent.
- Rounding too early. Convert all your sizes first and round at the end, otherwise small errors stack up across a type scale.
- Confusing pt with pc. A pica (
pc) is 12pt, or 16px.1pcand1ptare very different sizes.
Frequently Asked Questions
Is 12pt the same as 16px?
Yes, in CSS. Because 1pt is 1/72 inch and 1px is 1/96 inch, 12pt × 96 ÷ 72 = 16px exactly. In design software set to 72 PPI, however, 12pt is shown as 12px, which is where the confusion comes from.
Does DPI change the pt to px result?
In the browser, no — CSS always uses 96px per inch. A custom DPI only matters when you're converting for a different context, such as an image editor or a document set to a specific resolution. At 72 DPI, 1pt equals 1px; at 300 DPI, 1pt equals about 4.17 pixels.
Can I use pt for line-height or spacing?
You can, and it converts the same way, but for screen work it offers nothing over px. For line-height, a unitless value like 1.5 is usually best because it scales with the font size automatically.
How do I convert pt to rem?
Multiply by 1.3333 to get pixels, then divide by the root font size (16px by default). 18pt → 24px → 1.5rem.
Try it yourself: grab a font size from a print spec or document and drop it into our PT to PX converter (or its PX to PT counterpart) to get exact numbers, including at custom DPI values.