In web design, how big is the size of the appropriate?

In this era of display, web designers often need to consider the browsing experience of different clients.

In this era of display, web designers often need to consider the browsing experience of different clients.

The size of the text is an important part of the user experience. Different resolutions, different display sizes, different dpi, and even different browser settings will have an impact on the size of the text that is eventually displayed. Although many browsers are now able to easily scale the page, but users have to zoom in every visit, it is always troublesome, and many users do not know how to scale the page. It is best to give users a more considerate default font size according to the user's resolution, and how much is this font size appropriate?

12px? 14px? 15px? 16px? Or should not use PX This unit at all?

The root of the problem is that all the font size units (PX,PT,EM) on the screen are relative units, and they are not able to determine the actual size of the text. What's more, the basic perception of the size of the word is the eye, not just the physical size of the text, but also the distance from the human eye.

Physical size

Let's first assume that the physical dimensions of the text we want to achieve, such as 16px on a 17-inch 1280 * 1024 monitor, The calculation can get its height of about 4.32mm, we plan to make the page text on most of the display is closer to this size, then at different resolutions should show how large size?

The first step: Statistics the user's primary resolution and corresponding screen size.

To convert between physical dimensions and resolution, you first need to count the resolution and the corresponding screen size. The distribution of user resolution can be obtained from the statistics log of the website. Because each resolution setting may correspond to several different sizes of screens, and screen size can not be obtained through the web, have to the current display market for statistical analysis: for a certain resolution, statistical possible screen size range, from the smallest to the largest, relatively mainstream is how large (or using the range of the median as the mainstream size).

Computer display Market (a wide range of products, unavoidably exhaustive, data for reference only)

Step two: Calculate the physical width of the main screen size for each resolution

Now the display aspect ratio is not only 4:3 of the standard screen, 16:10 widescreen, there are more irregular proportions, in order to compare the different aspect ratio of the display, uniform use of horizontal resolution to statistics. Calculate the screen width (in inches) using the main size and aspect ratio (assuming the same length and width of pixels), and then convert it to metric (mm) to see the screen size trend by one by one. Combined with the user distribution of each resolution, the results are shown below (each point in the picture corresponds to a resolution, the horizontal axis is the number of pixels horizontally on the screen, the vertical axis is the physical width of the screen, and the bubble size indicates how many users use the resolution.) Where blue bubbles indicate a standard screen, purple for widescreen: The largest three bubbles are 1024*768,1280*1024,1280*800.

Step three: Calculate the font size on different monitors

You can get the width of each pixel by dividing the physical width of the screen by the pixel width. Then, by dividing the physical size of the specified text by this number, you can get the font size required at different resolutions. For example, to display 4.32mm square text, each resolution requires the following font size (for notebooks and desktops, respectively):

Font size required at different resolutions

You can see that the size of the notebook and the desktop is very different, for the convenience of use, the main size or average size of the resolution to calculate the specified font size at each resolution required size. (The following figure removes the basic resolutions that are used only on notebooks), taking 4.32mm, 3.77mm, 3.25mm as an example (17-inch 1280*1024 resolution 16, 14, and 12th):

In order to maintain the fixed physical size, the relationship between the desired font size and resolution in the mainstream display

Since the ClearType is not open, some Chinese fonts under the non-even number of the display effect is not good, so it is generally recommended to use 12, 14, 16, 18, 22px parity number. That is, select the number of even digits closest to a resolution. For example: Screen horizontal resolution below 1100 using 14PX,1100 to 1500 using 16px,1500 above 18px, and so on.

The distance to the human eye

Although the notebook's font size is much smaller than the desktop, but the actual does not bring us so much inconvenience, this is because: the general use of the notebook when the eye to the screen than the desktop when the closer. When netbooks are getting more and more hours (the extreme example is the mobile phone), people may use them more closely, so the view is bigger. Conversely, when the display is more and more large (24 inches or even larger), for the overall perspective, people may be farther away from the screen, thus reducing the perspective.

Quantitatively: Because the literal size H (4~5mm) is very small in relation to the distance of the human eye to the text (30~60cm), it is approximate to think that the angle of view θ is proportional to h, and inversely with D (θ≈tgθ=h/d). In other words, the same size of the text, two feet away from the sight of only half the size of a foot.

In other words, the display can only convey a approximate size, each user in the specific operation will still be unconsciously adjusted to the distance to the screen to adjust the actual effect seen. In the face of more and more notebook users (please refer to the previous: Notebook computer market share), the front-end designers can only give a notebook and desktop average size of the page effect, specifically by the user to adjust themselves.

Using JS to realize automatic adjustment of font size under different resolutions

For example, the page body contains a div with the ID of content--

Note: In order to ensure that the text in each browser can be scaled, font size units using em instead of PX, in general, the browser default 1em=16px,0.875em\1em\1.125em that is 14\16\18px.

When scaling with a font size, note that it is a good idea to use a percentage, rather than a fixed font size, for the headings in the div to scale synchronously with the body.

However, the size of the font is different, so some sites will make large and small switch such functions, the user can according to their preferences to adjust size.