The difference between CSS text size px and pt

In web design CSS, fonts are often used, and there are two commonly used units for setting font size: px and pt. What's the difference between these two?

px: pixel, pixel, the smallest unit displayed on the screen;

pt: point, point, is a standard unit of length in the printing industry, 1pt = 1/72 inch;

In Windows, the default display settings define text as 96dpi. This illustrates: 1px=1/96 inch; and 1pt=1/72 inch. It can be concluded that in this setting, 1px=0.75pt, the font 9pt=12px.

However, the user can modify the dpi size defined by the text, for example, change it to 144dpi. In this way, 1px=0.5pt, and the font size is 9pt=18px. A text that was originally composed of 12px now needs to be composed of 18px. With more px, the text becomes "bigger" and easier to read.

Therefore, the difference between px and pt is that px will change with the resolution of the monitor, and pt will change with the font size setting of the Windows system.