Recommendation: simplified introduction to font and Layout

Document directory

• Point (PT, point)
• Pixel (pixel, PX)
• DPI, PPI
• Ex, X-height
• Em
• Line-height and leading)
• Letter spacing (letter-spacing, tracking)
• Kerning)

We work with fonts every day. However, we have never been concerned about their existence. We have never used them very well, or even abused them. This is because we don't know them. Information technologies ts shouted: 95% of webpage design is typographical design is 95% typography ). Yes, font is one of the most important elements of typographical design. font design is also one of the most profound learning in design. So let's start:

 

Font type

Typeface:

I. serif)

Here, we must first explain what isLining.

LiningSerif is the decorative part of the stroke edge.

The area marked in red is lined.

The purpose of the linefeed design is to clearly indicate the end of the stroke, increase the identification rate, and increase the reading speed. In addition, the use of lined fonts will make people feel more orthodox. Therefore, many of our common English books, especially papers and novels, use linefeeds to complete the text.

Commonly used linefeeds in web design include Times New Roman and Georgia.

Ii. Non-lined body/no-lined body (sans-serif)

The font is calledNon-lined bodyOrInlined body. It is a non-lined body.

In web design, there are more common non-lined bodies. Including Arial, verdana, tahoma, helivetica, and calibri.

In Chinese, the font we use is the corresponding line font.

It is worth noting that, although in books, linefeed fonts are widely used, they are rarely used on the Internet. Since the computer screen resolution is not comparable to that of books, the text is 10 ~ The 12 PX font is hard to recognize on the computer screen.

3. monospace)

In fact, the same width font is only for the Spanish font. Because the English letters are different in width. For example, I is much narrower than M. Code is displayed during programming. If letters are not wide, the layout will be ugly. In the doscommand line, we can see that the same width font is used. Common equal-width fonts include courier and Courier New

Font Style

Common font styles include:Normal,Bold,Italic in Italic.

To put it simply,BoldThat is, the font will be darker and more "coarse ".ItalicsIt is to tilt the word axis slightly. They are all used to emphasize a paragraph in length.

When it comes to bold, we can easily think of the font-weight attribute in CSS. We know that the font-weight attribute values include bolder, lighter, and 100 ~ 900. So this 100 ~ What is the value of 900? In fact, 100 ~ 900 has no unit. Excellent fonts provide different designs for different word duplicates. If the font has a built-in design with different levels of width, these values correspond to each level. For example, Zurich contains Zurich light, Zurich regular, and Zurich
Medium, Zurich bold, Zurich black, and Zurich ultrablack fonts. In this way, Zurich light corresponds to three values: 100, 200, and 300. Zurich Reg
Ular corresponds to 400, that is, "normal", Zurich medium corresponds to 500, Zurich bold, that is, "bold" corresponds to 600, 700, and Zurich black corresponds to 800, finally, Zurich ultrablack corresponds to 900.

Chinese italics are generally not used on the network. Because there are many strokes in Chinese, it is hard to recognize the characters in italics.

Unit

Some units will be used in our web design. I will also list some units here:

Point (PT, point)

72 points = 1 inch, 1 inch is 72 points. That's simple :)

In addition, 1 pickup truck (PICA) = 12 points

Pixel (pixel, PX)

Pixels are the smallest image unit on a computer screen. In other words, pixels are the smallest point on the screen.

DPI, PPI

DPI stands for dots per inch, point per inch, and PPI stands for Pixel per inch. They are resolution units. That is to say, how many points (pixels) can be arranged in length of 1inch ). For example, in general, our monitor is about 72ppi, that is, the length of 1 inch, there are 72 points (pixels ). The higher DPI/PPI, the higher the resolution, that is, the smaller the particles, the more delicate the image. Generally, the resolution of a photo ranges from DPI to DPI ~ Between DPI, so why does the photo look more detailed than on the screen. Magazine printing uses 133 or 150 dpi, and high-quality books use 350-400 dpi, because most beautifully printed books use 175 to 200 dpi for printing. So why is text of the same physical size much clearer in the book than on the screen. That is why we have to use the Sans-serif font for English books.

There is essentially no difference between DPI and PPI. To identify the difference, the only difference may be that DPI is often used to describe scanners and printers, while PPI often describes the screen resolution.

Ex, X-height

It is often used in CSS. 1ex = the height of lowercase letter X.

Em

