Web design serif and Sans-serif font applications _ Experience Exchange

Howdy, Hello, it's me again ~

The last time we spoke briefly about font set and some basic questions to be aware of . Today we continue with the topic of font, in depth on the last mentioned " Universal font family ." The first is the most commonly used serif and sans-serif These two universal font families.

-serif

Serif refers to the serif font in typography. To understand the concept of serif fonts, let's look at a few examples of typical line fonts:

My
Georgia Font King
Times New Roman font Kanji
Song Body

The short horizontal line protruding from the letter "M" in the word my is a so-called liner . Similarly, the top of Y, the upper and lower of K, and the bottom of I and N also have lines, so these fonts are called serif fonts. However, serif fonts do not necessarily have lining lines, such as G, "Han" and "word" in the example above. In fact, only fonts that meet the end-strengthening principle are serif fonts. The so-called end-strengthening is the use of liner or thickness changes, so that the end of the font strokes are enhanced to improve the readability of small text. For example, the lower part of Y in the example above, and the Chinese characters in the song body, are all taken at the end of the bold stroke to achieve the end-strengthening effect. In addition, many serif fonts will also use the enhanced vertical strokes (such as the vertical ratio in the song), exaggeration (the most obvious is the lowercase g this character) and other methods to further improve its readability.

Because the serif font is very readable, it is the most widely used place of publication or printed matter, such as the text of a large paragraph of text as a form of work.

The more common serif fonts are Georgia, Garamond, Times New Roman, Chinese song and so on.

-Sans-serif

all fonts except the serif font are sans serif fonts. sans-This prefix is actually French, so the comparison standard pronunciation is/san/rather than/sans/. It means "no". So Sans-serif is a sans serif font.

Gut
Verdana Font might
Arial Font Writing
XXFarEastFont-Young Round

No liner font is more smooth, the line is generally uniform thickness. More suitable for use as WordArt, headings, and so on . Because no serif font is usually thicker and more uniform, so in small font display, readability will be reduced, easy to cause visual fatigue.

The common sans I serif fonts are trebuchet MS, Tahoma, Verdana, Arial, Helvetica, Chinese XXFarEastFont-tw, XXFarEastFont-Arial, and so on.

-When do you use serif? When do you use Sans-serif?

From the above introduction, we can know that the line font is designed to be used as body content. You can easily copy a newspaper, to see whether the above article is the song body. If you have foreign language books on hand, you can also look at the text is lined with the font. Serif fonts of the same size are easier to read than sans-serif fonts:

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 front page-the headline will be a variety of uniform or medium black. The headlines of English newspapers are mostly sans serif. This is the basic principle of applying them.

But you can see a lot of websites-their body content is just sans serif tahoma, Verdana, Arial and so on. Chinese web site may be due to the limitations of the font, still use the majority of the song, but look at their style sheet, you will find that the alternate font is mostly sans-serif. Isn't that bad?

Of course not.

The readability of the serif font is only reflected in the small font. You can take out the newspaper you just copied and compare it with the text on your monitor-you'll find that the text in the newspaper is a whole circle smaller than the text on the display. In fact, the usual size of the text in the new Ming evening paper, in the point distance of 0.25mm high quality liquid crystal display, the size of only about 10px to 11px display characters, in the ordinary liquid crystal display (generally the point is 0.28mm), may even be equivalent to 8px~10px display characters.

This is the biggest difference between print media and screen media. Printing in order to save costs, so as far as possible in the guarantee of readable, the text printed small. The monitor does not have such a cost, so you can display larger text. Sans serif fonts are also readable when the text is large enough. And because sans-serif fonts are usually artistic, it is often pleasing to display on a display, and there is a lot more to it than serif fonts, so there is a lot of room for choice. So everyone can be assured to use. However, the following principles must be ensured: any use of sans serif fonts must be guaranteed to be readable in the body content. Otherwise, use a serif font . In other words, if you want to use a sans serif font to display the body content of a page, then you have to set the font-size to be large enough to make it easy for users to read .

As for the specific font-size set how large, is due to the font and different. 12PX is sufficient for Verdana, but to be able to easily read the official script, it may take more than 24px to do.

Serif fonts are recommended for English fonts below 11px. As for Chinese, because of the hardware limitations of the display, no matter what font, it is not recommended to use the font-size below 11px to display.

-Other common font families

In printing, in addition to serif and Sans-serif, there are usually monospace, scripts handwriting (such as flower body), blackletter type body (also called Gothic brother Curvier. Strictly speaking, many commonly used serif fonts are actually gothic fonts), ornamental decorations (those fonts that have decorative patterns on or around text strokes. Many medieval books are very common. If the brain residue is really a font, then it should be able to calculate the decorative body bar ... and symbol symbol fonts (such as the famous wedding123 ...). ）。

CSS, however, has a somewhat different definition of a generic font family. In addition to serif and Sans-serif, CSS also allows several common font families:

• monospace equal width font

  The so-called equal-width font refers to a font with a consistent width for each character. A notable example is the Courier New font. Because the character width is consistent, it is particularly easy to align and can be quickly and precisely positioned to a column of a row, so it is often used to display code.

  Note that a wide-width font can also be a serif (or not serif) font. For example, the Courier New font can also be viewed as a serif (Strictly Gothic) font.

• Cursive writing body : equivalent to the handwriting in the printing science. The Chinese cursive is such a font.
• Fantasy Dream Body : equivalent to the decorative body in the printing science. A very rare font that has no reference value at all.

Note that the symbol font family is not supported in CSS. Use the font for the symbol class, use the picture.

-something you don't know about.

• The
• bold in Chinese is actually a serif font . You can look at the following figure:

  You can see that in fact, the blackbody is actually reinforced by the end, So the body of many printed matter will also use bold. Like this use of moderate end strengthening, the stroke thickness is roughly consistent with the font, in fact, can also be called petit-serif/small lining body. (Those similar to the song body have significant end-strengthening, and the stroke thickness is significantly different, often referred to as the slab-serif/block liner body)

  It is only regrettable that, because of many hardware reasons, in the actual display of the black body, you can still see it as a sans serif font

• Italic not italic .

  Italics are oblique. Italic, as the name suggests, is an Italian body. Italic is a way of writing (calligraphy script), and oblique is a printing style, the two are different things. Middle School English penmanship book is written in the form of an Italian body. In addition to Italian body, the more popular way of writing and French (is the legendary flower body Word, the name is French Script), Gothic, Abraham and so on.

  Many elegant fonts will be tailored to the Italian body, rather than simply displaying italic. For example, in the following picture, three lines of text are Georgia fonts. The first line is normal; the second line is oblique, which is italic, and the third line is the real italic Italian body.

  Take a closer look at the third line of a, l, I, E, and so on--and clearly see the difference. In fact, Georgia Italic and Georgia are two different font files within the system. When we specify Font-style:italic, the system automatically searches for the font that exists Georgia Italic and tries to use that font to display text content.

  Logically, when we use Font-style:oblique to specify the font style, the browser should not look for Georgia italic this font, but directly to the Georgia font tilt, so theoretically should get the second line of text in the diagram effect. Unfortunately, even the web in the CSS specification, its own reference implementation is also said "if UA does not correctly display italic and oblique, you can use italic instead of oblique display", so almost no browser to achieve the distinction between italic and oblique. Even if you set the Font-style is oblique, you will also find that the browser also shows the italic

The

is here today. Next I'll talk about how to build a reasonable font-family, and recommend a few font combinations to use. Well, good-bye. Yo