pt
The typographic point: 1/72 of an inch, which is 1.333…px on screen.
Safe to useBaseline: widely available
| Browser | Since |
|---|---|
| Chrome | 1+ |
| Chrome Android | 18+ |
| Edge | 12+ |
| Firefox | 1+ |
| Firefox Android | 4+ |
| Safari | 1+ |
| Safari iOS | 1+ |
Formula 1pt = 1/72in = 4/3px
How it works
A point is 1/72 of an inch, which makes 1pt exactly 4/3 of a CSS pixel, or 1.3333px. The unit is on the web because print is where type sizes were born: word processors and PDF tools count in points, so a number copied from one of them arrives in pt. Most of those numbers land between pixels: 11pt is 14.666…px and 10pt is 13.333…px, and only sizes divisible by 3, such as 12pt at 16px, come out whole.
On a screen the point has no physical meaning. Because the inch is fixed at 96px, a laptop and a phone both turn 12pt into 16px, and how large that looks is left to the device pixel ratio. The reader’s default font size does not change pt values either, which is the part that matters for accessibility: with the default raised to 24px in Chromium, 1rem followed it and 12pt stayed 16px. Sizes in points are as stubborn as sizes in pixels.
Where pt is honest is a print stylesheet. Printed to PDF from Chromium, a paragraph with font-size: 11pt came out as 11 points of type, and a box 72pt wide was exactly one inch of paper. On screen, keep it for a value that arrived in points and has to stay recognizable in the code, such as a size quoted from a brand manual. The reader’s setting still does not reach it.
Try it
Convert between the absolute units
Type a length in one unit and read it in all seven. Every absolute unit is a fixed number of CSS pixels, so the conversion needs no screen.
px- 96
pt- 72
pc- 6
in- 1
cm- 2.54
mm- 25.4
Q- 101.6
The same as a table
| Unit | CSS pixels in 1 of it |
|---|---|
1px | 1px |
1pt | 1.3333px |
1pc | 16px |
1in | 96px |
1cm | 37.795px |
1mm | 3.7795px |
1Q | 0.94488px |
What changes it
- Moves with
- page zoom
- Stays put under
- the reader's text size
- the window size
- the font in use
- the query container
- phone toolbars
- the writing mode
Reach for it when
Print stylesheets, where the sizes on the page are the sizes the designer quoted.
Watch out
Points sound physical, but on a screen they are not. 12pt is exactly 16px everywhere, whatever the real size of the display.
Before
.legal {
font-size: 9pt;
}After
@media print {
body { font-size: 11pt; }
}