[Tutorial] About font application in web design (2) serif and sans-serif

Howdy, Hello everyone. It's me again ~

The last time we briefly talked about the font set and some basic issues that need attention. Today, we continue to talk about the font topic in depth,General font family". The first is the most commonly used general font family serif and sans-serif.

 

-Serif

Serif indicates the font of the linefeed in terms of printing. To understand the concept of linefeed fonts, let's take a look at several typical linefeed fonts:

My
Georgia font King
Times New Roman font

The upper and lower hyphens of the letter "M" in the word "My" are calledLining. Similarly, the top of y, the top and bottom of K, and the bottom of I and n are also lined, so these fonts are called lined fonts. However, not all linefeed fonts have linefeed, such as g, Chinese, and Chinese in the above example ". In fact, as long asTerminal ReinforcementIn principle, all fonts are lined. The so-called end reinforcement is to use the line or thickness change, so that the end of the font strokes is enhanced to improve the readability of the small text. For example, the lower part of y in the above example and the Chinese character of are all the ends of bold strokes to achieve the effect of end reinforcement. In addition, many linefeed fonts also adopt enhanced vertical strokes (for example, the vertical ratio in the ), exaggerated fonts (the most obvious is the lowercase g character) to further improve its readability.

Because the linefeed font is very readable, the most widely used field isBody content of a publication or printAnd so on.

Common linefeed fonts include Georgia, Garamond, Times New Roman, and Chinese.

 

-Sans-serif

Font other than line fontAll are non-lined fonts. Sans-the prefix is actually French, so the standard pronunciation is/san/instead of/sans /. It means "no ". Therefore, sans-serif is an unlined font.

Gut
Verdana font Might
Arial font writing
Youyuan

The font of the inlined line is relatively smooth, and the lines are generally even in width. Suitable for useWordart, title, etc.. Because the non-lined font is usually even in width, the readability of the small font is reduced, which may cause visual fatigue.

Common no I lined fonts include Trebuchet MS, Tahoma, Verdana, Arial, Helvetica, Chinese, and so on.

 

-When to use serif? When Will sans-serif be used?

From the above introduction, we can know that the linefeed font is designed to serve as the body content. You can copy a newspaper to see if the above article is Song. If you have a foreign language book on hand, you can also look at it. The text is lined with fonts. The font of the same size is easier to read than that of the silent Font:

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

Then you can turn the newspaper to the headlines-the title is generally a variety of consistent thickness of the overall art or in the simhei. Most of the titles of English newspapers are unlined. This is to apply their basic principles.

But you can see a lot of websites-their text is just like Tahoma, Verdana, Arial, and so on. Chinese websites may still use mostly because of their font limitations. However, if you look at their style sheets, you will find that most of the alternate fonts are unlined. Is this not good?

 

Of course not.

 

The readability of linefeed fonts is only reflected in small fonts. You can take out the newspaper you just copied and compare it with the text on your monitor-you will find that the text in the newspaper is a whole circle smaller than the text on the display. In fact, generally, the size of the simhei text on the evening news is about 10px ~ in a high-quality LCD display with a dot distance of 25mm ~ The display character of 11px. On a general LCD display (the dot distance is generally 0.28mm), it may even be equivalent to 8px ~ 10 PX characters.

This is the biggest difference between print media and screen media. In order to save the cost, the printing industry will try its best to print the text as small as possible to ensure readability. The monitor does not have such a cost, so it can display relatively large text. When the text is large enough, the unlined font is also readable. In addition, because the silent font is usually artistic, display on the display is usually more pleasing to the eye; and there are more types of silent font than the silent font, so there is a lot of room for choice. Therefore, you can use it with peace of mind. However, the following principles must be ensured:Any unlined font must ensure its readability in the body content. Otherwise, use the linefeed font.. In other words,If you want to use the unlined font to display the body content of the webpage, you must set its font-size to be large enough to ensure that users can read it easily..

The font-size varies depending on the font size. 12px is sufficient for Verdana, but it may take more than 24 Px to easily read the ghost book.

We recommend that you use a linefeed for English fonts below 11 PX. For Chinese characters, the font-size below 11px is not recommended for display regardless of the font because of the display hardware restrictions.

 

-Other generic font families

In printing, in addition to serif and sans-serif, there are usually monospace wide fonts, scripts handwriting (such as flowers), blackletter lead fonts (also called gothic. Strictly speaking, many common serif fonts are actually gothic fonts) and ornamental decorations (fonts with decorative patterns on or around the text strokes. Many medieval books are common. If the brain is actually a font, it can be regarded as a decoration ......) Symbol font (such as the famous wedding123 ......).

 

However, CSS has different definitions for the generic font family. In addition to serif and sans-serif, CSS also allows the following generic font families:

• Monospace equal-width font

  The so-called equal-width font refers to the font with the same width for each character. A famous example is the Courier New font. Because the character width is consistent, alignment is very easy and can quickly and accurately locate a column in a row. Therefore, it is often used to display code.

  It should be noted that an equal-width font can also be a linefeed (or non-linefeed) font. For example, the Courier New font can also be viewed as a serif (strictly gothic) font.

• Cursive Writing body: It is equivalent to handwriting in printing. The Chinese text line grass is such a font.
• Fantasy: It is equivalent to the decorative material used in printing. A rare font with no reference value.

Note that in CSSNot SupportedSymbol family. Use an image to use the symbol font.

 

-Something you don't know

• The Chinese ry is actually a linefeed font.. You can see the following figure:

  As you can see, in fact, the black body is indeed reinforced by the end, so the text of many printed materials will also use the black body. A font that uses gentle end reinforcement and roughly the same stroke width can also be called a petit-serif/small liner. (Slab-serif/carved line)

  It's just a pity that, due to a lot of hardware reasons, you can still regard it as an unlined font when it is actually displayed on the monitor.

• Italic is not Italic

  Italics are oblique. Italic is Italian, as its name implies. Italic is a writing method (calligraphy script), while oblique is a printing style. The two are different. The English exercise book in middle school is written in Italy. In addition to the Italian body, the popular writing methods include French (the legend of the flower body, the name is French Script), Gothic, Abraham and so on.

  Many well-developed fonts will customize a set of special fonts for the Italian, instead of simply displaying them in italic. For example, in the image below, the three lines of text are in the Georgia font. The first line is normal; the second line is oblique, Which is italic; the third line is the real italic Italian.

  Let's take a closer look at the letters a, l, I, and e in the third row-obviously, let's see the difference. In fact, Georgia Italic and Georgia are two different fonts in the system. When we specify font-style: italic, the system will automatically search for whether the Georgia Italic font exists and try to use it to display the text content.

  It is reasonable to say that when we use font-style: oblique to specify the font style, the browser should not look for the Georgia Italic font, but directly tilt the Georgia font, so theoretically, we should get the effect of the second line of text in the figure. Unfortunately, even in the CSS specification of W3C, its reference implementation also says "If the UA cannot correctly display italic and oblique, you can use italic to replace oblique display ", therefore, almost no browser can distinguish italic from oblique. Even if the font-style you set is oblique, you will find that the browser still displays italic

 

This is today. Next I will talk about how to build a reasonable font-family and recommend several font combinations. So, goodbye.