Let's talk about how to choose the font and font size when making a Web page

Source: Internet
Author: User
Keywords Website construction

Intermediary transaction http://www.aliyun.com/zixun/aggregation/6858.html ">seo diagnose Taobao guest cloud host technology Hall

The choice of font and font size in website construction directly affects the overall visual effect of the website, to some extent, it will also play a role in the optimization of the site, such as large fonts and bold words on the Web page to show more eye-catching, with the enhancement of some information display effect, and search engines will also capture the size of these fonts, Pay more attention to these large fonts and the information in bold text. Although there are many types of fonts, but can be for the website construction personnel to choose the font or relatively few, mainly because the website construction should take the user experience as the center, cannot make the webpage too is too fancy, the typeface is too many to appear to be quite disorderly, but also must consider the various browsers to these font compatibility, Try not to let the browser display fonts when deformation, it is not good. Of course, sometimes in order to better express the theme of the site, we still need to choose a special font to make the page, then you can display the text as a picture, so you can be suitable for a variety of browsers. The following is a brief discussion on how to choose the size of the font and font.

The choice of fonts in website construction:

General Web site client computers are installed with a variety of fonts, the browser will use the default font to display the page, such as Windows XP Chinese version of the operating system the default font is the song or the new song body, in later Windows operating systems, with Microsoft Jas as the default font, this font shows more clearly, Replaced the 19803.html ">XP system under the default Chinese song body, support High-definition display ClearType function. These fonts are installed on most computers, however, if you are making a Web page, if you choose a special font, which is not in the user's computer, the user will not be able to display these fonts when browsing the Web, and these fonts are still displayed in the default song or black font. Therefore, in order to fit more users to browse, we should be in the production of the page should use the song or the black as the base of the page font, as little as possible to use special fonts. Using a generic font is a viable option when you are unable to ensure that the fonts you set are installed on all browsers ' computers. And for English fonts, the choice of font type will be more, the vast majority of computers are equipped with these English fonts, make a Web page when the choice of what type of relationship is not too big, as long as looking beautiful on the line. Common fonts in English mainly include the following categories:

1, serif, this font is a proportional but no serif font, the common font is Arial.

2, cursive, this kind of font is the imitation of human handwriting, this font is mostly composed of curves and lines than the font more powerful strokes, commonly used fonts are comicsans.

3, monospace, this is a scale-free font, used to simulate the typewriter font, each of these fonts have the same width, the common font is courier.

4, serif, this is a proportional serif font, proportional to the font of all the letters according to their different sizes occupy different widths. A liner is a decorative thin line attached to a font, such as a lowercase letter that attaches a thin thread to the item and bottom. Common fonts have times New Roman.

When making a Web page, in order to ensure that in most browsers will be able to display fonts, to show the user a beautiful interface, I usually choose to use the system default font, such as the Chinese song or the new song body, in time to choose the black as the default font, English is the choice of Arial font. This can ensure that the user system in the lack of fonts, the browser can also correctly identify and display the normal text. At the same time, I also suggest that most web designers can choose the system default font, do not apply special fonts in the text of the page. If you want to use these special fonts, I suggest that you use these special fonts to make pictures, and then display the picture in the corresponding location on the page, this is better, but this virtually increases the volume of the page, such pictures will slow down the speed of the page.

Ii. How to choose the font size in website construction

The choice of font size in website construction is an important part of user experience, too large and small will affect the user experience. When making a Web page, we can use different sizes of fonts according to the different positions and levels of the text in the page. In contrast, the content title can use a larger font, and the content of the small headings can be a second font, and the content body can use the normal size of the font.

For 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 on the browser. The best way to do this is to give the user a more beautiful default font size based on the user's resolution when making the Web page. Most professional web site developers will habitually use a certain font size, such as 14px or 12px, because 12px and 14px are basically the standard size of most site fonts, while 11px, 13px, 15px and other sizes are related to a sawtooth problem, Especially in the early display, often not very good to deal with the word sawtooth problem, the use of singular pixels, most likely to cause sawtooth, so usually use even size.

In CSS, the most commonly used description of font size is two units, that is, EM and px. EM is generally considered to be a relative size unit, while PX is an absolute size unit. However, in practical applications, px pixels are sometimes like a relative size unit. For example, in a 15-inch resolution of 800x600 pixel screen, the 10px size of text, than a 10-inch resolution of 1024x768 pixels on the screen 10px size of the text appears larger. PX is a pixel unit, 20px represents 20 pixel size, in the current web design, often used to represent font size, convenient and intuitive. For example, 12px,14px is using PX as the font size, while 16px is a medium font, 18px is a larger font, 12px is a small font. EM is a relative size unit that represents a fixed font size that is handled relative to the underlying font size. The browser defaults to a font size of 16px, and if a paragraph of text specifies 1em, it represents the 16px size, and 2EM is the 32px size. Relative size units have a wide range of uses, because of its relativity, for cross-platform across the device font size processing is very advantageous, but not intuitive to see the size.

The above is about how to choose the font and font size in the construction of the website. In fact, site building is so, sometimes it is 1px difference, it may affect the visual effects of the site, and ultimately affect the quality of site construction, and affect the user experience. As a professional website construction personnel must master and understand more, and effectively in the actual test observation effect, only in this way, we can make a better website.

This article from the Yunnan Surplus Information Engineering (http://www.ynynyn.com/website-process/), respect for the work of the author, please indicate the source in the reprint.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.