Unit of CSS length: difference between PX and PT

First, find out the basic concept: Px represents pixel, pixels, and is the most basic point for displaying data on the screen; Pt is the point, which is a common unit in the printing industry and equals to 1/72 inch.

It is clear that PX is a point, which is not a unit of natural length. Who can tell how long a "point" is? It can be very small or large. If the point is very small, the image will be clear. We call it "High Resolution", and vice versa, it will be "low resolution ". Therefore, the "point" size is changed, also known as "relative length ".

PT is called a point, but it is not called a "point" in Chinese. As you can see, the exact description is a special printing unit, which is 1/72 inch in size. Therefore, it is a natural standard unit of length, also known as "absolute length ".

Therefore, in web design, pixel is the relative size and point is the absolute size.

But there is still a problem with this Statement. Let's take a look at the example below:

Text 72px

 

 

Text 72pt

 

 

Text 96px

Do you see any name?

72px is smaller than 72pt, but 96px is exactly the same size as 72pt.

Let's adjust the computer settings: Right-click on the desktop> Properties> Settings> advanced> General> DPI setting> 96 DPI.

Try to change the settings, set it to 72 dpi, restart, and then open the browser to see that 72px is equivalent to 72pt. Why?

Let's try another experiment: Let's use 800x600 and 1024x768 to see the example above. Obviously, the text gets smaller at a high resolution. In addition, the key is that both PX and PT will decrease. PT is "absolute" and "fixed", as some people have said.

However, if you print the page with a printer, you can see that no matter what resolution the screen uses, the size of the page is the same (this is of course ).

First, we need to distinguish between "Screen Effect" and "print effect.

All the concepts of "big" and "small" are based on the "screen" interface. Various information on the "screen", including text, images, tables, and so on, will change with the screen resolution. A 800 PX width image is at a resolution of 600 ×, it accounts for 1/8 of the screen width, but in 1024 × 768, it only accounts for about 1/10. Therefore, if PX is used as the unit when the font size is defined, once the user changes the display resolution from 800 to 1024, the actual text displayed by the user will be changed to "small" (natural length unit ), it may even be invisible, affecting browsing.

Isn't that the case if PT is used as the unit? Error! The problem also occurs. The preceding example clearly shows that the size of PX or PT varies with different resolutions. In the current computer screen, there is no such Unit to ensure that the size of a text can be "fixed" at different resolutions ". This is hard to implement and is not necessary: the number of computer users worldwide ranges from to 40, with different screen sizes and resolutions, it is really mission impossible to ensure that a font is the same size in front of all users. In addition, the computer has its own regulatory capabilities that users can adjust themselves: 1) Adjust the font size in the browser; 2) Adjust the display attributes just mentioned.

So is PX or PT used in page design?

In my opinion, there is no difference in principle. It depends on how you think.

