We designs deal with fonts every day. But we have never seriously cared about their existence. We haven't used them well or even abused them. It's all because we don't know them. Fonts are one of the important elements of typesetting; they are also one of the most profound sciences in design. In this article, let’s discuss this profound knowledge with you. Font type English fonts (Typeface) are divided into several major categories. These are the basic knowledge that you must know when using English fonts: 1. Serif Serif is the decorative part of the edge of the stroke. The red marking in the figure below is the serif. The original intention of serif design is to more clearly indicate the end of the stroke, improve recognition rate, and improve reading speed. In addition, using serif fonts will make people feel more orthodox. Therefore, many of our common English books, especially papers and novels, use serifs to complete the main text. Commonly used serifs in web design are Times New Roman and Georgia. The left side of the picture below is the Times New Roman font with 12px and the right side is the Georgia with 12px. In Chinese, the Song font we use is the corresponding serif font. 2. Sans-serif/Sans-serif If the font is not serif, it is called sserif or sans serif. The following figure is a sanserif. There are relatively more common sans serifs used in web design. There are Arial, Verdana, Tahoma, Helivetica, Calibri, etc. The following figure is Arial, Verdana, and Tahoma from left to right: It is worth noting that although serif fonts are widely used in books, serif fonts are rarely used on the Internet. Since the resolution of the computer screen is not comparable to that of books, it is difficult to recognize the serif fonts of 10 to 12px text on the computer screen. The picture below is a comparison between Verdana of 10px and Times New Roman of 10px without Cleartype. You can find that the Verdana on the left can be well identified. Times New Roman on the right is quite difficult to identify. 3. Monospace Monowidth fonts are actually only for Western fonts. Because the width of the English letters varies. For example, i is much narrower than m. When programming, the code is displayed, if the letters are not equal in width, the layout will be ugly. On the DOS command line, we can see that the monospace font is used. The monospace fonts required for programming have the following requirements: 1. All characters are equal in width; 2. Concise, clear and standardized character shapes; 3. Supports extended character sets with ASCII code of 128 or above; 4. Whitespace characters (ASCII: 0×20) are equal to other characters; 5. The three characters such as "1", "l" and "i" are easy to distinguish; 6. The three characters such as "0", "o" and "O" are easy to distinguish; 7. The front and back parts of double quotes and single quotes are easy to distinguish, and it is best to have mirror-symmetrical; 8. Clear punctuation shapes, especially curly braces, round braces and square braces. Common monospace fonts include Courier, Courier New 4. Calligraphy As the name suggests, handwriting is a handwriting style font. Sometimes we also call it calligraphy fonts. Most Chinese calligraphy fonts are relatively stiff. I personally recommend using Japanese calligraphy fonts. Japanese calligraphy fonts are softer and more humane. However, the disadvantage of using Japanese calligraphy fonts is that most of them are traditional, and many Chinese characters are missing. 5. Symbol The most famous symbolic body in Windows is Webdings (I remember I loved using it when I was in Windows 95...). Here are a few Webdings fonts: Font style Common font styles are divided into: normal, bold Bold, italic. Simply put, bold means that the font will be darker and more "thick". Italics means slightly tilting the axis of the character. They are all used to emphasize a certain paragraph within the space. When talking about bold, we can easily associate the font-weight attribute in CSS. We know that in addition to normal and bold we usually use, the font-weight attribute value also has properties such as bolder, lighter, 100~900. So what is the value of 100~900? In fact, 100~900 does not have units. Excellent fonts will provide different designs for different font weights. If the font has built-in design of thickness of different levels in advance, these values will correspond to each level respectively. For example, Zurich fonts include six fonts: Zurich Light, Zurich Regular, Zurich Medium, Zurich Bold, Zurich Black, and Zurich UltraBlack. In this way, Zurich Light corresponds to three values: 100, 200, and 300, Zurich Regular corresponds to 400, which is "normal", Zurich Medium corresponds to 500, and Zurich Bold, which is "bold bold" corresponds to 600, 700, Zurich Black corresponds to 800, and finally, Zurich UltraBlack corresponds to 900. For Chinese italics, it is generally not used on the Internet. Because there are many strokes in Chinese, it will be difficult to identify if it is used. unit Some units will be used in our web design: 1. Point (pt, point) 72 points = 1 inch, 1 inch is 72 points. In addition, 1 pickup (pica) = 12 points 2. Pixel (pixel, px) A pixel is the smallest image unit on a computer screen, and in layman's terms it is the smallest dot on the screen. 3. DPI, PPI The full name of DPI is Dots Per Inch, and the full name of PPI is Pixel Per Inch. They are units of resolution. That is to say, how many points (pixels) can be arranged in the length of 1inch. For example, generally, our monitor is about 72ppi, which means 1 inch in length, with 72 dots (pixels). The higher the dpi/ppi, the higher the resolution, that is, the smaller the particles, the more delicate the image. Generally speaking, the resolution of a photo is between 240dpi and 300dpi, so why does the photo look much more detailed than on the screen? Magazine printing uses 133 or 150dpi, and high-quality books use 350-400dpi, because most beautifully printed books use 175 to 200dpi when printed. So why is it much clearer to read text of the same physical size in books than to read on screen? That is, we mentioned earlier, why can we boldly use Sans-serif fonts for printing English books? There is essentially no difference between dpi and ppi. If you really want to find the difference, then the only difference may be that dpi is often used to describe scanners and printers, while ppi often describes the resolution of the screen. 4.ex,x-height Often used in CSS. 1ex = height of lowercase letter x. 5.em Often used in CSS. Of course, em does not represent the height of the lowercase letter m (in fact, the height of the lowercase letter m is generally the same as the height of the lowercase letter x). 1em = 100% of the size of the font. is a multiple unit. spacing 1. Line-height, Leading When it comes to line spacing (line-height, lead), we must first learn a term called baseline. Do you remember the line grid book we used to write letters when we first learned English? The thickest horizontal line is what we call the baseline. The baseline is the straight line above the descending part of the font that most letters "sit". Most fonts, capital letters always stick to the baseline and are above the baseline. The Chinese fonts are the same as those in English capital letters. The red line in the figure below is the baseline. Then, the line spacing refers to the distance between two adjacent lines and the baseline. The unit of line spacing is often used to define line spacing according to the font size. In the browser, there is no rule for the default line spacing. More with the advice provided by W3C, it believes that the default line spacing should be between 1.0em and 1.2em. In fact, when setting line spacing, there is a principle in typesetting, that is, the gap between lines must be larger than the gap between words. Otherwise, readers will easily "serialize" when reading. Causes reading difficulties. Adequate line spacing can separate each line of text, making it easy for the eyes to distinguish the previous or next line. In recent years, most people like the layout of the main text on the web with a line spacing of 1.5em, especially Chinese websites. That is, if a font size of 12px is used, designers often like 18px line spacing. 1.5em is indeed a good experience value. In fact, the specification of Chinese papers also uses a line spacing of 1.5em. 2. Letter-spacing, Tracking Word spacing refers to the distance between a group of letters. The spacing of characters affects the density of text in a line or paragraph. 3. Kerning Kering is a technical processing that is done due to visual needs. Simply put, when two specific characters are arranged, you can specify unique character spacing for them separately. For example, when a capital A is followed by a lowercase v, a visually larger spacing will appear between the two characters (in fact, the character spacing is the same), which cannot be solved by ordinary character spacing. If they are reduced, the other letters will be connected in a ball. At this time, kerning adjustment is needed to handle it. The following figure shows an example of using kerning: paragraph 1. President (Measure) Line length refers to the width of a paragraph of text. As shown below: There are two legibility issues related to the president: The longer the line length, the larger the line spacing required. The line spacing is too small, making it easy for readers to serialize when reading newlines. The line spacing is too large, and readers will feel that the text is discontinuous when reading the line. In the text, it is advisable to have 40 to 70 letters per line. 2. Alignment There are basically four types of alignment of paragraphs: left (flush left), right (flush right), centered (centered) and justified. Left alignment refers to an alignment method that sets the text content, adjusts the horizontal spacing of text, and aligns the text in paragraphs or articles to the left in the horizontal direction. Left alignment gives the text on the left side of the article a neat edge. At the same time, the right side of the text will be uneven. Therefore, the English alignment to the left is also called ragged right, which means the right side with uneven appearances. Right alignment is the same. Center alignment refers to an alignment method that sets the text content, adjusts the horizontal spacing of the text, and makes the text in the paragraph or article align in a horizontal direction to the middle. Align the center so that the text on both sides of the article is neatly concentrated in the middle, so that the entire paragraph or article is neatly arranged. Aligning the two ends means setting the two ends of the text content, adjusting the horizontal spacing of the text/words, so that it is evenly distributed between the left and right page margins. Align the two ends so that the text on both sides has neat edges. After using the two ends to align, the alignment lines on both sides will be clear, and the "fast" feeling of text blocks will be obvious. However, in English typesetting, when the line length is very short, using the two ends to align it may make some lines with too long spacing and some lines with too short spacing, so the uneven spacing will feel very messy. It's like a piece of clothing with patches everywhere. 3. Ease of readability Literacy describes the ease and comfort of typographic text reading. In fact, this is the most fundamental purpose of ordinary design. In addition to some of the principles described above, I have included some small principles of readability and share with you: A design uses up to three font sizes. A maximum of three fonts are used in one design. A certain contrast must be ensured, but there must be no excessive contrast. Yang text (black characters on white background) is easier to read than Yin text (black characters on black background). On the background of #ffff, using #333 text looks more comfortable than the text of #000. Pay attention to the background of the text. The background should be single. Avoid background noise. "Less is more" uses the least elements to convey the most information. Make your link look like a link. Make good use of your space.