Convert typographic points to pixels

A point is a printing unit. One point measures 1/72 inch, or 0.3528 mm, and that is the measure Word, InDesign and Illustrator hand you when you set a font size. A pixel is a screen unit, and in a stylesheet it equals 1/96 inch, or 0.2646 mm [1]. The whole conversion is the ratio between those two numbers: 96 divided by 72 gives 1.333.

That produces the pair every front-end developer knows by heart: 12 pt is 16 px. Sixteen pixels is the default text size in every browser and the value one rem takes, so a document set in 12-point type carries the same size straight onto a web page.

The converter suits designers handing a layout to a developer, anyone building an email signature, and everyone who receives a spec in points while working in a tool that speaks pixels.

Below you will find a table of 30 font sizes, a table of stroke weights, a comparison of five point systems and instructions for switching units in Illustrator, Photoshop, InDesign, Affinity, Inkscape, Figma and Word. The opposite direction lives on the pixels to points converter.

The formula has one shape: pixels = points × 96 ÷ 72, which is multiplying by 4/3. Going the other way, multiply pixels by 0.75. Eighteen points gives 24 px, twenty-four points gives 32 px, and 36 pt gives exactly 48 px.

Seventy-two points is exactly one inch, so 72 pt matches 96 px and 25.4 mm. That equality makes a handy check when you are doing the sum in your head. It works downward too: 0.75 pt is exactly one pixel, and 1.5 pt is two.

Why 96, though? The W3C fixed one inch in a stylesheet at 96 pixels and described the reference pixel as the visual angle of a single pixel on a 96 dpi display held at arm’s length [1]. The number itself is older than the web and comes from a decision made at Microsoft in the 1980s.

The first Macintosh screen held 512 × 342 dots at 72 PPI, a density chosen so that one pixel would land on one typographic point. PC monitors of the day were close to that, but Microsoft noticed that a monitor sits roughly a third further from the eye than a sheet of paper held in the hand, so screen text has to be larger. Windows began reporting a density inflated by exactly that third: for displays that really ran at 72 PPI it announced 96 PPI [2]. Text became readable, eleven point on Windows matched eight point on the Macintosh, and 96 stayed in the system, then in browsers, and finally in the CSS standard.

For most of the history of printing a point meant something different in every country, and each type foundry kept its own measures. Pierre Simon Fournier was the first to bring order to it in 1737, cutting his punches to a scale of 72 points to the Paris inch. Half a century later François-Ambroise Didot tied his point to 1/864 of the pied du roi, which gave 0.376 mm, and that measure spread across continental Europe [3].

English-language printing went its own way. The American Type Founders settled in 1886 on a point of 0.013837 inch, which left 72 points at 0.99624 inch, about 0.4% short of the inch itself [3]. Twelve of those points make a pica, still the working unit for column widths in newspapers and books.

Newsrooms kept an even smaller measure. An agate is 5.5 points, roughly 1.94 mm, and it is the size American papers reserve for sports scores, classified ads and legal notices, on the reasoning that nothing smaller stays legible on newsprint. British printers call the same size ruby [4]. In pixels an agate line comes to 7.33 px.

The round number arrived only with PostScript. Adobe decided in 1984 that a point would be exactly 1/72 inch, and Apple built Macintosh typography on that, with a screen running at 72 pixels per inch. That is the point the converter above works with, and the definition the CSS standard repeats [1]. Twelve of those points make a pica, which comes to exactly 16 pixels at 96 DPI and 50 at 300 DPI — the picas to pixels converter handles that step.