The font design of Microsoft Black in visual design

A The design concept of YA-hei

The elegant black font is designed for Microsoft's screen display characters. It has the advantages of unique personality, beautiful structure, strong recognition, good block effect and clear display. In today's digital age is more widely used. This word can be said to be the product of scientific and technological progress, is the needs of human society, in the design has also been a breakthrough.

First break the traditional structure way, the use of large literal design, the word Huai let go, increase the inner white, so that the text founder, cloth white symmetry. Because the font in the palace open, so that the applicability of the text is also enhanced, not only for the use of small series text, more suitable for screen display.

Remove the "horn Head" on the pen shape. In order to prevent the lack of sense of beauty, no spirit, in the skim, the point, the hook in the treatment of its thickness has a slight change, so that the flexibility.

In the production, and strive to sophisticated, strokes as little as possible, so that the text fresh, hearty, easy to read.

The pursuit of the overall form of font beauty, emphasizing the aesthetic and cultural character design, simple and generous, elegant and dignified.

From the point of view of font design theory and actual font application, this paper describes what methods and font design techniques are used to accomplish and perfect the design goals.

Two Design Fonts by Purpose

1. Font design type

Font design can be subdivided into graphic art design and printing "movable type" design. The font design to be discussed in this paper refers to the font design in the category of "movable type", which mainly studies the sharpness, readability and the overall effect of the word after narrowing. In the processing of the font it can not be as artistic calligraphy and calligraphy, you may ignore the size to express feelings, but to be bound by certain rules, pay attention to the relationship between general character and personality, to achieve a mechanical beauty. This design is also a relatively obscure visual arts. In recent years, with the continuous development of science and technology, printing "movable type" design can be divided into the printing of the word design and screen display with the word design of these two major categories.

Ya-Black is a screen display with words, design should pay attention to the study of words in the low resolution of the definition and readability, as far as possible small size display when the clear and easy to read, to achieve this goal, the key is to set the literal size, pen shape and rigorous rational structure treatment ....

2. Meaning of literal size

We need to figure out two different concepts first: "literal size and literal ratio". Font design special squares have two boxes, the outer frame is called the frame, inside the box is called a literal box.

Figure 1

Literal size: "That is, in the case of the literal box, you can design words of different sizes, the characters are literally large, small print said literal." ”

Figure 2

The distance between the text frame and the literal frame is half the natural word distance. The ability to correctly use their relationships is the basis of font design.

Literal compared to: "Simply say that in the case of the text frame unchanged, the percentage value between the two, the ratio of large characters, the ratio of small print, the word is to enlarge and shrink." ”

Figure 3

Now there are many users, in order to be able to squeeze row, figure easy, at any time to reduce the word, resulting in the relationship between word and word imbalance. In this way, even if there is no good font can not arrange the perfect layout, this is very unscientific usage, and so, it is better to reduce the size to use to appear perfect.

3. Literal measurable size and visual size

The literal size can also be divided into measurable literal size and visual literal size. The late font Design Master Shepeyuan in 1962 summed up the "Second center line" theory has shown that the Chinese characters from the sound combination of the words can be measured, escribed harmony side of the two parts of the central distance, the greater the literal, on the contrary, the less literal, As long as we measure the central distance between the two parts, we can get the corresponding literal size value. At the same time, it is also an effective tool to control the size of the whole pair of words.

Figure 4

Jache on the basis of maintaining the character of character, as far as possible to enlarge the two parts of the center distance to increase the literal. At the same time, the use of this method makes more than 80% words, the size of the same. For those words that cannot be measured and the words that are easy to see, how does Jacob deal with it?

From the geometrical point of view, the shape of many Chinese characters, the most typical can be divided into four types: "Square, round, triangle and Diamond", from the area to see the largest square, diamond smallest, to the size of the graphic, you must go according to the diamond size, so that the design of the Chinese characters in order to maintain a consistent vision.

Figure 5

To enlarge the literal word, we must first consider the smallest diamond, then, how can the diamond-shaped word bigger? Very simple, as long as the appropriate adjustment to change the shape of the diamond, then we can get larger than the original diamond area of deformation graphics, this method to design, you can get in the visual than the original literal word.

Figure 6

Jache at the beginning of design is to use the visual size of this method to set the literal size.

4. The relationship between literal size and screen display

What's the relationship between literal size and screen display? To illustrate the problem, use a small bitmap to compare the description.

