Verification: factors follow standard unit definitions; round for display only.

Pixels to points

Convert CSS pixels (px) to typographic points (pt) when a print spec, Word document, or InDesign layout lists point sizes but your web implementation, Figma frame, or design token file uses pixels.

On the web, a CSS pixel is a logical unit tied to the W3C reference of 96 px per inch. A point is a traditional print unit: 72 pt per inch (1 pt = 1/72 inch). Because both units anchor to the same inch, the px↔pt ratio is fixed at standard screen resolution—not a guess from your monitor.

Under this site's typography catalog (and CSS absolute-length semantics at 96 DPI), 1 px = 0.75 pt and 1 pt = 4/3 px (1.333… px). The forward formula is a simple multiply; no offset term is required unlike temperature scales.

pt = px × 0.75  ·  equivalently   pt = px × (72 ÷ 96)

Where the 0.75 factor comes from

CSS defines 1 in = 96 px and typography defines 1 in = 72 pt. Equating inches: 96 px = 72 pt, so 1 px = 72/96 pt = 0.75 pt. This is the same ratio used by major px↔pt converters and by browser layout when you set font-size in pt on screen media.

Step-by-step conversion (worked examples)

Convert 16 px to points (the classic body-text size on the web):

1. Apply the catalog factor: 16 × 0.75 = 12 pt
2. Sanity check: 12 pt is the long-standing print default for body copy; 16 px is the default root size in browsers—those two conventions meet at this conversion.

Convert 24 px to points (common H2/subheading in design systems):

1. 24 × 0.75 = 18 pt
2. Reverse-check: 18 ÷ 0.75 = 24 px—round-trip confirms the factor.

The calculator above applies this logic instantly; the steps help you audit Figma exports, token spreadsheets, or print proofs without re-deriving the inch equivalence each time.

Font-size reference chart (px → pt at 96 DPI)

Where px → pt shows up in real workflows

• Web design → print PDF: A developer implements 16px body text; the print vendor asks for 12 pt—multiply by 0.75 before placing copy in InDesign or Word.
• Figma / design tokens: Most UI kits spec font sizes in px. Exporting a style guide for a print brochure requires pt equivalents for the production team.
• Email and document handoff: Outlook and Word often default to point sizes; mapping your CSS pixel scale prevents “looks right on screen, wrong on paper” surprises.
• Accessibility audits: When comparing against WCAG guidance stated in px, but legacy brand guidelines list pt, convert with the fixed ratio rather than eyeballing.

Points to pixels

Convert pt to px when a magazine layout, academic template, or client brief specifies point sizes but your CSS, React theme, or Tailwind config expects pixel (or rem-derived) values.

Invert the forward relationship with the reciprocal factor. At 96 DPI, each point spans more than one CSS pixel because there are fewer points per inch (72) than pixels per inch (96).

px = pt ÷ 0.75  ·  equivalently   px = pt × (96 ÷ 72) = pt × 4/3

Step-by-step conversion (worked examples)

Convert 12 pt to pixels:

1. Divide by 0.75 (same as × 4/3): 12 ÷ 0.75 = 16 px
2. This is why “12 pt body” in Word aligns with “16 px body” in modern CSS when the root font size is left at browser defaults.

Convert 14 pt to pixels (common office-document subheading):

1. 14 × (4/3) = 14 ÷ 0.75 ≈ 18.67 px
2. In production CSS you might round to 19 px or use 1.167rem at a 16 px root—document the rounding rule for your team.

Font-size reference chart (pt → px at 96 DPI)

Reverse conversion is essential when importing print brand guidelines into a design system measured in px, or when a PDF style spec must become font-size declarations in CSS.

CSS px vs print pt, rem/em notes, mistakes, and related tools

Pixels and points are both absolute CSS length units at 96 DPI, but they optimize for different media. Use the fixed ratio, prefer rem for scalable UI text, and validate with round-trip anchors.

CSS pixels vs typographic points

em and rem (brief relationship to px and pt)

rem is relative to the root element's font size (usually 16 px in browsers). em is relative to the current element's computed font size. Neither unit replaces the px↔pt ratio—they solve a different problem (scaling and cascade), but they connect at the default root:

• 16 px = 1 rem (default root) = 12 pt at 96 DPI.
• 14 px ≈ 0.875 rem = 10.5 pt.
• 24 px = 1.5 rem = 18 pt.

Best practice for accessible web UI: implement body and headings in rem, convert design-tool px to rem (divide by 16 at default root), and use px→pt only when crossing into print deliverables—not as the primary screen unit.

Figma, web, and print handoff checklist

• Confirm the handoff assumes 96 DPI CSS pixels, not Photoshop’s legacy 72 PPI screen assumption or arbitrary export scales.
• Map the approved type scale once (e.g. 12 / 14 / 16 / 18 / 24 px) to pt for print using the chart above; store both columns in your token JSON.
• For @media print, you may set font-size: 12pt directly; for screen, prefer 1rem and let user font preferences scale text.
• High-DPI phones do not change the math: 16 CSS px still converts to 12 pt; only the physical pixel density increases.

Common mistakes to avoid

• Using 72 DPI for px↔pt on the web—that was an old Mac convention; CSS uses 96 px per inch, which yields 0.75, not 1.0.
• Treating pt like px on screen—they render at the fixed ratio but do not respect user root font-size changes the way rem does.
• Rounding every intermediate step—carry full precision (e.g. 14 pt → 18.666… px) and round once for the final CSS value.
• Mixing physical printer DPI with CSS px—printer resolution (300/600 DPI) affects output quality, not the pt = px × 0.75 formula.

Exactness and round-trip verification

Factors 0.75 and 4/3 are exact rationals from 72/96. Converting 16 px → 12 pt → 16 px should recover the original within floating-point limits. Anchor checks: 1 px = 0.75 pt, 16 px = 12 pt, 96 px = 72 pt = 1 in.

Related typography converters

For the inverse of this page, open point to pixel. For inch-based layout and plate sizing, see point to inch, inch to point, and point to pica. Browse all typography tools on the typography category page.