Structure analysis of Chinese and English fonts in web banner design

Originally wanted to write "advertisemen in the font structure Analysis", later found that the title is a bit large, deviated from the current work in the targeted, so narrowed down to the banner range, the following content only in the current work on the banner design of a little humble opinion, only to play a role.

Banner of the way of communication [TOPIC]

For banner in the Web site

Banner's own shape: shape determines its fixed composition, generally rectangular, banner, left and right structure and centered;

Banner text features: theme-style, generally divided into main headings and subheadings, more text, the design of the time also need to consider the application of various dimensions of the site can be read extension map.

Banner's image features: auxiliary themes, adding text to the rendering power.

Banner transmission behavior: The carrier for the computer screen, IE browser's first screen position, the user eye focus stay for about 3 seconds or more.

[because banner is commonly used in the topic class website, in the Portal website level two page, the user comes in, before the homepage already has the certain understanding and the understanding to the topic, therefore banner's function is in the level two page to pack the page to increase the content the interest degree and the content direction guidance; So this is also the traditional advertising in the general requirements of the first sensory visual impact to rape the eyes of different places. ]

The importance of writing in Banner

For words, we often hear the demand side put forward: "The word to be big!"

"Ah?" he said. "It's already big!" and then very helpless to pull up a little bit, in fact, we all know that a few pixels is meaningless;

But carefully think, the demand side really just so little pursuit? After all, they are not designers, do not know how to express their ideas, and the only way to make people feel conspicuous is only the difference in size, perhaps because the word is not conspicuous, word processing is too common, the background is too eye-catching and so on, perhaps, We should understand that "the word should be a little more conspicuous", while the "conspicuous" way has many kinds.

banner= text + images [auxiliary]

Banner text generally occupies the entire banner of 70% of the region, and the actual image is only less than 30%, often many designers more focused on the 30% image design, ignoring the most important 70% text areas, and finally only with the system word hastily pieced together, Is the design of such a banner reasonable?

Especially when the theme is extended to a small scale extension, only the area where the text is being used is completely finished.

Attribute differences between Chinese characters and English letters

The difference between Chinese and English letters, letters is a pure pronunciation symbol, each letter itself does not make sense, the meaning of the word from these letters in the horizontal string combination, and the Chinese character of the group Word form is based on pictographic, that is, each word has a special meaning, A simple word in ancient times represents a complex life scene, so it is the world's most vivid text. There are essential differences between the two ways of reading and interpreting, so the arrangement of Chinese characters can not be copied in English, and there are some objective differences between them in the arrangement.

Structural analysis of Chinese and English fonts

A. The actual size of the same font size is different, English because all are letters, the composition of the letter is very simple, screen minimum visual pixels for the 6px[representative font: 04 Font], Chinese structure is complex. Screen minimum visible pixel for 10px[ms Ming/ms UI Gothic] and 11px[new fine body/PMingLiU]

B. The overall arrangement of English is easy to paragraph, into the article, the visual effect is more free and lively, there is a stronger discontinuous line sense, easy to produce rhythm and rhythm.

Chinese overall arrangement is easy to sentence, row, visual effects closer to a regular geometric points and bars, the most important reason is not easy to generate movement because the whole structure is closed, the sum of the stroke tension tends to zero.

C. The length of English is generally more than that of the same meaning, in the design, the English itself is easier to become a design subject, and because the number of letters in the English word is different, in the choreography, the right side of the alignment will produce a natural irregular scattered, which in the Chinese choreography is not likely to occur, The Chinese choreography each paragraph is a complete "block", it is difficult to produce this sense of the scattered.

D. The English structure has the shape of different sizes, in the design of the glyph can not be arranged in the same line, such as gjpqy and other letters to the bottom of the settlement line, and the BDFHKL letter on the top line, other letters to the midline and the line. However, the nature of the layout of the English language is not what the Western designers expect, they spend a lot of time on the fine line of text alignment to adjust the word distance, word distance, line spacing, paragraph before the distance, paragraph, and so on, so that the paragraph tends to more geometric shape.

How to deal with the composing problem of banner in the text

Keywords: Understanding-decomposition-refactoring

Understand

Before you make text, you should first understand the content of the text. Have seen many designers only pay attention to the layout of the United States and do not pay attention to the text content, text a hand to start choreography, never consider what words, their principle is that the text must obey the layout needs. This is not the correct design method, for a title, if we do not understand the title of the content, it is easy to get the cart before the horse. This is also the designer needs and needs of the focus of communication issues, and to obtain the demand side of the keyword.

Decomposition

The emotion conveyed by the subject's key words, analyze the character attribute of the font itself, synthesize the picture, decompose it; the relationship between stroke thickness and structure, white and center of gravity, this is a comprehensive problem in the type design, it is not to be mastered overnight, it not only to the character of the personality to have a profound understanding, But also to have a very keen observation. Especially for an image set by the font itself, or where the font usually appears? What do you think of this font? This is the long-term accumulation of visual communication.

Refactoring

The design of the font needs to take into account the overall composition of the title in the picture of the balance, without damaging the basic identification of the font to redesign, so that the text graphics, font categories in the line font and sans serif font (serif vs sans-serif), in combination, It is not recommended to combine the sans serif font with the serif type font directly.

From the psychological model, it can be seen that in the conventional combination, sans-serif fonts are better than the conventional combinations of serif fonts, but they can be stiff when handled poorly.

Calligraphy font, because the calligraphy font after the pursuit of the font of the past dynasties, so that its structure more solid, a little bit less will affect its own font beauty, and the gas field is strong, not suitable for too small layout and too long sentences for a large number of use; students who have learned calligraphy may be deeply experienced in Chinese calligraphy and are very fastidious about "fine" and "Qi". "God", in words can not express emotions, the lines of calligraphy can reveal the gas field, that is, the character of the so-called characters.

The above is the calligraphy font in the specific theme of the emotional expression of some of the treatment; The text did not make a special deformation, but the theme to do some effect.

PS. Remember to come to NetEase interview, HR once asked me a question: "For visual designers in this position, what do you think the designer is? What can you do?"

I said: "Designers here, often more as a translator role, the message more quickly and accurately interpreted to all audiences." ”

Author: k.c

Article Source: NetEase Uedc