Difference between the unit of length Px/EM/Pt/EM and its conversion formula and comparison table

Fonts are often used in CSS for webpage design. The unit of font size is commonly used in two types: Px AND Pt. What are the differences between the two?

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

From the above font, we can see that 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 follow the screen resolution
The size of a 800 PX image varies according to the resolution of 600x1/8, which accounts for 1024 of the screen width. However, in the range of 768x1/10, only of the screen width is occupied. Therefore, if
If the pixel is used as the unit, the text displayed by the user changes the display resolution from 800 to 1024 (The unit of natural length ), it may not even be visible.
Browse.

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 ". Because this is hard to implement and is not necessary: the global computer users
Number of screens, from 14 to 40 or even higher, the screen size is different, the resolution is also different, to ensure that a font in front of all users, the size is the same, it is really mission
Impossible. 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 with PPI, so we do not need to compare
True ). 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, common song
Body 9pt = 12px. On the basis of the unchanged display resolution (for example, the commonly used 1024 × 768), the size of 1 px remains unchanged. You can change the display settings to 144 DPI.
It is concluded that 1px = 0.5pt, and the common 99pt = 18px. A text originally composed of 12 PX, which is now composed of 18 PX. If more PX is used, the text will be "big" and easier to read.
.

Therefore, the difference between Px AND Pt is generated only when the user changes the default 96 DPI: the PX-defined text will not change the size no matter how the user sets it; use PT to define text. When the user sets a value greater than 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. However, in this case, the use of PX and PT is invalid, because both of them have actual
The unit of the "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 defined
The default value is 12pt, that is, 16px, which corresponds to the "medium" in the "font size" in the browser. The default value is as follows: Increase or decrease. (Only applicable to IE. In ff, even if PX or
PT can also be 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 web page design, the basic unit of user-oriented screen is PX. Therefore, using PX as the unit is the simplest and easiest to understand, while Pt just uses Windows Settings to multiply
The ratio is converted to PX and then displayed, which is a circle. Refer to most large websites, including Adobe and Microsoft, which use PX as the unit and default unit in HTML.
Is it 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. Because the main purpose of using word and Photoshop is not to view the screen, but to print the output. When it is printed to an object, PT
It is easy to use as a unit of natural length: for example, common documents in word use "99pt", and titles use""
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, and then
Do not set this image to DPI or 72 dpi, and print it again. We can see that the two fonts are identical in size, but they are different in definition and DPI are clearer. This is beyond doubt
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, the number of pixels (points) per inch, is a rate, indicating "resolution", "accuracy ".

 

 

Now that we know the differences between PX, PT, em, and PPI, we should convert it one step closer.

 

 

 

Px, PT, em, ex, and in are commonly used length units, especially in the font size of webpages. But do you know how to perform a quasi-change between PX, PT, and Em? This
Here, icech finds a table for PX, PT, em, and percent size conversion, especially for the convenience of font size conversion. Hope everyone will like it!

Formula for Px AND Pt conversion:

Previously, icech introduced the conversion rules of PX and PT in this article. In fact, it is very simple to multiply Pt = px by 3/4.

For example, 12px × 3/4 = 9pt size.

Formula for PX and EM conversion:

The method for converting Px to Em is similar, that is, Em = 16 multiplied by PX, that is, 1.5em = 1.5 × 16 = 24px.

Commonly used Px/EM/Pt/percentage conversion tables in Design

 

Pixels	EMS	Percent	Points
6px	0.375em	37.50%	5pt
7px	0.438em	43.80%	5pt
8px	0.5em	50%	6pt
9px	0.563em	56.30%	7pt
10px	0.625em	62.50%	8pt
11px	0.688em	68.80%	8pt
12px	0.75em	75%	9pt
13px	0.813em	81.30%	10pt
14px	0.875em	87.50%	11pt
15px	0.938em	93.80%	11pt
16px	1em	100%	12pt
17px	1.063em	106.30%	13pt
18px	1.125em	112.50%	14pt
19px	1.188em	118.80%	14pt
20px	1.25em	125%	15pt
21px	1.313em	131.30%	16pt
22px	1.375em	137.50%	17pt
23px	1.438em	143.80%	17pt
24px	1.5em	150%	18pt