Web Design Master Advanced: The use of words in web

Source: Internet
Author: User
Tags end expression insert
Design | Web page design Nowadays, the internet is getting closer to our lives, and surfing the internet is becoming an indispensable part of our life. The network world is colorful, has sprung up a lot of excellent exquisite webpage. A large number of network information, nothing more than through text, images, Flash animation, in which the text is the most important design elements of the Web page. For Web design beginners, to understand and master the page design of the text typesetting is particularly important, the following I would like to talk about one's own see.

The formatting of the text

1. The size, font, and line-spacing font sizes can be calculated in different ways, such as points (point) or pixels (Pixel). Because you need to convert to points when printing based on pixel technology, it is recommended that you use points as a unit.

The most suitable font size for the body of the Web page is about 12 pounds, and now many comprehensive sites, with more content to be arranged on one page, usually use a 9-pound font size. Larger fonts can be used for headings or other places to emphasize, and smaller fonts can be used for footers and ancillary information. It should be noted that small font size is easy to produce a sense of wholeness and delicacy, but the readability is poor.

Web designers can use the font to more fully reflect the design to express the feelings. Font selection is a kind of perceptual and intuitive behavior. However, whatever font you choose, you should base your Web page on the overall vision and the needs of the viewer. For example: bold characters strong, male characteristics, suitable for machinery, construction and other content, fine characters elegant and meticulous, there are female characteristics, more suitable for clothing, cosmetics, food and other industries content. In the same page, a small number of fonts, elegant layout, there is a sense of stability, a variety of fonts, the layout is active, colorful. The key is how to master the proportional relationship according to the page content.

From the point of view of enhancing platform independence, it is better to use the default font in body content. Because the browser is using the local machine font to display the content of the page. As a web designer, you must take into account that most viewers have only three font types and some specific fonts in their machine. The fonts you specify are not necessarily available in the browser's machine, which is a big limitation to web design. The solution is to make the text an image and insert it into the page where it is necessary to use special fonts.

The change in line spacing can also have a significant effect on the readability of the text. In general, line spacing settings that are close to the font size are more appropriate for the body. The general ratio of line spacing is 10:12, with the word 10 points, leading 12 points. This is mainly due to the following considerations: Proper line spacing forms an obvious horizontal blank to guide the viewer's gaze, while the spacing is too wide to cause a row of text to lose good continuity.

In addition to the effect of readability, line spacing itself is also a strong expressive design language, in order to enhance the layout of decorative effect, you can consciously widen or narrow line spacing, reflecting the unique aesthetic charm. For example, widening line spacing can reflect relaxed, relaxing emotions, and should be used for entertaining, lyrical content appropriate. In addition, through careful arrangement, so that wide, narrow spacing coexist, can enhance the space level and flexibility of the layout, showing a unique ingenuity.

Line spacing can be set with the row height (Line-height) property and is recommended in points or as a percentage of the default row height. For example: {line-height:20pt}, {line-height:150%}.

The text of the overall layout of the body part of the page is composed of a number of individual text through the composition of the group, to give full play to this group shape in the layout of the overall layout of the role. From the angle of art, the typeface itself can be regarded as an art form, which has a great influence on people's personality and emotion. In web design, the processing of fonts is as critical as the handling of other design elements, such as color, layout, graphics, and so on. In a sense, all design elements can be understood as graphs.

1. The graphical font of text has two functions: one is to realize the function of word meaning and semantics, and the other is the aesthetic effect. The so-called character of the graphic, that is to emphasize its aesthetic effect, the marked text as a graphical element to express, but also to strengthen the original function. As a web designer, you can set the font in a normal way, or you can make an artistic design of the font. In any case, everything should revolve around how to achieve your design goals more brilliantly.

Text graphics, imagery, more creative form to express the deep design ideas, can overcome the monotony of the Web page and insipid, and thus impress the people.

2. The overlapping text and the image or between the text and text after the overlap, can create a sense of space, jumping, transparency, murmur and narrative sense, thus becoming active in the page, a compelling element. Although the overlapping technique affects the readability of the text, it can cause the unique visual effect of the page. This is not the pursuit of easy to read, and deliberately pursue the "murmur" of the expression of the method, embodies an artistic trend of thought. As a result, it is not only used in the traditional layout design, but also widely used in web design.

3. The title and body in the title and body layout, you can first consider the text as a two-column, three-column or four-column arrangement, and then the title of the placement. The text column is to find the space and elasticity of the page, to avoid the banner of the machine and the singleness of the title inserting way. Although the title is the title of the whole paragraph or the whole article, it is not necessarily placed on top of the paragraph. Can be centered, horizontal, vertical or edge arrangement processing, or even directly into the word group, with a novel layout to break the old laws.

4. The text in the four basic forms of the page The body part is composed of many individual text through the composition of the group, to give full play to this group shape in the layout of the overall layout of the role.

Both ends are: text from the left to the right end of the length of all QI, the word group to form a square face, appears to be correct, rigorous, beautiful.

Center arrangement: In the case of equal spacing, the center of the page as the axis of arrangement, this arrangement makes the text more prominent, resulting in a symmetrical form of beauty.

Align left or right: left-aligned or right-aligned so that the beginning or end of the line naturally forms a clear vertical line that is easy to match with the graphic. This arrangement has loose and tight, there is virtual reality, beating and elegant, the formation of rhythm and rhythm of the form of beauty. The left alignment conforms to the habit of people reading, it appears natural; the right alignment is less suitable for reading habits, but it appears novel.

Plot around: Arrange text around the edge of a graphic. If you insert a bottom chart into your text, it makes you feel comfortable and natural.

Emphasis of the words

1. The emphasis of the beginning of the main body of the first word or letter amplification and decorative processing, embedded in the beginning of the paragraph, which in the traditional media layout design known as the "fall-type". The invention of this technique was traced to the manuscript scribe of the medieval Europe. Because it has the function of attracting sight, decoration and active layout, it is applied to the text arrangement of the Web page. Its drop amplitude should span a full line of up and down. As to how much to enlarge, depends on the environment of the Web page.

2. The emphasis of quotations in the text layout of the Web, often encounter sketchy text, that is, citation. A citation summarizes a paragraph, a chapter, or a full text, so it should be given special page placement and space to emphasize on the choreography. Citations can be arranged in a variety of ways, such as inserting a citation into the left, right, top, bottom, or center position of the body, and changing the font or font size to be different from the body.

3. The emphasis of individual words if the individual text as the focus of the page, it can be bold, box, underline, plus indicators, tilt font and other means to consciously strengthen the visual effects of text, so that it in the overall page is outstanding and eye-catching. In addition, changing the color of some text can also make this part of the text be emphasized. These methods actually use the law of contrast.

Color of text in web design, designers can choose a variety of colors for text, text links, visited links, and current active links. For example, if you use the FrontPage Editor, the default setting is this: the normal font color is black, the default link color is blue, and then the mouse clicks into magenta. Using different colors of text can make the part you want to emphasize more compelling, but it should be noted that the color of the text, only a small amount of use, if anything to emphasize, in fact, nothing is emphasized. Moreover, using too much color on a page can affect the viewer's reading of the page unless you have a special design purpose.

The use of color in addition to the emphasis on the whole text of the role of a special part of the entire copy of the emotional expression will also have an impact. This involves the color of the emotional symbolic issue, limited to space, where not to do in-depth discussion.

Another thing to note is the contrast of the color of the text, which includes the brightness of the contrast, the purity of contrast and warm and cold contrast. These are not only for the readability of the text, but more importantly, you can use the color to achieve the desired design effects, design feelings and design ideas.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.