The difference between the PT and PX of text size in web design CSS

First understand the basic concept: PX is to represent pixel, pixels, is the screen to display the most basic points of data, and PT is point, is the printing industry commonly used units, equal to 1/72 inches.

In the web design CSS, often used fonts, and font size set units, commonly used in 2 kinds: px, pt. What's the difference between these two?
First understand the basic concept: PX is to represent pixel, pixels, is the screen to display the most basic points of data, and PT is point, is the printing industry commonly used units, equal to 1/72 inches.
This is clear, PX is a point, it is not the nature of the length of units, who can say a "point" how long? Can be painted very small, can also be very large. If the point is very small, the picture is clear, we call it "high resolution", on the contrary, is "low resolution." Therefore, the size of the "point" will be "variable", also known as "relative length."
PT is all called point, but Chinese is not called "dot", search PowerWord can see, the exact saying is a dedicated printing unit "pound", size is 1/72 inches. So it is a natural standard of length units, also known as "absolute length."
So it is said that in web design, the pixel is the relative size, and point is the absolute size.
But there are still problems with this statement, let's take a look at the following examples:

From the font above we can see that 72px is smaller than 72pt, but 96px is just as big as 72pt.
Let's adjust the computer settings: on the Desktop right > Properties > Settings > Advanced > General > DPI setting > DPI.
Try changing the settings, set to 72DPI, reboot, and then open the browser to see: 72px is equivalent to 72pt. Why?
Or do another experiment: with 800x600 and 1024x768 to see just the example, obviously high resolution, the text becomes smaller. And, the key is, whether with PX or PT, will become smaller. PT is not, as some people say, "absolute", "fixed".
But if you print this page out with a printer, you can see that the size of the print is the same regardless of the screen resolution (which is, of course).
The first thing to distinguish between the "screen effects" and "Print Effect" concepts:
In the process of browsing the web, all the "big" and "small" concepts are based on the "screen" of the "interface". All kinds of information on the screen, including text, pictures, tables, and so on, will vary with the resolution of the screen, a 100px-width picture, at 800x600 resolution, will account for 1/8 of the screen width, but in 1024x768, it only accounts for about 1/10. So if you define the font size, use PX as the unit, that once the user changes the display resolution from 800 to 1024, the user actually see the text will change "small" (natural length unit), or even can not see clearly, affect browsing.
That is not the use of PT units do not have such a problem? Wrong! Problems also arise. The example has been clearly explained that at different resolutions, whether PX or PT, will change the size. With the current computer screen situation, there is no one unit can guarantee that at different resolutions, a text size can be "fixed." Because this is very difficult to achieve and is not very necessary: the global computer users to millions of people, the screen from 14 inches to 40 inches or even higher, the screen size is different, the resolution is different, to ensure that a font in front of all users the same size, it is mission impossible. In addition, the computer has its own regulation, the user can adjust themselves: 1 in the browser to adjust the font size, 2 in the display properties mentioned earlier, adjust.
In the page design in the end is using PX or pt it?
I think that there is no principled difference, it depends on what perspective of their thinking.
Mac how the situation is not clear, in Windows, the default display settings, the text defined as 96DPI (PPI, Microsoft will be DPI and PPI mixed together, we do not need to be serious). Such a definition illustrates the following: 1px=1/96 inches. The concept of contact PT, 1pt=1/72 inches, can be drawn in such settings as 1PX=0.75PT, the common 9pt=12px of the song body. In the display resolution on the basis of the same (for example, now commonly used 1024x768), 1px size is fixed unchanged, change the display settings, adjust to 144DPI, can be drawn, 1px=0.5pt, common song body 9pt=18px. Originally used 12px to compose a text, now need 18px to compose, PX more, the text is "big", easier to read.
Therefore, the use of PX and PT difference, only when the user changes the default 96DPI will produce: Use PX definition text, no matter how the user settings, will not change the size; Use PT to define the text, when the user sets the value of more than 96DPI, the larger the number, the larger the font.
(attached formula: px = pt * dpi/72)
By the way, I mentioned the option of changing the size of the text in the browser, and can also change the text size of the page. But in this case, the use of PX and PT is not valid, because these 2 are the actual "pixel" number of units, such as 9pt is 12px, fixed size. Here to quote the new unit: EM, in fact, is%. Because when the font in the Web page does not give the actual PX or PT definition, there will be a default value: 12pt is 16px, the corresponding browser in the "Font size" in the "medium", to this as the standard, larger or smaller. (ie, in FF, even if the definition of PX or PT can be larger and smaller)
So, from this concept, EM is the real "relative unit" (percent, of course, relative), and PX and PT are absolute units (all have fixed values).
In web design, the basic unit of the user-oriented screen is PX, so the use of PX as the unit is the simplest and easiest to understand, and the PT is only through the Windows settings by a ratio of the conversion into PX and then show, is a circle around. Refer to most of the large web sites, including Adobe and Microsoft, are using PX as the unit, and in the HTML, the default unit is PX, is it also imply that PX is the web design of the "default unit"?
But in Word or in, using PT is quite handy. Because the main purpose of using Word and Photoshop is not for screen browsing, but for print output. When printing to the entity, the PT as a natural length unit is convenient and practical: for example, ordinary documents in Word are used "song Body 9pt", the title of "bold 16pt" and so on, no matter how the computer settings, print out is always so big. Or in Photoshop, set a picture of an artistic effect of the font is 72pt size, and then the picture is set to 300DPI and 72DPI, and then printed out, you can see that these 2 font size exactly the same, but "sharpness" different, 300DPI clearer. There is no doubt about the result.

Finally, tidy up all the units that have appeared:
Px:pixel, pixel, the smallest unit displayed on the screen, for web design, intuitive and convenient;
Pt:point, is a standard length unit, 1pt=1/72 inches, used in the printing industry, is very simple and easy to use;
EM: That is%, in CSS, 1em=100%, is a ratio that combines the use of CSS inheritance relationships with flexibility.
PPI (DPI): pixel (dot) per inch, the number of pixels in each inch (dots), is a rate that represents "sharpness", "precision". --> -->