PT and PX Differences

Font size of the set units, commonly used in 2 kinds: px, pt. What is the difference between the two?

First understand the basic concept: PX is to represent pixel, pixels, is the most basic point of display data on the screen;

PT is point, a common unit in the printing industry, equal to 1/72 inches.

This is clear, PX is a point, it is not the length of the natural unit, who can say a "point" how long? Can be painted very small, can also be very large. If the point is small, the picture is clear, we call it "high resolution", conversely, is "low resolution." Therefore, the size of the "point" will be "changed", also known as the "relative length".

PT is all called point, but Chinese is not called "dot", check PowerWord can be seen, the exact statement is a dedicated printing unit "pounds", the size of 1/72 inches. So it is a natural standard length unit, also known as "absolute length".

So there is the argument that pixel is relative in size and point is absolute size.



Distinguish between "screen effects" and "Print Effects":

All of the "big" and "small" concepts are based on the "screen" interface during Web browsing. The various information on the screen, including text, pictures, tables, and so on, will vary with the resolution of the screen, a 100px width-sized picture, at 800x600 resolution, to occupy 1/8 of the screen width, but at 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 become "small" (natural length units), even can not see clearly, affect browsing.

Is it not a question of using PT as a unit? Wrong! The problem also arises. Just now the example is very clear, at different resolutions, both PX and PT, will change the size. With the current computer screen situation, there is no one unit can be guaranteed, at different resolutions, a text size can be "fixed". Because this is very difficult to achieve is not very necessary: the global computer users to hundreds of millions, screen from 14 to 40 inches or even higher, screen size and resolution are different, to ensure that a font in front of all users of the same size, it is mission impossible. In addition, the computer has its own regulatory nature.

In the page design in the end is the PX or pt it?

I think that there is no principled difference, it depends on what angle of thinking.

Mac machine How the situation is not clear, in Windows, the default display settings, the text is defined as 96DPI (PPI, Microsoft will be DPI and PPI into one, we do not need to be serious). Such a definition, explained: 1px=1/96 inches. Contact PT concept, 1pt=1/72 inches, can be drawn, in such settings, 1px=0.75pt, common Arial 9pt=12px. On the basis of the resolution of the monitor (such as the current commonly used 1024x768), 1px size is fixed, change the display settings, adjusted to 144DPI, can be drawn, 1px=0.5pt, the 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 be generated: using the PX definition of text, no matter how the user settings, will not change the size of the text, using PT definition, when the user set more than 96DPI value, the larger the number, the larger the font.

(with formula: px = pt * dpi/72) Yes, I just mentioned the option to change the size of the text in the browser, or you can change the text size of the page. However, in this case, using PX and PT are not valid, because these 2 are the actual "pixel" value units, such as 9pt is 12px, fixed size. Here to refer to the new unit: EM, is actually%. Because the font in the Web page does not give the actual PX or PT definition, there will be a default value: 12pt is 16px, corresponding to the browser "font size" in the "medium", as the standard, to become larger or smaller. (For IE only, in FF, even if the definition 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 (both have a fixed value).

In web design, the basic unit of the user-oriented screen is PX, so using PX as the unit is the simplest and easiest to understand, and PT is just passing a ratio of windows to the PX display, which is a circle around. Refer to most large sites, including Adobe and Microsoft, use PX as the unit, and in HTML, the default unit is PX, is it also implied that PX is the "default unit" of Web design?

In Word or Photoshop, however, using PT is quite handy. Because the main purpose of using Word and Photoshop is not for screen browsing, it is output printing. When printing to the entity, PT as a natural length unit is convenient and practical: for example, word in the ordinary documents are used "9pt", the title with "Blackbody 16pt" and so on, no matter how the computer set, print it is always so big. Or in Photoshop, set a picture of an artistic effect of the font is 72pt size, and then set this image to 300DPI and 72DPI, and then print out, it can be seen that the 2 font size is exactly the same, only "clarity" different, 300DPI clearer. This is no doubt the result.

Finally, tidy up all the units that have appeared:

Px:pixel, pixels, the smallest unit displayed on the screen for web design, intuitive and convenient;

Pt:point, is a standard length unit, 1pt=1/72 inches, for the printing industry, very simple to use;

EM: That is,%, in CSS, 1em=100%, is a ratio that combines CSS inheritance relationships with flexibility.

PPI (DPI): pixel (dot) per inch, the number of pixels (dots) per pixel, is a rate that represents "sharpness", "precision"



Formulas for PX and PT conversions:

previously introduced in the article The PX and PT conversion rules, in fact, is very simple, pt=px times 3/4.

such as 12pxx3/4=9pt size.

formulas for PX and EM conversions:

the method for PX-to-em is similar, that is, em=16 times px, which means 1.5em=1.5x16=24px.

 

common px/em/pt/percent conversion tables in design

Pixels
Ems
Percent
Points


6px
0.375em
37.5%
5pt


7px
0.438em
43.8%
5.5pt


8px
0.5em
50%
6pt


9px
0.563em
56.3%
7pt


10px
0.625em
62.5%
8pt


11px
0.688em
68.8%
8pt


12px
0.75em
75%
9pt


13px
0.813em
81.3%
10pt


14px
0.875em
87.5%
11pt


15px
0.938em
93.8%
11pt




16px
1em
100%
12pt

17px
1.063em
106.3%
13pt

18px
1.125em
112.5%
14pt

19px
1.188em
118.8%
14pt

20px
1.25em
125%
15pt

21px
1.313em
131.3%
16pt

22px
1.375em
137.5%
17pt

23px
1.438em
143.8%
17pt

24px
1.5em
150%
18pt









Size points mm

Eighth, 5 lbs. 1.84

Seventh, 5.5 lbs. 2.12

Small sixth, 6.5 lbs. 2.45

Sixth, 7.5 lbs. 2.81

Small fifth, 9 lbs. 3.15

Fifth, 10.5 lbs. 3.70

Small fourth, 12 lbs. 4.25

Fourth, 14 lbs. 4.93

Small third, 15 lbs. 5.23

Third, 16 lbs. 5.55

Small second, 18 lbs. 6.37

Second, 22 lbs. 7.80

Small one, 24 lbs. 8.42

Number 26 lbs. 9.66

Small first 36 lbs 11.1

First number 42 lbs 12.7

(attached formula: px = pt * dpi/72)

PT and PX Differences