How big is the page text? Text Size detailed

Web Page | detailed

The application of the text on the Web page:

(only look at the title you can know what this part to say, in order to avoid wordy, before the publication of this article decided to delete more than 300 words here, only to retain the following sentence.) ）

For a good design site, the user has the longest browsing time is the text of the article.

The status quo of Chinese web page text:

The Chinese web page generally uses the 12px and 14px of the song (SimSun), both of which can be bold (font-weight:bold). This specification also seems to be the basic knowledge of web designers.

Chinese web designers have these 4 alternative text expressions, just 4, only 4, 4 very small text. The bold effect of the 12px was not ideal.

The crisis is gradually appearing, the text is getting smaller!

The display is gradually getting bigger, the resolution is improving gradually, especially the popularity of the liquid crystal display---The PC liquid crystal display technology matures, the notebook computer also began to household.

Liquid crystal displays often require a specific resolution based on different sizes, with a 17-inch LCD As an example: the best resolution is 1280x1024, and at this resolution, the display text is clear.

Here's a comparison between two monitors:

The first monitor is an old 14-inch display with a width of 11.2 inches and a height of 8.4 inches, with a resolution set to 800x600.

The second monitor is a 17-inch display with a width of 13.6 inches, a height of 10.2 inches, and a resolution set to 1024x768. In contrast to a 14-inch display, text with the same pixel size is narrowed to the height and width of the text: 800/1024x13.6/11.2=600/768x10.2/8.4=95%.

5% of the changes don't seem to be a fuss, but many people in the office of the Monitor is probably 15 inches, and rightfully in the use of 1024x768 resolution, then the text will be reduced by 16%, if you and I would like to better enjoy the computer at home, bought a 17-inch LCD monitor, Then the text will shrink by 24%! There's not much left!

Perhaps it should be advised to use a 19-inch LCD monitor friends do not surf the internet, it is estimated to go up basically can not see what word.

Changing the big monitor was meant to be more clear, but it didn't seem to be the end of the page, at least not when you were looking at it. Unless you use the resolution of the original 800x600, will you? As the size of the display gradually increases, the resolution is gradually increased, and the text on the Web page is looking less and less, people's eyesight can not change the better. Obviously I can't advise you to use a smaller monitor, so you should make the text larger.

(If the above reasons can not let you believe that the page text should be larger, then you do not waste time to continue reading, but Ken please do not leave a message scold me, I prefer to listen to praise.) ）

How big can the text on the Web page change?

In order to make the text bigger, designers are trying to combine various fonts and font sizes.

But these attempts are mainly for the display of the title, for a large number of text display is obviously not appropriate, then the text how to do?

At the beginning of the article has said that for a good site, the user is the longest browsing time is the text of the article. In addition to the 12px and 14px, there are two other font sizes are also ideal: one is 16px, the other is 18px. There are already some sites in the use of 16px of the song body as the text of the article, 18px is relatively rare.

At present, these applications, 16px song body performance is still satisfactory, there is no uneven stroke thickness, obvious sawtooth phenomenon. The 18px Arial also has the same satisfactory display effect.

At the same time using 12px, 14px, 16px, 18px, Web page text can have 4 different size of the display effect? What a great news! Unfortunately, the situation is not the case. The literal 18px text should be two pixels larger than the 16px text, but the gap is not that big.

The actual display size of the 16px Arial text is 15px (wide) x16px (high), 18px Arial text actual display size is 16px (wide) x16px (high), see the following figure:

18PX is only 1px wider than 16px in width.

16px Arial Text occupies a display space of 16px (wide) x18px (high), 18px Arial text occupies the display space of 18px (wide) x21px (high), the following figure:

Notice the width here, the width of the display space occupied by the 16px Arial text is 16px, and the font size defined by the system comes from this. Typically, users will think that 16px of text has a height and width of 16px, in fact, the computer is showing: occupy the width of the display space of 16px text, the corresponding occupancy of the display space height of 18px, the user can see the actual text display size of 15px (wide) x16px (high).

If I have already explained the difference between the actual display size of text and the display space occupied by text, then let's continue.

The above analysis shows that the use of the 18px song on the Web page and 16px song body looks very different, each text is only 1px, so my view is: If you want to use the larger text on the page, you can choose the 16px of the song or 18px of the song body, It doesn't really make sense to use both sizes on the same page, and the size gap between the two words is not as big as you might think.

If you have not left, and see here still do not feel the need to discuss a large text is necessary to pay so much words, it really embarrassed me, as a person to perform the best of the way, Enraptured told a long cold joke.
At present, whether it is 16px or 18px has not been widely used, it seems that the size of the text is really not so important. Indeed, at present in China, the poor eyesight of the elderly use the Internet is indeed not much, I once asked my father: "Why do not love the Internet?" He replied, "The words are too small to look at." ”