In this era of hundreds of displays, web designers often need to consider the browsing experience of different clients.
Text size is an important part of user experience. Different resolutions, different monitor sizes, different DPIs, and even different browser settings will have an impact on the final displayed text size. Although many browsers can now easily zoom the page, it is always troublesome for users to re-zoom every time they visit, not to mention that many users do not know how to zoom the page. It is best to give users a more considerate default font size based on their resolution. So what is the appropriate size for this font size?
12px? 14px? 15px? 16px? Or should we not use the px unit at all?
The root of the problem is that all font size units (px, pt, em) on the screen are relative units, and they alone cannot determine the actual size of the text. What's more, people's fundamental perception of text size depends on the perspective of the eyes, which not only depends on the physical size of the text, but also depends on its distance from the human eye.
physical size
First, assume a physical text size we want to achieve, for example, set to 16px on a 17-inch 1280 * 1024 monitor. Calculated, its height is approximately 4.32mm. We plan to make web text closer to this on most monitors. size, then what font size should be displayed at different resolutions?
Step 1: Count the user’s main resolution and corresponding screen size.
To convert between physical size and resolution, first count the resolution and corresponding screen size. The distribution of user resolutions can be obtained from the website's statistical logs. Since each resolution setting may correspond to several screens of different sizes, and the screen size cannot be obtained through the web page, we have to conduct a statistical analysis of the current monitor market: for a certain resolution, count the possible screen size ranges, from the smallest to the What is the largest, relatively mainstream size (or use the middle of the range as the mainstream size). As shown in the picture below——
Computer monitor market (there are many types of products, and it is inevitable that one will miss out, the data is for reference only)
Step 2: Calculate the physical width of mainstream screen sizes for each resolution
Today's monitor aspect ratios include not only 4:3 standard screens, 16:10 widescreens, but also more irregular ratios. In order to compare monitors with different aspect ratios, horizontal resolutions are used for statistics. Use the mainstream size and aspect ratio (assuming the length and width of the pixels are the same) to calculate the screen width (inches), and then convert it to metric (millimeters). By matching them one to one, you can see the trend of screen size. Combined with the user distribution of each resolution, the results are as shown in the figure below (each point in the picture corresponds to a resolution, the horizontal axis is the number of pixels in the horizontal direction of the screen, the vertical axis is the physical width of the screen, and the bubble size indicates the use of this resolution The number of users. The blue bubble indicates standard screen, and the purple indicates wide screen): the three largest bubbles are 1024*768, 1280*1024, and 1280*800.
Step 3: Calculate font size on different monitors
Divide the physical width of the screen by the pixel width to get the width of each pixel. Then divide this number by the specified physical size of the text to get the required font size at different resolutions. For example, to display 4.32mm square text, the following font sizes are required at each resolution (calculated separately for notebooks and desktops):
Font sizes required at different resolutions
It can be seen that the sizes of notebooks and desktops are very different. For convenience, the mainstream size or average size of each resolution is used to calculate the font size required for the specified font size at each resolution. (The following picture removes those resolutions that are basically only used on notebooks), taking 4.32mm, 3.77mm, and 3.25mm as examples (16-, 14-, and 12-size fonts at 17-inch 1280*1024 resolution):
In order to maintain a fixed physical size, the relationship between the required font size and resolution under each mainstream display
Since some Chinese fonts do not display well in non-even numbers when cleartype is not turned on, it is generally recommended to use even numbers such as 12, 14, 16, 18, and 22px. That is, select the nearest even number for a certain resolution. For example: 14px is used for screen horizontal resolutions below 1100, 16px is used for 1100 to 1500, 18px is used for screens above 1500, and so on.
distance to human eye
Although the font size of notebooks is much smaller than that of desktop computers, it actually does not bring us that much inconvenience. This is because the distance between the human eye and the screen is generally closer when using notebooks than when using desktop computers. When netbooks become smaller and smaller (the extreme example is mobile phones), people may hold them closer when using them, so that the viewing angle is larger. On the contrary, when the display becomes larger and larger (24 inches or even larger), due to considerations such as the overall viewing angle, people may also move farther away from the screen, thus reducing the viewing angle.
Quantitatively speaking: since the text size h (4~5mm) is very small relative to the distance d (30~60cm) between the human eye and the text, it can be approximately considered that the viewing angle θ is proportional to h and inversely proportional to d (θ≈tgθ=h/ d). In other words, text of the same size will only appear half the size when it is two feet away from it.
In other words, the monitor can only convey an approximate size, and each user will still adjust the actual effect they see by unconsciously adjusting the distance to the screen during specific operations. Facing more and more laptop users (please refer to the previous article: Laptop market share), front-end designers can only provide a page effect based on the average size of laptops and desktops, and it depends on the users to adjust themselves. .
Use JS to automatically adjust font size under different resolutions
For example, the id of the div where the body of the web page is located is content——
Note: In order to ensure that the text can be scaled in each browser, the font size unit uses em instead of px. Generally speaking, the browser defaults to 1em=16px, and 0.875em1em1.125em is 141618px.
Please note when using font size scaling: It is best to use percentages instead of fixed font sizes for font size units such as titles within the div so that they can be scaled synchronously with the text.
Attachment: The main data cited in the charts in this article
First published on this site: http://www.mhzx1.com