Points to Pixels: The Complete pt, px, em and rem Conversion Guide

72 points to an inch, 96 pixels to an inch, so 1 pt is exactly 1.333 px. The full pt, px, pica, em and rem conversion, and when to use each.

Introduction

A designer hands over a layout with 12 pt body text. The developer building it works in pixels. Somewhere between those two files, type size becomes a translation problem - and it is one that trips up print designers moving to the web, web developers preparing a document for print, and anyone who has ever wondered why 12 pt in Word looks nothing like 12 px in a browser.

The relationship is fixed, exact, and easy to remember once you see where it comes from. This guide covers the arithmetic between points, pixels, picas, ems and rems, the two places that arithmetic quietly stops being reliable, and which unit to actually reach for in a stylesheet.

The Core Mathematics: 72 and 96

Both units are defined against the inch, which is why the conversion is exact rather than approximate.

The point comes from print. In the PostScript definition that every modern design application uses, there are exactly 72 points to an inch, so a single point is 1/72 of an inch. This is the pt in Word, InDesign, Illustrator and every font menu you have ever opened.

The pixel in CSS is defined against the same inch. The specification fixes 96 CSS pixels to an inch, which makes the ratio between the two units a clean fraction:

1 pt = 96/72 px = 1.3333 px

1 px = 72/96 pt = 0.75 pt

(This is also why the browser default of 16 px equals exactly 12 pt - the size most word processors have used as their default body text for decades.)

The Conversion Formulas

Quick Reference: Points to Pixels

The sizes that actually appear in design systems and style guides, converted both ways:

Only a few point sizes land on whole pixels - 9, 18, 36 and 72 - because those are the multiples of 3 that divide cleanly by the 4/3 ratio. Everything else produces a fraction, which browsers handle by anti-aliasing rather than rounding.

Quick Reference: Pixels to Rems

Assuming the default 16 px root font size:

Em and Rem: The Units That Move

Points, pixels and picas are absolute - 12 pt is 12 pt wherever it appears. Ems and rems are not, and that is the entire point of them.

A rem is measured against the root font size of the document. One rem is 16 px on a default page, so the conversion is a simple division. Because it always refers back to that single root value, a rem behaves predictably no matter how deeply nested the element is.

An em is measured against the font size of its own parent element, and this is where it becomes slippery. If a container is set to 1.2 em and you nest another 1.2 em element inside it, the second one does not render at 1.2 - it renders at 1.44 (1.2 × 1.2). Nest a third and you are at 1.73. This compounding is useful when you deliberately want a component to scale with its context, such as padding that grows with the text it surrounds, and it is a well-known source of mystery type sizes when you did not.

A practical rule that holds up well in production: use rem for font sizes so type scales consistently, and reach for em only when you genuinely want a value tied to the local font size.

Why Rem Matters for Accessibility

This is the one part of the conversion that is not merely a matter of preference. Browsers let people set a preferred default font size, and a meaningful number of readers change it. Type sized in rem or em responds to that setting; type hard-coded in px does not.

Full-page zoom scales everything either way, so px is not broken - but a reader who has set their default to 20 px because they find 16 px hard to read will see no change on a site built entirely in pixel font sizes. Sizing text in rem is the single easiest way to honour that preference, and it is why most modern design systems store their type scale in rem even when the design file was drawn in px.

One related note on the popular 62.5% trick, where the root is set to 62.5% so that 1 rem conveniently equals 10 px. Because 62.5% is a percentage of the user's preferred size rather than a fixed value, it keeps that scaling behaviour intact. Writing font-size: 10px on the root instead achieves the same round numbers but discards the preference entirely.

The CSS Pixel Is Not a Screen Pixel

The 96-per-inch definition describes a reference pixel, not the physical dots in your display. On a high-density screen, one CSS pixel is painted using several device pixels - two across on a standard Retina display (a device pixel ratio of 2), three on many phones. A 16 px heading is drawn with 32 or 48 actual dots of detail, which is why text looks sharper on those screens without getting smaller.

The practical consequence is that you almost never need to think about device pixels when sizing type. You write CSS pixels; the browser handles the multiplication. Device pixels matter for raster images and hairline borders, not for font sizes.

Real-World Applications

Design handoff

Figma, Sketch and Adobe XD work in pixels; InDesign, Illustrator and Word work in points. When a print-trained designer specifies 10 pt captions, the developer needs 13.33 px, which is usually rounded to 13 px or expressed as 0.8125 rem. Converting once and recording both values in the design system saves the conversation happening again on every component.

Preparing web content for print

A print stylesheet is the one place where points genuinely belong in CSS. Physical paper has no viewport, and print drivers think in points, so setting body copy to 11 pt in a print media query produces more predictable output than hoping a pixel value resolves sensibly. Note that print devices work at their own resolution - at 300 DPI, a single point is 4.17 printer dots, not 1.33 of anything.

Legacy and specialist units

A few older units still turn up. A twip is 1/20 of a point (1,440 to the inch) and appears throughout Word and RTF documents. The Didot point of traditional European typography is about 1.066 pt, and twelve of them make a cicero, roughly 12.79 pt. Japanese typography uses Q, a quarter of a millimetre or about 0.709 pt. You will rarely set type in these, but you will occasionally need to read a value written in one.

Common Mistakes Worth Avoiding

Assuming 1 pt equals 1 px

They differ by a third. Treating a 12 pt design as 12 px produces text 25 percent smaller than intended, which is small enough to look like a deliberate style choice and large enough to hurt readability.

Using the wrong kind of point

The 72-per-inch PostScript point is the modern standard, but older typesetting used a point of about 1/72.27 inch. The difference is under half a percent and irrelevant on screen, though it can matter when reproducing historical type specimens exactly.

Converting rem without checking the root

Every px-to-rem figure assumes a 16 px root. If a stylesheet resets the root font size, every rem in the project shifts with it. Check the html rule before trusting any conversion table, including the one above.

Rounding a type scale into inconsistency

Rounding 13.33 px to 13 px in one component and 14 px in another breaks the ratio that made the scale look deliberate. Pick a rounding rule and apply it to the whole scale at once.

Conclusion

Two numbers carry this entire conversion: 72 points to an inch and 96 pixels to an inch. Multiply points by 4/3 for pixels, multiply pixels by 3/4 for points, and divide pixels by 16 for rems. The judgement call is not the arithmetic but the unit you commit to - points for print, rems for anything a person will read on screen and may need to enlarge.

To convert without the mental arithmetic, our points to pixels converter covers picas, twips, ciceros and the rest of the typographic units, and the pixels to rem converter handles the web side of the same scale. Because a point is defined as a fraction of an inch, our guides to converting inches to millimeters and millimeters to inches are the natural next step when a layout has to meet physical trim sizes.

Related Articles