PT, PX, DPI: Misconceptions about length units

Length Unit

In typography, "point" is an absolute unit that is equal to 1/72 inches and can be measured by a ruler, in physical inches. But the meaning of PT in CSS is not so, for example, we specify a font is 9PT, we would think that according to the CSS specification, it is equal to:

9 * 1/72 = 1/8 inch

This is a misunderstanding, because our display is divided into pixels, a single pixel can only have one color (for simplicity, the pixel anti-aliasing technique is not discussed here), to be displayed on the screen, you must first convert the length in PT to the length in pixels, which is the medium of the DPI ( In fact, the so-called DPI here is the term used in operating systems and browsers, that is PPI, pixels per inch, and the DPI in scanners, printers, and digital cameras are different concepts.

For example, no matter which operating system the Firefox browser defaults to the DPI is 96, then actually 9PT = 9 * 1/72 * = 12px.

So, although "I" in "DPI" and "1pt equals 1/72 inch" in "inch" do not represent physical inches, these two units are equal to each other and are lost in the multiplication.

So how does a real physical length count? Please take out a ruler and measure the visible width of your display (I am here 11.2992 inches), divided by the horizontal resolution (I am 1024 pixels here), and I get the physical length of each pixel.

Now we can answer the question, how much space does the 9pt font occupy on the page? The answer is:

9 * 1/72 * 96 * 11.2992/1024 = 0.1324 inches = 0.3363 cm.

Interested friends can check it out for themselves.