Serif and Sans-serif font applications in Web design-experience Exchange

Howdy, Hello, it's me again ~

The last time we talked briefly about the font set and some basic issues to be aware of. Today we continue to the topic of font, in-depth talk about the last mention of the "universal font family." The first is the most commonly used serif and Sans-serif, the two universal font families.

-serif

Serif is a printed line font. To understand the concept of serif fonts, let's look at a few examples of typical serif fonts:

My
Georgia fonts King
Times New Roman font Kanji
Song Body

The letter "M" in the word My is highlighted by the top and bottom of the short horizontal line is the so-called liner. Similarly, above y, the top and bottom of k, and the bottom of I and n are lined, so these fonts are called serif fonts. But serif fonts do not always have a liner, such as the g in the above example, "Han" and "word". In fact, as long as the font that satisfies the end-reinforcing principle is a serif font. The so-called end-strengthening, is the use of liner or thickness changes, so that the end of the font strokes are strengthened to improve the readability of the small text. For example, the lower part of Y in the example above, and the Chinese characters of the song body, all take the end of bold strokes to achieve the effect of end strengthening. In addition, many liner fonts will also be used to enhance the vertical stroke (such as the vertical ratio in the song body), exaggerated glyphs (the most obvious is the lowercase G character) and other methods to further improve its readability.

Because of the readability of the liner font is very good, so it applies the most places is the publication or the text content of the printed matter, such as a large paragraph of text as a form of expression on the work.

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

-Sans-serif

All fonts other than serif fonts are sans serif fonts. sans-This prefix is actually French, so the more standard pronunciation is/san/instead of/sans/. It means "no". So Sans-serif is the sans serif font.

Gut
Verdana Fonts might
Arial Font Writing
Young Circle

Sans Serif font is more sleek, the line is generally uniform thickness. More suitable for use as WordArt, title and so on. Because sans serif fonts are usually more uniform in weight, the readability is reduced when small fonts are displayed, causing visual fatigue.

Common sans-serif fonts have trebuchet MS, Tahoma, Verdana, Arial, Helvetica, Chinese young circles, official script and so on.

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

From the above introduction, we can know that the liner font is designed to be used as the body content. You can easily copy up a newspaper to see if the above article is the song body. If you have a foreign language reader on hand, you can also look at the text is lined 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 weights 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 Web sites-their text content is precisely sans serif Tahoma, Verdana, Arial and so on. Chinese websites may still use the majority of fonts because of their limitations, but look at their stylesheets and find that the alternate fonts are 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 paper you just copied and compare it with the text on your monitor-you'll find that the text in the newspaper is a whole bit smaller than the text on the monitor. 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 about only 10px ~ 11px display characters, on the ordinary LCD monitor (the point distance is generally 0.28mm), and may even be equivalent to 8px~10px display characters.

This is the biggest difference between print media and screen media. In order to save costs, the printing industry will, as far as possible, in a guaranteed readable situation, the text printed small. There is no such cost for the monitor, so you can display larger text. Sans serif fonts are also readable if the text is large enough. And because sans serif fonts are usually artistic, the display is generally pleasing to the eye, and sans serif fonts are much more than serif fonts, so there's a lot of room for choice. So we can use it with confidence. However, the following principles must be ensured: any use of sans serif fonts must be guaranteed to be readable in the content of the body. Otherwise, use the serif font . In other words, if you want to use sans serif font to display the body content of a webpage, then you must set it font-size large enough to make it easy for users to read.

As to how much the font-size will be set, it is different from the font. 12px for Verdana is completely enough, but to be able to easily read the official script, it may take more than 24px to line.

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

-Other common font families

In the printing science, in addition to serif and Sans-serif, there are usually monospace and other wide fonts, scripts handwriting (such as flower body), blackletter type Body (also known as Gothic brother Curvier. Strictly speaking, a lot of commonly used serif fonts are actually gothic fonts, ornamental decorations (those that are in the text strokes or around the decorative patterns of the font. It is common in many medieval books. If the brain body is really a font, then you should be able to calculate the decorative body bar ... ) and Symbol font (such as the famous wedding123 ... ）。

However, CSS has a somewhat different definition of the universal font family. In addition to serif and Sans-serif, CSS also allows the following common font families:

• monospace Equal width font

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

  Note that a width font can also be a serif (or non-serif) font. For example, the Courier New font can also be thought of as a serif (Strictly Gothic) font.

• Cursive writing: equivalent to the handwriting in the printing science. The Chinese cursive is one such font.
• Fantasy Fantasy Body: equivalent to the decorative body in the printing science. A very rare type of font, basically no reference value.

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

-something you don't know.

• The black body in Chinese is actually a serif font. You can look at the following diagram:

• As you can see, in fact the blackbody is actually strengthened by the end, so the body of many printed matter will also use bold. Like this use of the gentle end of the reinforcement, stroke thickness roughly consistent font, in fact, can also be called petit-serif/small liner body. (Those similar to the song body have significant end-strengthening, and the stroke thickness is significantly different, often referred to as slab-serif/engraving liner body)

  But unfortunately, because of many hardware reasons, in the actual display of the black body, you can still think of it as a sans serif font

• Italic is not italic

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

  Many elegant fonts will be customized for the Italian body a special set of fonts, rather than simply displayed in italics. For example, in the image below, three lines of text are Georgia fonts. The first line is normal; the second line is oblique, which is italic; the third line is the real italic Italian body.

  
  

  We look at the third line of a, l, I, E and other letters--it is clear that 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 attempts to use this font to display text content.

  Supposedly when we use Font-style:oblique to specify the font style, the browser should not look for Georgia italic This font, and directly to the Georgia font tilt display, so in theory should get the effect of the second line of text. Unfortunately, even in the CSS specification, its own reference implementation is also said to be "if UA does not display italic and oblique, you can use italic to replace the oblique display", so there are few browsers to achieve the distinction between italic and oblique. Even if you set the Font-style is oblique, you will also find that the browser is also displayed italic

It's here today. Next I'll talk about how to build a reasonable font-family, and recommend several combinations of fonts to use for everyone. So, goodbye, Yo.