Figure 7

From the above two figure comparison, we can see that the left figure is literal, a large number of pixels, white evenly comfortable, clear and easy to read. The right image is small, less than the pixel, so the inner white is not symmetrical, read the effect of poor.

Accor design to take this factor into account, not only the use of large literal design, at the same time, in a more reasonable range of words in the text of the literal, and more to win every bit of precious pixels, for small font use of clear easy to read laid the foundation.

5. Remove the "horn" port that affects the screen display effect

is used in bold words of the pen is too large, into a horn-shaped, we jokingly dubbed as "horn Head" or "trumpet." Traditional handwritten black body should not have such a large "horn head", only a little bit of pen. So, where does the horn head come from? There are two reasons, first, it may be that individual writing staff think the trumpet slightly more spirit, deliberately write larger, second, in the photographic version of the word turned into a computer font, do not understand the characters in bold text should be pen type, the original production of photographic version, in order to prevent in the process of reducing the picture of the stroke become weak, The "plait" to melt into a stroke, and form the "trumpet" now.

Figure 8

Too large horn head, not only lost the character of the bold character, in the screen, "Horn Head" can be in the stroke at both ends of a piece, if the two pens closer, the head may be connected to make the stroke account is not clear, readability becomes worse.

Figure 9

Jacob is a decorative style of the font, less unnecessary burden, naturally avoid such problems, so that the text clear and easy to read.

Three The key points in the design of Ya-hei

1. Ya-Hei is based on my early 90 's design of the Black Body series proofs improved design.

Figure 10

From the above proofs can be seen, the font to meet the basic requirements of screen fonts, literal, no "horn head", is no decorative style of the font, can be used as the basis for the design of the black and improve.

2. Ya black design mainly improved the thickness of the word, "hook" stiffness and "eight" word point of the writing, so that it conforms to the standard requirements. At the same time, pay more attention to the portrayal of lines, so that its soft and straight and full of elasticity.

Figure 11 part of the pen stroke pattern

3. In order to make the positive text reading effect better, to all the mouth and framed parts plus "foot", that is, the mouth under the head, the purpose is to give the right amount of stimulation to the eyes, to improve reading speed, this is the text with Jache design a new attempt.

Figure 12 port and framed parts plus "feet"

4. In order to fit the screen display, in the word structure of the processing "white when black", strict control of the "white" in each part of the proportion, so that its Choulans symmetry.

Figure 13 Black and white processing diagram

This kind of treatment not only makes the word stable and generous, but also makes the word-skimming stretch, elegant and unrestrained, rich posture.

5. The use of the original method of special treatment of strokes, reduce the staggered even the black degree of the pen, so that the overall gray word better, clearer, more suitable for screen display.

Fig. 14 Illustration of special stroke processing

6. Avoid the explanation of the stroke, too much adhesion

Figure 15

These strokes are not clear, adhesion too much, both reduce the speed of knowledge, reading, and the suspicion of typos. Jache as far as possible in the design to avoid this problem occurs.

Figure 16

Four Relationship between stroke thickness and structure, white and center of gravity

This is a comprehensive problem in the type design, not to be mastered overnight, it not only to the character of the personality to have a profound understanding, but also have a very keen observation. The process of doing the word is actually the process of practicing the eye, the eye practice "fierce", the word nature more and more good.

The following adjusts the thickness of the uniform font to understand the relationship between stroke thickness and structure, white, and center of gravity. In order to better illustrate the problem, easy to understand, the use of multiple strokes and less strokes of bold text as an example.

Figure 17

1 Adjust the weight of the word so that it becomes a whole

The two characters a thick and thin, visual look is two characters, the thickness of improper adjustment. First of all, he's "body" word bold, so that two words of the visual thickness of the same.

Figure 18

2 words of the inner white influence the weight of the word

After the word "body" has been thickened, although the thickness of the appropriate, but, looking at the uncomfortable, careful analysis of the reasons, the problem lies in the white, the parts of the center of gravity defect, bone word center of gravity is high, music, beans, the center of gravity is low, making each other's echoes, coordination force to become worse. So, we just adjust the "body" character of the inner White, change the center of gravity on the line.

Figure 19

3 Adjust the local thickness of the word to improve the character structure, improve the grade of the word

