When you need this conversion
Bringing sizes from a document, brand guideline or print layout into a web page or app. Brand books and style guides often specify type in points (“body copy 10 pt, headlines 24 pt”); CSS and design tools need pixels or rem.
Common sizes (96 DPI)
- 8 pt = 10.6667 px
- 9 pt = 12 px
- 10 pt = 13.3333 px
- 12 pt = 16 px
- 18 pt = 24 px
- 24 pt = 32 px
- 36 pt = 48 px
Print type at pixel resolution
When a print job is rasterized, text is rendered at the output DPI. A 12 pt line of type is 1/6 inch tall, which is 50 px at 300 DPI. That’s why small type still looks crisp in print but can look soft in a 96 DPI screenshot of the same document.
Common mistakes
Copying point sizes straight into CSS as px. “Headline 24” from a brand guide is 32 px on the web, not 24 px. Converting keeps the visual size the brand intended.
Rounding 13.3333 px to 13 px. Harmless for one label, but it compounds across a type scale. Browsers handle fractional pixel sizes, or use rem instead.
Reverse the conversion with pixels to points, or turn the pixels into rem with pixels to rem.