Pixels to Points (px to pt)

In modern web typography under CSS specifications, the pixel (px) is the CSS reference pixel — a logical unit nominally equal to 1/96 inch (about 0.2646 mm) at the CSS reference viewing distance. The unit scales by device-pixel-ratio for high-DPI displays: a "Retina" display with 2x device-pixel-ratio renders one CSS pixel as a 2×2 grid of physical hardware pixels, preserving the visual size while doubling the rendering resolution. The CSS pixel relationship to other typography units is fixed under the 96-dpi convention: 1 inch = 96 px, 1 cm = 37.795 px, 1 mm = 3.7795 px, 1 pt = 4/3 px ≈ 1.3333 px, 1 pc = 16 px (with the pica equal to 12 points). The 96-dpi convention is the universal reference across modern web browsers (Chrome, Firefox, Safari, Edge), CSS specifications, and screen-typography work. Print-typography traditionally uses points (1 pt = 1/72 inch), and the 96-dpi-versus-72-dpi distinction explains the 4/3 factor between web pixels and print points. Modern operating systems may override the 96-dpi default through display-scaling settings, but CSS reference pixel calculations remain anchored to the 96-dpi reference.

The pixel (a portmanteau of "picture element") emerged in 1960s digital-image-processing research at JPL, Bell Labs, and similar laboratories as the discrete addressable unit of a raster-scanned digital image. The term was coined by JPL researcher Frederic C. Billingsley in 1965 in connection with the Mariner mission imaging-systems work. As digital displays evolved through the 1970s and 1980s — from monochrome CRT terminals through colour CRTs and into early LCD displays — the pixel became the fundamental unit of screen-based typography and graphics. The CSS Working Group standardised the CSS reference pixel in 1996 as part of CSS1, with the original definition tied to a 96-dpi reference viewing-distance of an arm's length from a desktop monitor. The 2010 CSS3 spec formalised the reference-pixel abstraction: 1 CSS pixel ≈ 1/96 inch at the reference viewing distance, scaled by device-pixel-ratio for high-DPI ("Retina") displays. Modern web typography overwhelmingly uses pixels (px) as the base unit for font-sizes, line-heights, padding, margins, and component dimensions, with em-and-rem relative units providing scale-relative-to-parent and scale-relative-to-root respectively. The 96-dpi reference convention also drives the conversion between pixels and traditional print-typography points (1 pt = 4/3 px at 96 dpi).

Web typography globally — CSS font-size, line-height, padding, margin, border-radius, border-width, and component-dimension specifications all use pixels as the base unit on every modern web browser. CSS frameworks (Tailwind CSS, Bootstrap, Material-UI, Ant Design) all use px as the primary spacing-and-typography unit, with em-and-rem relative units providing scale-relative-to-parent and scale-relative-to-root flexibility. Mobile-app typography on iOS uses points (which on iOS are implementation-detail-equivalent to CSS pixels at the reference scale, scaled by device-pixel-ratio), Android uses density-independent-pixels (dp/dip) which are similarly reference-scaled. Digital-image-processing and computer-graphics: image dimensions, sprite-sheet layouts, texture-coordinate-mapping all use pixels. Screen-typography: every modern operating-system font-rendering pipeline computes glyph dimensions in pixel-equivalent units. Game-development and game-engine frameworks (Unity, Unreal, Godot) use pixels as the canonical 2D-coordinate unit. Email-template typography uses pixels heavily for cross-client compatibility (Outlook, Gmail, Apple Mail all render pixel-based dimensions consistently). Print-design software (Adobe InDesign, Affinity Publisher) supports both pixel-and-point input with automatic 96-versus-72-dpi conversion at the print-output boundary.

The typographic point (pt) is defined under modern PostScript-and-CSS conventions as exactly 1/72 inch (0.352777778 mm). The relationship is fixed by the 1984 Adobe PostScript specification and preserved in modern CSS, PDF, and print-design conventions. The pica is 12 points (1 pc = 12 pt = 1/6 inch ≈ 4.233 mm). The 1 pt = 4/3 px conversion under the 96-dpi web convention follows directly from the 96-dpi-versus-72-dpi factor: at 96 dpi, 1 inch = 96 px and 1 inch = 72 pt, so 1 pt = 96/72 px = 4/3 px ≈ 1.3333 px. The reverse: 1 px = 72/96 pt = 3/4 pt = 0.75 pt. Older Didot points (Continental European typography, 0.376 mm) and traditional pica points (1/72.27 inch, 0.351 mm) survive in legacy typography literature but are deprecated in modern digital-design work. The DTP point dominates contemporary typography, with print-design software, web-typography, and PDF-typography all anchored to the 1/72 inch convention.

The typographic point traces to early-modern European printing, with the first formal point system attributed to Pierre Simon Fournier in his 1737 Manuel typographique and refined by François-Ambroise Didot in the 1780s. The Didot point (~0.376 mm) became the European typographic standard, while the Anglo-American or "pica point" emerged in the late 1800s as the standard for English-and-American printing at exactly 1/72.27 inch ≈ 0.351 mm. The DTP point (desktop-publishing point, also called PostScript point) was formalised in 1984 with Adobe PostScript at exactly 1/72 inch (0.352778 mm) for cleaner integer-fraction relationships, and this DTP point has become the universal modern typographic point under CSS, PDF, PostScript, and Adobe-product conventions. The relationship 1 pica = 12 points dates to nineteenth-century Anglo-American printing and survives in modern typography. The conversion between points and pixels under the 96-dpi web convention is 1 pt = 4/3 px exactly (96/72 = 4/3), which is the universal print-to-screen typography conversion factor in modern web-and-print design work. Modern print-design software (Adobe InDesign, Adobe Illustrator, QuarkXPress, Affinity Publisher) uses the DTP point as the canonical typography unit, with pixel input automatically converted at the 96/72 ratio for cross-medium design work.

Print-typography globally — every modern print-design pipeline (Adobe InDesign, Illustrator, Photoshop print-layout, QuarkXPress, Affinity Publisher) uses the point as the canonical font-size, line-height, leading, letter-spacing, and margin-and-padding unit. Word processors (Microsoft Word, Google Docs, Apple Pages, LibreOffice Writer) use points for font-size specifications, with typical document-body text at 11-12 pt and headings at 14-24 pt. PDF-typography uses points internally (PDF coordinates and font-size specifications all run in points). PostScript and the modern PostScript-derived languages use points as the canonical unit. CSS supports point input (font-size: 12pt) which renders identically to font-size: 16px under the 96-dpi web convention. Print-publishing pipelines convert pixel-based digital-source assets to point-based print-output specifications at the 4/3 factor. Email-template typography occasionally uses points for cross-client compatibility, especially in Outlook-bound mailings where pt-based specifications render more consistently than px-based across Outlook's Word-rendering-engine quirks. Academic-and-scientific typography (LaTeX, Pandoc, scholarly-publishing) uses points as the canonical unit, with typical paper-body text at 10-12 pt and section-heading sizes scaling up from there.