Now we have to adjust the "thick" word, first analysis of those areas of coarse words need to be improved, the rice word over black, poor image and oppression and word, so that the binding department is too tight, the whole word see narrow. The improved method is: Reduce the rice word, enlarge and word, reduce the fine rice character above the eight-point, improve the Shing of the "fierce" phase and make point, add long skim the tip, make it stretch, distinguish the next point to make it clear. Through these adjustments, the coarse word becomes revitalized and improves the taste.

Figure 20

The word "bold", by adjusting the weight and Nebai, changes the center of gravity and structure, making the word "bold" more perfect.

Figure 21

From the above several adjustments can be seen, stroke thickness and structure, leaving white, the center of gravity is the relationship between each other, is an indivisible whole, as long as the coordination between their relationship, you can improve the character, and have a good layout effect.

Jache in the design and production process is the use of this design techniques to make the word both taste, and uniform, good gray.

Five The image, expression and temperament of the text

Pen type is composed of text strokes, the basic elements of style, the completion of stroke production will affect the quality of character after the word, and the structure of the word is like the proportion of the human body, the location of five senses, it can directly reflect the image of the text, expression and temperament. Therefore, for the design of the font, each link is critical. We design bold words, to express the bold character itself with the solemn, elegant characteristics, you must first to do a good job, the word to write correct.

Figure 22

From the above words we can see that these words do not write correct, strokes blunt, rough production, the location between the parts of the improper arrangement. Big Head Small, the center of gravity has a low, loose structure, the overall image is not good, give people with irregular, not stable impression, lack of sense of righteousness. Below the feeling of the dark is more neat and comfortable.

Figure 23

Let's make a concrete comparison to analyze some common cases of words.

1. The strokes are stiff and rough, which seriously affects the quality of the words.

Figure 24

2. Skimming does not stretch, so that the words lose their proper posture.

Figure 25

3. A coward

Figure 26

The point of the head has not stretched out, but also oblique, neither beautiful, but also destroy the image. In the head see short, stretch not to go out of the case, or do a little flat some more appropriate, head also long, the word also appears upright.

Figure 27

4. Short Legs

Figure 28

section, the Emperor two words of the lower half of the frame to do too long, so that the chief in the portrait of the short, like a person's two leprous to the instep, imbalance.

Figure 29

5. Hook Short

Figure 30

Hook short, there is no hook out of the feeling, so that the word appears formal, cramped, stingy, lack of tolerance.

Figure 31

We often say a word: "The gesture of the word to like the dance of the crane, the introduction of singing", that is, to do the word to do the upright beautiful, must "have a head and feet have a waist, and a gesture".

The meaning of a word, and not necessarily only the meaning of the dictionary, but there is another emotional psychological feeling, he not only has the expression, but also intuitively reflects the character of the temperament.

Example One

Figure 32

These words stagger, without a solemn sense of righteousness.

Figure 33

The main problem in the word structure and the center of gravity, give people the feeling is: inferiority, not self-confidence, obedient, bow Stoop, no elegant solemn bearing, its subtext is: "Uncle Aunt do good."

Figure 34

Case II

Figure 35

The eight-point is like a person's eyes, rich expression, different angles, shapes can make people have different associations. The above words of the problem is in the eight-point, some of the eight points into the outside of the eight-point, some over the small, like a person hanging upside down eyes, sluggish eyes, with sorrowful sad expression, no vigor ...

Figure 36

Example Three

Figure 37

Foot short and weak, tilt to the left, like building when the foundation did not play well, overwhelmed, crumbling. At the same time, like a person does not shoulder the responsibility, alone to the spirit of the sky.

Figure 38

From the above examples we can see that the word should be designed to be both solemn and elegant, and luxurious wealth of temperament, is the most valuable. In the design, Jache pays attention to the connotation of words, and studies the expression and temperament of words. >

Six The original design proofs of Jacob Black

Fig. 39 The fine black body

Figure 40 Elegant Black Bold

Text is not only a carrier of civilization inheritance, but also represents the Chinese aesthetic. Therefore, we in the design strict every close, make the greatest efforts to do every word, the pursuit of the overall form of the United States, and strive to show contrast, harmony, balance, rhythm and other artistic features. Emphasis on the aesthetic and cultural character design, truly to the reader with love.

Attached: Jache is a display-specific font, used for printing and defects, we have been carefully trimmed, and gradually expand its series of font number, now has a variety of fonts listed to facilitate the use of users. Sincerely hope that users can give feedback to us, let us do the word better.

Blue Pavilion Black series font design proofs

Figure 41