Layout design of Web pages (i)

Design | Web page Editor's note: A lot of computer professionals engaged in web design, for the Web page production technology at home, but for the Web page rich in artistic and personalized design but feel powerless. In particular, no professional training in the design of the Web page producers, in the Master of the Web page production technology, are eager to make their own web pages more creative and aesthetic. At present, the discussion and introduction of Web page production, to explain the technical operation of software as the main content, focusing on the art of very few. After the author agreed, from this issue, we selected the "Web Art Design," a section of the book, starting from the most basic content, I hope that the vast number of web-makers will be helpful.

The formatting of a text

1. The size, font, and line-spacing font sizes can be calculated in different ways, such as points (point) or pixels (pixel). Because units based on computer pixel technology need to be converted to points when printing, 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.

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, rich and 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 above content extracts from Gu Qun industry and so on "webpage art design" a book, Shandong Fine Arts Press publishes. ）

Figure 1: The size of the text through the processing, highlighting the focus, the level of clear. Figure 2: The upper and middle text layout evacuation, conveying a relaxed and pleasant feeling. The lower part of the text layout with a smaller line spacing, and the arrangement of the above form contrast, enrich the layout space level.