Relationship between point and pixel size

In digital typography, the size of text is commonly specified in points (pt). What is a point? A point is 1/72 of an inch (25.4 mm), i.e., 0.3528 mm (25.4/72). Therefor, point is a physical unit that has absolute value.

Pixels are the smallest unit on screen to display images and graphics. It is not a physical unit. So there is no fixed relationship between point and pixel.


Their relationship depends on the ppi (pixel per inch), A.K.A., pixel density.

How do we calculate ppi? It is simple. We need screen resolution and screen size. Screen resolution refers to how many pixels are there for its width and height. Ppi is equal to diagonal pixel number divided by screen size in inches. Here, we use pixel number in diagonal direction because the screen size are commonly measured diagonally (see here).

Take the iPhone 11 for an example. According to wikipedia:

The iPhone 11 has a 6.1 in (15.5 cm) IPS LCD, unlike the Pro models which have OLED displays.

The resolution is 1792 × 828 pixels (1.5 megapixels at 326 ppi) with a maximum brightness of 625 nits and a 1400:1 contrast ratio.

So the screen ppi of iPhone 11 is:

sqrt(1792*1792 + 828*828)/6.1 = 323.6

which is pretty close to the provided ppi value. There is also online tools to help us calculate the ppi values.

Once we know ppi value of a device, we can then know the relationship between point and pixel:

pixel = point/72 * ppi


font size for web design

It seems that for web design, there is another set of specification. There is relationship between pt and px. But px here is not referring to pixels in the digital device (computer screens for example). It is called CSS reference pixel. Since I am not a web developer right now, I will not dive too deep into this topic.