On the text in the design of website masters

Today, the Internet is getting closer and closer to our lives, and surfing the internet is gradually becoming an indispensable part of our lives. The online world is colorful and a large number of excellent and exquisite web pages are emerging. The presentation of a large amount of network information is nothing more than text, images, Flash animation, and so on. Among them, text is the most important design element in Web pages. For beginners of web design, it is especially important to understand and master the text Layout Design in web design. The author wants to share his own views.

Text Formatting

1. font size, Font, line spacing

The font size can be calculated in different ways, such as point or pixel ). We recommend that you use lbs as the unit for pixel-based printing.

The most suitable font size for webpage text display is about 12 lbs. Many comprehensive websites now use a 9 lb font size because there are many contents to be arranged on a page. A large font can be used for titles or other places that need to be emphasized. A smaller font can be used for footer and auxiliary information. It should be noted that the small font size is easy to produce the overall and exquisite feeling, but the readability is poor.

Web designers can use fonts to fully reflect the emotions to be expressed in the design. Font selection is a kind of emotional and intuitive behavior. However, no matter What font you select, you must follow the overall idea of the web page and the needs of the browser. For example, the bold Chinese characters are strong and powerful, and have male characteristics. They are suitable for mechanical, construction, and other content. The characters are elegant and meticulous, and have female characteristics. They are more suitable for clothing, cosmetics, food, and other industries. On the same page, there are few Font types, elegant layout, and stability. If there are many Font types, the layout is active and colorful. The key is how to grasp the proportional relationship based on the page content.

From the perspective of enhancing platform independence, it is best to use the default font for text content. Because the browser uses a font on the local machine to display the page content. As a web designer, you must consider that most viewers have only three types of fonts and some specific fonts. The font you specified cannot be found on the viewer's machine, which brings great limitations to web page design. The solution is to make the text into an image and insert it into the page where it is necessary to use a special font.

Changes in line spacing also have a great impact on text readability. Generally, the line spacing close to the font size is more suitable for text. The regular proportion of line spacing is, that is, if the word is 10 points, the line spacing is 12 points. This is mainly due to the following considerations: the appropriate line spacing will form an obvious horizontal blank band to guide the viewer's eyes, and the excessive line spacing will lead to a row of text loss of good continuity.

In addition to the impact on readability, the line spacing itself is also a strong expressive design language. To enhance the decorative effect of the layout, You can consciously widen or narrow the line spacing to reflect unique aesthetic interests. For example, widening the line spacing can reflect relaxed and relaxed emotions and be suitable for entertaining and lyrical content. In addition, through careful arrangement, the wide and narrow line spacing coexist, can enhance the space level and elasticity of the version, show unique ingenuity.

You can use the line-height attribute to set the line spacing. We recommend that you use the lbs or the percentage of the default line height. For example, {Line-Height: 20pt} and {Line-Height: 150% }.

Overall text orchestration

The body part of the page is a group composed of many individual texts that have been arranged. You must give full play to the role of the Group shape in the overall layout of the page. From the perspective of art, we can regard the font itself as an art form, which has a great influence on people in terms of personality and emotion. In web design, Font Processing is as critical as color, layout, graphics, and other design elements. In a sense, all design elements can be understood as graphs.

1. graphical text

The font has two roles: one is to implement the functions of the meaning and semantics, and the other is the aesthetic effect. The so-called graphic text emphasizes its aesthetic effect, and marks the text as a graphical element, while enhancing its original functions. As a web designer, you can set the font in a regular way or design the font in an artistic manner. In any case, everything should focus on how to better achieve your design goals.

The deep design ideas can be expressed in a more creative form by graphical and visualized text, which can overcome the monotonous and dull web pages and impress people.

2. overlapping text

Between text and images, or between text and text, after overlapping, it can produce space, jump, transparency, noise, and narration, and thus become an active and eye-catching element on the page. Although the stacked method affects the readability of the text, it can produce the unique visual effect of the page. This kind of expression that does not pursue easy reading, but deliberately pursues "noisy" reflects an artistic trend. Therefore, it is not only widely used in traditional layout design, but also used in web design
Widely used.

3. Title and body

When you orchestrate the title and body, you can first arrange the body in double, three, or four columns before placing the title. You can split the text into columns to obtain the space and elasticity of the page, so as to avoid the rigidity of the entire column and the singularity of the title insertion method. Although the title is the title of the entire paragraph or entire article, it is not always placed above the beginning of the paragraph. It can be used for center, horizontal, vertical or edge arrangement, or even directly inserted into the word group to break the old rules with a new layout.

4. Four Basic Forms of text orchestration

The body part of the page is a group composed of many individual texts that have been arranged. You must give full play to the role of the Group shape in the overall layout of the page.

Both ends are consistent: the length of the text from the left end to the right end is consistent, and the word group forms a positive area, which is correct, rigorous, and beautiful.

Center arrangement: if the word distance is equal, it is arranged on the axis of the page center. This arrangement makes the text more prominent and creates a symmetric aesthetic.

Left or right alignment: The left or right alignment naturally forms a clear vertical line at the beginning or end of the line, which is easy to work with the image. This orchestration method is relaxed and tight, has virtual and real, beating and elegant, produce rhythm and rhythm form aesthetic. The left alignment conforms to people's reading habits and appears natural. The right alignment is rarely used because it does not conform to reading habits, but is novel.

Arrange the text around the graph edge. If you insert the basemap into the text, it will be harmonious and natural.

Text emphasis

1. Emphasize at the beginning of the line

Enlarge the first word or letter of the text for decorative processing and embed it into the beginning of the paragraph. This is called a "downloading style" in the traditional media layout design ". The invention of this technique is traced back to the manuscript copywriter in the Middle Ages of Europe. Because it attracts sight, decoration, and active layout, it is applied to text orchestration of webpages. The downfall range should span the upper and lower ranges of a complete line. Depending on the webpage environment.

2. Citation emphasis

During text orchestration on webpages, you will often encounter outline texts, that is, citation. The citation summarizes a paragraph, a chapter, or a full text. Therefore, special page locations and spaces should be emphasized in the layout. Citation orchestration is diverse, such as embedding a citation in the left-right, top, bottom, or center of the text, and can be changed in a different font or font size from the text.

3. Emphasis on individual words

If some text is used as the focus of the page appeal, you can consciously strengthen the visual effect of the text by means of bold, framed, underlined, indicative, and skewed font, this makes the entire page outstanding and eye-catching. In addition, changing the color of some text can also emphasize this part of text. These methods actually use the comparison rules.

Text color

In web design, designers can select various colors for text, text links, accessed links, and current activity links. For example, if you use the FrontPage Editor, the default settings are as follows: the normal font color is black, the default link color is blue, and the mouse clicks turn to purple. Text of different colors can attract more attention, but it should be noted that the color of the text can only be used in a small amount. If you want to emphasize anything, in fact, there is no emphasis on anything. Furthermore, using too many colors on a page will affect the viewer's reading of the page content, unless you have a special design purpose.

In addition to emphasizing the special part of the entire text, the use of color also affects the emotional expression of the entire text. This involves the emotional symbolic issue of color. It is limited to space and will not be discussed in depth here.

In addition, you need to pay attention to the contrast of the text color, which includes the comparison of brightness, purity, and heating and cooling. These not only affect the readability of the text, but more importantly, you can use the color to achieve the desired design effect, design emotions and design ideas.