It is often used in CSS. Of course, EM does not indicate the height of the lower-case letter M (in fact, the lower-case letter M is generally the same as the lower-case letter X ). 1em = 100% of the font size. Is a multiple unit.

Line-height and leading)

When it comes to line spacing (line spacing, line-height, and leading), we must first learn the term baseline ). Do you still remember the linear bookmaker we used to write letters when we first learned English? The rough horizontal line is what we call the baseline. The baseline is the straight line above the drop of the font where most letters are "sitting. In most fonts, uppercase letters always stick to the baseline and above the baseline. The Chinese font is the same as that of uppercase letters. The red line is the baseline.

The line spacing is the distance between two adjacent rows and the baseline. The unit of row spacing is often em, that is, the line spacing is defined based on the font size. In the browser, the default line spacing does not have a rule. The W3C suggests that the default line spacing should be between 1.0em and 1.2em. In fact, when setting the line spacing, there is a typographical principle, that isThe gap between rows must be greater than the gap between words.Otherwise, readers are easy to "serialize" when reading, making reading difficult. Ample line spacing can separate lines of text, making it easy for the eyes to distinguish the last line or the next line. In recent years
Most of them like the 1.5em line spacing, especially for Chinese websites. That is, if the font size of 12 PX is used, designers often like the line spacing of 18 PX. 1.5em is indeed a good verified value. In fact, the specification of Chinese papers is also the use of 1.5em line spacing.

Supplement: Leading indicates the natural distance between two rows. Line-height indicates the font Height = acender_height + descender_height. Line-space indicates the distance between two baselines = leading + line_height.

Letter spacing (letter-spacing, tracking)

The spacing refers to the distance between a group of letters. The padding affects the text density of a row or paragraph.

Kerning)

Padding adjustment is a kind of technical processing for visual needs. To put it simply, when two specific character lines are connected, you can separately specify different character spaces for them. For example, when a capital A is followed by a lower-case V, a larger visual spacing (in fact, the same word spacing) will appear between the two characters ), this cannot be solved by ordinary Character spacing. If the spacing is reduced, other letters are connected into one group. At this time, we need to adjust the padding. The following is an example of padding adjustment:

Paragraph length (measure)

Long term refers to the width of a piece of text. For example:

There are two easy-to-use questions related to the President:

1. The longer the line length, the larger the line spacing is required. The line spacing is too small, and it is easy for readers to serial when reading and changing the line. The line spacing is too large, and the reader will feel the text is not continuous during reading.
2. In the text, each line is 40 ~ 70 letters are recommended.

Alignment)

There are basically four types of paragraph alignment:Left alignment (flush left),Right-aligned (flush right),Center alignment (centered)AndJustified).

Left alignedIt is an alignment that sets text content, adjusts the horizontal spacing of text, and alignment the text in a paragraph or article along the horizontal direction to the left. The left alignment makes the text on the left of the document neatly edges. At the same time, the right side of the text is not neat. Therefore, the left alignment in English is also called ragged right, which means the right side of the uneven shape. The right alignment is similar.

Center alignmentIt is an alignment that sets text content and adjusts the horizontal spacing of text to align the text in a paragraph or article along the horizontal direction to the center. Align text on both sides of the article to align in the middle, so that the entire paragraph or the entire article is neat.

Alignment at both endsIt refers to setting the two ends of the text content, adjusting the horizontal spacing of the text/word, so that it is evenly distributed between the left and right margins. Alignment on both ends makes the text on both sides neatly edges. After the two ends are aligned, the alignment lines on both sides will be clear, and the "fast" feeling of text blocks will also be obvious. However, in the English layout, when the length is very short, the use of both ends of the alignment may lead to some line word spacing is too long, some line word spacing is too short, such uneven word spacing will feel very messy, just like a piece of clothing with patches everywhere.

Yi

Ease of reading describes the ease and comfort of printed text. In fact, the most fundamental purpose of a common design lies in this. In addition to some of the principles described above, I also collected some small yi principles to share with you:

One copy is designed to use up to three font sizes.

• One copy can be designed with up to three fonts.
• To ensure a certain contrast, there must be no excessive comparison. Yang Wen (White and Black) is easier to read than YIN Wen (black and white. On the background of # fff, #333 text looks more comfortable than #000 text.
• Note the background of the text. A single background is required. Avoid background noise.
• "Less is more" uses the least elements to convey the most information.
• Make your link look like a link.