CSS Font Size: The comparison between EM and PX, PT, percent

One of the most confusing aspects of CSS styling is the Font-size property of the text extension in your application. In CSS, you can display the size of text in a Web browser in four different units of measure. Which of the four units is best for the Web? The problem aroused a wide controversy. It is difficult to find a definite answer, because it is so difficult to answer on its own.

Contact these units

1. "Ems" (EM): "em" is a scalable unit for Web document Media presentation. An em equals the current font size, for example, if the document's font size is pt,1 em equals the pt. EMS is inherently scalable, so the 2 em equivalent of pt,.5 em equals 6 pt and so on. EMS is becoming more and more popular in Web documents due to its scalability and adaptability to mobile device features.

2. Pixels (px): pixels are fixed-sized units for screen media (that is, read on a computer screen). A pixel is equal to a point on the computer screen (the smallest segment of your screen resolution). Many web designers use pixel units in a Web document to render a Web site perfectly rendered by producing browser-rendered pixels. One problem with pixel units is that it does not extend for visually impaired readers to accommodate mobile devices.

3. Point (PT): Points are typically used in print media (any media printed on paper, etc.). One point equals 1/72 of an inch. Dots are more like pixels, they are fixed-sized units and cannot be scaled.

4. Percentage (%): Percentage units are more like "em" units, except for some fundamental differences. First, the current font size is equal to 100% (for example, pt = 100%). When using percent units, your text remains fully scalable and accessible on mobile devices.

So what's the difference?

When you dynamically observe them it is easy to understand the difference between font size units. Generally,1 em = pt = px = 100%. When using these font-size, increase the base font size (using CSS selectors) from 100% to 120%, let's see what happens.

As you can see, as the base font size increases the EM and percent units become larger, but PX and PT do not change. Setting an absolute size for your text is easy, but it is easier for your visitors to use the scalable text that can be displayed on any device or machine. For this reason, the EM and percent units are preferred for Web document text.

Comparison of EM and percent

We define the point and pixel units that are not necessarily the most suitable for Web documents, leaving them to be em and percent units. In theory, EM and percent units are the same, but in the application, they actually have some subtle differences that need to be focused on.

In the above example, we use percent units as our base font size (marked on the body). If you change your font size from percent to EMS (ie, body{font-size:1 em;}), you may not notice any difference. Let's see what happens when "1 em" is our body font size when the client changes the browser's "Text size" setting (which is available in some browsers, such as Internet Explorer).

When the browser text size of the client is set to "medium", there is no difference between EMS and percentages. However, when the settings change, the difference is quite large. The "smallest" setting, the EMS is much smaller than the percentage, and when set to "largest", the opposite is true, the EMS is larger than the percentage display. Some may say that when the EM unit expands when really going to expand, in the actual application, the EM text scale changes too much, and the smallest text on some client machines becomes not very clear.

Conclusion

In theory, EM units are new and upcoming font size standards on the web, but in practice, percentage units seem to provide users with a more consistent and accessible display. When client settings change, percent text expands at a reasonable scale, allowing the designer to maintain readability, accessibility, and visual design.

winner: Percent (%).

Appendix (January 2011)

I have been writing this article for several years now, and I want to summarize the discussion that took place during that time. Generally, when I start a new design, I will use the percent () on the BODY element body { font-size: 62.5%; } and compare it with the EM unit size. As long as the body uses a percent unit setting, you can choose to use percentages or the benefits of EMS or any other CSS rules and selectors and to maintain percent usage on your base font size. In the past few years, this has indeed become the standard of design.

Pixels are now considered an acceptable font size unit (users can use the browser's "Zoom" feature to read Xiaowen), although due to the very high density of mobile devices screen (some Android and iphone devices more than 200 to 300 pixels per inch, let you 11-12- Pixel fonts are hard to see!) They also started to cause some problems. Therefore, I will continue to use percentages as the base font size in the Web document. As always, encourage and welcome discussions and ideas, and thank you for all the comments on this issue over the past two years!

Original kyleschaeffer.com
Note that the reprint must retain the original link, the translation link, the author translator and other information.