The Mac machine is unclear. In Windows, the default display settings define the text as 96 DPI (PPI, Microsoft combines DPI and PPI, we don't need to be honest ). This definition indicates 1px = 1/ 96 inch. The concept of contacting PT, 1pt = 1/72 inch, can be concluded that in such a setting, 1px = 0.75pt, the common 99pt = 12px. On the basis of the unchanged display resolution (for example, the commonly used 1024 × 768), the size of 1px is fixed, and the display setting is changed to 144 DPI. It can be concluded that 1px = 0.5pt, common 99pt = 18px. A text originally composed of 12 PX, which is now composed of 18 PX. If more PX is used, the text is "big" and easier to read.

Therefore, the difference between Px AND Pt is that it is generated only when the user changes the default 96 DPI:Using PX to define text will not change the size no matter how you set it. Using Pt to define text, when the user sets a value that exceeds 96 DPI, the larger the value, the larger the font.

(Formula: Px = Pt * DPI/72)

By the way, we also mentioned the option of changing the text size in the browser, which can also change the text size of the webpage. In this case, the use of PX and PT is invalid, because the two are all units with the actual "pixel" value, for example, 9pt is 12px and the size is fixed. Here we will reference the new unit: Em, Which is %. Because when the font in the webpage does not provide the actual PX or PT definition, there will be a default value: 12pt, that is, 16px, corresponding to the "medium" in the "font size" in the browser, this is the standard, increase or decrease.(Only applies to IE. In ff, even if PX or PT is defined, it can also become larger and smaller)

Therefore, from this perspective, Em is the true "relative unit" (percentage, of course, relative), while Px AND Pt are absolute units (both have fixed values ).

In webpage design, the basic unit of user-oriented screens is PX. Therefore, using PX as the unit is the simplest and easiest to understand, PT, however, is just a circle after passing the Windows Settings to multiply A ratio into PX and then display it. Refer to most large websites, including Adobe and Microsoft, which use PX as the unit. In HTML, the default unit is PX, does it also imply that PX is the "internal unit" of Webpage Design "?

However, it is quite convenient to use PT in word or photoshop. Because the main purpose of using word and Photoshop is not to view the screen, but to print the output. When printed to an object, PT is convenient and practical as a unit of natural length. For example, common documents in word use "99pt" and titles use" 16pt, no matter how the computer is set, printing will always be so big. Or in Photoshop, set the font of an artistic effect in an image to PT, set the image to DPI and 72 dpi respectively, and print the image, the two fonts have the same size, but the definition is different and the DPI is clearer. This is undoubtedly the result.

Finally, sort out all the units that have appeared:

Px: pixel, pixel, the smallest unit displayed on the screen, used for Webpage Design, intuitive and convenient;

PT: point, a standard unit of length, 1pt = 1/72 inch, used in the printing industry, very easy to use;

EM: %. In CSS, 1em = 100% is a ratio, which is used in combination with CSS inheritance relationships and is flexible.

PPI (DPI): pixel (DOT) per inch, number of pixels (points) per inch, which is a rate, indicating "resolution" and "accuracy"

(Note: In the future development trend, the traditional CRT display will be eliminated by the LCD, And the LCD has a characteristic that the resolution is fixed, unlike the CRT, A 17-inch CRT can range from 640x480 to 1600x1200, but a 17-inch LCD only has a standard resolution of 1280x1024, which is also the maximum resolution and is full of screens, black borders are not left around like CRT. manual adjustment is required. Therefore, when a computer looks at the webpage in the future, the effect can be relatively stable. With the development of technology, the "precision" of the LCD is getting higher and higher. First, calculate the "precision" (PPI, DPI) of the LCD ):

The resolution of a 15-inch LCD is 1024x768, And the diagonal line length is 15 inches. According to the stock theorem, it is easy to calculate that the screen width is 11.55 inch, and then divide it by 1024, it is concluded that the 15-inch LCD is 88.68 DPI, and the rest is the same. view the data:

15 "(1024*768): 88.68 DPI

17 "(1280*1024): 96.42 DPI

19 "(1280*1024): 86.27 DPI; 19" W (1440*900): 89.37 DPI

20 "(1600*1200): 103.92 DPI; 20" W (1680*1050): 99.06 DPI

22 "W (1680*1050): 90.05 DPI

24 "W (1920*1200): 94.34 DPI

In the past, the average 15-inch CRT was about 72 dpi at a resolution of 800x600. Let's calculate the most commonly used "99pt (12px)". What is the actual visual size under various monitors:

15 "CRT (800*600): 12/72 = 0.167 inch, about 4.2mm, which is very easy to recognize, which is why the most popular Chinese font size in the past few years

LCD: 15 ": 0.135 inch, 17": 0.124 inch, 19 ": 0.139 inch, 19" W: 0.134 inch, 20 ": 0.115 inch, 20" W: 0.121 inch, 22 "W: 0.133 inch, 24 "W: 0.127 inch

Basically, less than 0.13 inch. for users with poor or old eyesight, reading is difficult, less than 0.12 inch, even if the average user feels hard. Therefore, in this case, the font size above 16 PX is usually used. If the font size is 9pt, the display attribute is changed and the display property is changed to over 16 PX indirectly.

Let's take a look at the situation on the PDA. Dell has an x50v with a resolution of 640x480. The screen size is 3.7 inch. You can calculate it. The screen is an astonishing 224.70 DPI, which is terrible, 12px characters are almost unrecognizable in it, so there is another type of font to suit these high-resolution occasions. At the same time, such fonts are clearer and smoother, similar to traditional printing.

I believe that in the near future, the desktop computer system will also be like this, so that we can browse Web pages as beautifully and visually as reading magazines .)