We design and work with fonts every day. But we never paid serious attention to their existence. We have not used them well, or even abused them. All this is because we don’t understand them. Font is one of the important elements of typography; it is also one of the most profound subjects in design. In this article, let’s discuss this profound knowledge with you.
Types of fonts
English fonts (Typeface) are divided into several major categories. This is 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 area marked in red in the picture below is the serif.
The original intention of serif design is to mark the ends of strokes more clearly, improve recognition rate, and increase reading speed. In addition, using serif fonts will make people feel more orthodox. Therefore, many of our common English books, especially essays and novels, use serif fonts to complete the text.
Commonly used serifs in web design include Times New Roman and Georgia. The left side of the picture below is a 12px Times New Roman font, and the right side is a 12px Georgia font.
In Chinese, the Song font we use is the corresponding serif font.
2. Sans-serif
If a font does not have serifs, it is called a non-serif or sans-serif. The picture below is a sans-serif.
There are relatively many sans-serifs commonly used in web design. There are Arial, Verdana, Tahoma, Helivetica, Calibri, etc. The picture below shows 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 computer screen resolution is not comparable to that of books, serif fonts of 10 to 12px in the main text are difficult to read on the computer screen. The picture below is a comparison of 10px Verdana and 10px Times New Roman without Cleartype. As you can see, Verdana on the left can be easily identified. The Times New Roman on the right is quite difficult to read.
3. Monospace fonts
Monospace fonts are actually only for Western fonts. Because English letters vary in width. For example, i is much narrower than m. Display code when programming. If the letters are not of equal width, the layout will be ugly. In the DOS command line, we can see that a fixed-width font is used.
The constant-width fonts required for programming have the following requirements:
1. All characters must be of equal width;
2. Simple, clear, and standardized character shapes;
3. Support extended character sets with ASCII codes above 128;
4. Blank characters (ASCII: 0× 20) Same width as other characters;
5. Three characters such as "1", "l" and "i" are easy to distinguish;
6. 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 be mirror symmetrical;
8. Clear punctuation marks, especially braces, round brackets and square brackets.
Common monospaced fonts include Courier and Courier New.
4. Calligraphy
As the name suggests, calligraphy is a handwriting style font. Sometimes we also call it calligraphy font. Most Chinese calligraphy fonts are stiff. Personally, I 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 Chinese, and many Chinese characters are missing.
5. Symbol
The most famous symbol body in Windows is Webdings (I remember I used to use it very much when I was still in Windows 95...). Here are a few of the Webdings fonts:
Font styles:
Common font styles are: Normal, Bold, and Italic.
Simply put, bold means that the font will be darker and more "thick". Italics means tilting the axis of the text slightly. They are used to emphasize a certain paragraph of text within the space.
When talking about bold, we can easily think of the font-weight property in CSS. We know that in addition to the normal and bold we usually use, the font-weight attribute value also has attributes such as bolder, lighter, 100~900, etc. So what is the value of 100 to 900? In fact, 100 to 900 has no unit. A good font will provide different designs for different weights. If the font has pre-built-in designs for different levels of thickness, then these values will correspond to each level respectively. For example, the Zurich font includes six fonts: Zurich Light, Zurich Regular, Zurich Medium, Zurich Bold, Zurich Black, and Zurich UltraBlack. In this way, Zurich Light corresponds to the 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", corresponds to 600, 700, Zurich Black corresponds to 800, and finally, Zurich UltraBlack corresponds to 900.
Chinese italics are generally not used on the Internet. Because Chinese has so many strokes, using italics will make it difficult to read.
Units
We will use some units in our web design:
1. Point (pt, point)
72 points = 1 inch, 1 inch is 72 points. In addition, 1 pica = 12 points
2. Pixel (pixel, px)
A pixel is the smallest image unit on the computer screen. In layman's terms, it is the smallest point on the screen.
3. DPI, PPI
The full name of DPI is Dots Per Inch, dots per inch, and the full name of PPI is Pixel Per Inch. They are units of resolution. In other words, how many points (pixels) can be arranged in the length of 1 inch. For example, generally, our monitor is about 72ppi, which means there are 72 dots (pixels) in a length of 1 inch. 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 photos is between 240dpi and 300dpi, so why photos look much more detailed than they look on the screen. Magazines are printed at 133 or 150dpi, and high-quality books are printed at 350-400dpi, because most beautifully printed books are printed at 175 to 200dpi. That’s why text of the same physical size is much clearer when viewed on a book than on a screen. That is why we mentioned before that Sans-serif fonts can be boldly used in English book printing.
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 is often used to describe the resolution of the screen.
4. ex and x-height
are often used in CSS. 1ex = height of lowercase letter x.
5. em
is 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 font size. is a multiple unit.
Spacing
1. Line spacing (Line-height, Leading)
When it comes to line spacing (Line-height, Leading), we must first learn a term called baseline. Remember the 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 line above the descender of the font where most of the letters "sit". In most fonts, uppercase letters are always placed close to and above the baseline. Chinese fonts are the same as English capital letters. The red line in the picture below is the baseline.
Then, line spacing refers to the distance between the baselines between two adjacent lines. The unit of line spacing is often em, which is defined according to the font size. In browsers, there is no guideline for default line spacing. According to the recommendations provided by the W3C, 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 the gap between lines must be larger than the gap between words. Otherwise, readers will easily "serialize" when reading. causing reading difficulties. Sufficient line spacing can separate each line of text, making it easier for the eye to distinguish the previous or next line. In recent years, most people prefer 1.5em line spacing for text layout on the Web, especially Chinese websites. That is, if a font size of 12px is used, designers often prefer 18px line spacing. 1.5em is indeed a good experience value. In fact, the standard for Chinese papers is to use 1.5em line spacing.
2. Letter-spacing (Letter-spacing, Tracking)
Letter-spacing refers to the distance between a group of letters. Word spacing affects the density of text in a line or paragraph.
3. Kerning
Kerning is a technical process done for visual needs. Simply put, when two specific characters are aligned, you can individually specify unique word spacing for them. For example, when an uppercase A is followed by a lowercase v, there will be a visually larger spacing between the two characters (actually the word spacing is the same), which cannot be solved by ordinary character spacing. If you reduce the spacing between them, the other letters will flow together. At this time, kerning adjustment is needed to deal with it. The picture below is an example of applying kerning:
Paragraph
1. Line length (Measure)
Line length refers to the width of a paragraph of text. As shown below:
There are two legibility issues related to line length:
The longer the line length, the greater the line spacing required. If the line spacing is too small, readers will easily break when reading. If the line spacing is too large, readers will feel that the text is discontinuous when reading the lines.
In the main text, 40 to 70 letters per line are appropriate.
2. Alignment
There are basically four types of paragraph alignment: flush left, flush right, centered and justified.
Left alignment refers to an alignment method that sets the text content, adjusts the horizontal spacing of the text, and aligns the text in the paragraph or article to the left along 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, left alignment in English is also called ragged right, which means the right side has a ragged appearance. The same goes for right alignment.
Center alignment refers to an alignment method that sets the text content and adjusts the horizontal spacing of the text so that the text in the paragraph or article is aligned horizontally toward the middle. Center alignment makes the text on both sides of the article neatly concentrated in the middle, so that the entire paragraph or article is neat.
Alignment means setting both ends of the text content and adjusting the horizontal spacing of the text/words so that they are evenly distributed on the left and right edges of the page. between distances. Justify gives neat edges to text on both sides.
After using align at both ends, the alignment lines on both sides will be very clear, and the "fast" feeling of the text block will also be obvious. However, in English typesetting, when the line length is very short, using alignment may cause the spacing between some lines to be too long and the spacing between some lines to be too short. This uneven word spacing will feel very messy. Like a dress with patches everywhere.
3. Legibility
Legibility describes the ease and comfort of reading printed text. In fact, this is the most fundamental purpose of ordinary design. In addition to the principles described above, I have also collected some small legibility principles to share with you:
Use at most three font sizes in a design.
Use up to three fonts on one design.
It is necessary to ensure a certain contrast, but not excessive contrast. Yang script (black characters on a white background) is easier to read than Yin script (white characters on a black background). On the background of #fff, the text using #333 looks more comfortable than the text #000.
Pay attention to the background of the text. The background should be simple. Avoid background noise.
"Less is more" Use the fewest elements to convey the most information.
Make your link look like a link.
Make good use of your space.