PT to PX Converter
Convert typographic points to pixels for web design. Translate print designs to screen-ready CSS values.
Formula
px = pt × (96 ÷ 72) = pt × 1.333
Quick Reference Table
Print Units vs Screen Units
Points come from the world of print. One point equals exactly 1/72 of an inch. This made perfect sense when everything was printed on paper at a known physical size. A 12pt font on a printed page is always the same physical height, regardless of which printer you use.
Screens are different. A pixel does not have a fixed physical size. On a 27-inch 4K monitor, each pixel is tiny. On a 15-inch 1080p laptop, pixels are much larger. CSS solved this by making the "px" unit abstract. One CSS pixel is roughly 1/96 of an inch at a typical viewing distance, but it scales with the device.
The conversion between pt and px exists because the web adopted 96 DPI as its standard while print uses 72 DPI (72 points per inch). The ratio is 96/72 = 1.333, which is why every point value maps to a slightly larger pixel value.
Standard Typography Scale: Print to Screen
Here is how the classic print typography scale maps to screen pixels and CSS rem units. If you are converting a print design to web, this is your reference:
Code Examples
@media print {
body {
font-size: 12pt; /* Standard print body text */
line-height: 1.5;
color: #000;
background: #fff;
}
h1 { font-size: 24pt; }
h2 { font-size: 18pt; }
h3 { font-size: 14pt; }
/* Page margins in physical units */
@page {
margin: 2cm;
size: A4;
}
/* Hide screen-only elements */
nav, footer, .no-print { display: none; }
}/* Print spec: 12pt body, 24pt headings, 9pt captions */
/* Step 1: Convert pt to px (multiply by 1.333) */
/* 12pt = 16px, 24pt = 32px, 9pt = 12px */
/* Step 2: Convert px to rem (divide by 16) */
body { font-size: 1rem; } /* 16px = 12pt */
h1 { font-size: 2rem; } /* 32px = 24pt */
.caption { font-size: 0.75rem; } /* 12px = 9pt */
/* Or use clamp for fluid scaling */
h1 {
font-size: clamp(1.5rem, 1rem + 2vw, 2rem);
}function ptToPx(pt, dpi = 96) {
return pt * (dpi / 72);
}
function pxToPt(px, dpi = 96) {
return px * (72 / dpi);
}
// Standard screen (96 DPI)
console.log(ptToPx(12)); // 16
console.log(ptToPx(24)); // 32
// Print resolution (72 DPI, 1:1 ratio)
console.log(ptToPx(12, 72)); // 12Understanding DPI and Why It Matters
DPI stands for dots per inch. It describes how many individual dots (or pixels) fit into one physical inch. On a 96 DPI screen, there are 96 pixels per inch. Since one point is 1/72 of an inch, and there are 96 pixels in that inch, one point maps to 96/72 = 1.333 pixels.
On a 72 DPI device (like early Macintosh screens and most print setups), one point equals exactly one pixel. This 1:1 mapping is why points became the standard in print and desktop publishing software like InDesign and QuarkXPress.
Modern Retina and HiDPI displays have physical DPIs of 200 or more, but this does not affect the pt-to-px conversion. CSS pixels are an abstract unit that stays at the 96 DPI reference regardless of the actual screen density. A Retina display just uses more physical pixels to render each CSS pixel, making everything sharper without changing the layout math.
Frequently Asked Questions
How do I convert pt to px?
Multiply the point value by 1.333 (at standard 96 DPI). For example, 12pt times 1.333 equals 16px. The exact formula is pt times (96 / 72).
What is the difference between pt and px?
Points are a physical measurement from print design where 1pt equals 1/72 of an inch. Pixels are screen units with no fixed physical size. On a standard 96 DPI screen, 1pt renders as 1.333px.
Why is 12pt equal to 16px?
Standard screens display at 96 DPI while points are defined at 72 per inch. So 12pt times (96/72) equals 16px. This is why browsers default to 16px body text, matching the traditional 12pt print standard.
When should I use pt instead of px?
Use pt only in CSS print stylesheets (@media print) and when generating PDFs. For screen design, always use px, rem, or other web units. Points are designed for physical media, not screens.
What DPI should I use for conversion?
Use 96 DPI for standard screen conversion. This is what all major browsers use. Print design uses 72 DPI where 1pt equals exactly 1px. Retina screens have higher physical DPI but CSS pixels stay the same.
Does the conversion change on Retina displays?
No. CSS pixels are abstract units, not physical pixels. A 16px element is 16 CSS pixels on every screen. On a 2x Retina display, it uses 32 physical pixels, but the CSS calculation stays the same.
How do I use pt in a CSS print stylesheet?
Wrap your pt-based styles in @media print { }. Inside that block, use pt for font sizes and physical units like cm or in for page margins. Browsers convert these accurately when printing.
What is the standard body text size in points?
The traditional standard is 12pt for body text, which maps to 16px on screen. For headings, common sizes are 18pt (24px), 24pt (32px), and 36pt (48px).
Can I use pt in regular CSS (not print)?
You can, but it is not recommended. Browsers convert pt to px using the 96/72 ratio, but this makes your code harder to maintain. Other developers expect to see px or rem in screen stylesheets.
How does Word/Google Docs font size relate to CSS?
Word processors use points. When a document says 11pt, that equals about 14.67px on screen. A 12pt document body matches 16px. Use this converter to match document designs in your web CSS.
What about the pt unit in design tools like Figma?
Figma and Sketch actually use pixels internally, not typographic points. When Figma shows a font at 16, it means 16px, not 16pt. No conversion is needed when going from Figma to CSS.
How do I convert a full print design to web?
Convert all pt font sizes to px (multiply by 1.333), then convert those px values to rem (divide by 16) for a responsive web version. Convert physical dimensions (inches, cm) to viewport-relative units for layout.
Disclaimer: This tool provides approximate conversions for reference purposes. Results may vary slightly depending on browser rendering, root font size, and viewport settings. Always verify values in your specific development environment.