Business-to-business industry website "Text style design" general standard

When we open a variety of business-to-business websites, see the most is a variety of text, expressed in a variety of ways, displayed in front of the visitors, text is the Portal type Web site The most content, while the text and pictures, video is the most important site of the three ways of expression.

Business-to-business Web site, more services to the business needs of the transaction, understand the learning needs of industry knowledge and exchange demand, the author of this article Li Xuejiang that these needs are more to be expressed and transmitted through words, different font size, color, thickness, line spacing, representing the product planners, The information that the Web designer expects to deliver to site visitors. Here is a brief explanation of the standards in the design of the Business-to-business Web site.

1 business-to-business Industry website navigation bar text font, size, thickness, color of the general standard

Navigation bar is a user came to the first part of the page to see, to guide users to different columns to visit, so the text to strive to highlight, this in front of the design of the effect diagram also said.

The General standard is:

A font: The default font song, navigation bar can not be used to make pictures, not conducive to search engine optimization, so can only use the song body.

B font Size: 14PX and above, as the business of business-to-business Web site is generally not much, most of them do not fit like Sina, NetEase do navigation bar, a row of columns, is the most business-to-business industry website design habits. Part also has two rows of columns, three rows of columns, up to 2 rows of navigation more reasonable. So in most cases, the font size to be greater than or equal to 14PX, put two row when part of a section of the column navigation and level two column navigation, two level column can be smaller, the smallest 13PX.

C Thickness: If the navigation bar only a row, most of the case, should be bold, if the first level column and level two columns are written in the navigation bar, with two row display, generally only bold level column.

D color: According to the page effect chart to make, if the navigation bar has the background, the text color must use with the background has the very strong contrast color.

Figure (92) Chinese screw net (www.luosi.com) two row navigation bar

Above the website two row navigation bar, the size is 14PX, the first-class navigation bar has been bold, the key column uses the more eye-catching orange, part of the Business-to-business website is also uses this kind of navigation way.

Figure (93) The Medical Network (www.pharmnet.com.cn) navigation bar

Above the site's navigation bar, the size of 14PX, bold, color contrast with the background is very strong white, the key column color display, such navigation is the most business-to-business Web site adopted the way.

2 The general standard of text font, size, weight and color of the title bar of the website of the business-to-business industry

The title bar is the most important part of a page frame design, also need to design the most places, we design a page, in addition to the content design, is basically in the design title bar, in the page Effect Diagram Design section also said very detailed, here from the title bar on the text, accurate to the font, size, thickness, color to briefly explain.

The General standard is:

A font: Most of the time the default for the song, because now the design of the Web page, we all like to add a link to the text in the title bar, directly linked to the level two or a column of more content, text is not a picture expression, and some also use CSS to design some effects. So in addition to some of the high effect requirements of the title bar, we only use all browsers can be normal display of the song body. If you want to make a title bar picture, you can use some serious, commercial fonts.

B font Size: 14PX, there are few exceptions, the vast majority of the title bar text size can not be less than 14PX, sometimes larger, but most of the case can not be less than 14PX. Once a designer to me his design of the Web page, I do not think it is wrong, and later found that the original title bar are used 12PX bold, does not appear to have hierarchical sense, each content block between the degree of difference is not enough.

C Thickness: Must be bold, basically no exception.

D color: According to the color of the page effect chart, the text color still has to use a strong contrast with the background color.

3 business-to-business Industry website navigation page "Normal content" link font size, weight, line spacing, color general standards

Navigation page generally refers to the home page, the first level of columns, such as pages, navigation page Most of the content has hyperlinks, visitors based on the link title to find their interest in content, so the design of the content link becomes very important.

The General standard is:

A font Size: 12PX, you can also use 13PX, most of the time is 12PX.

B Thickness: Fine body, not bold.

C line spacing: Generally 20PX, the highest is no more than 23PX, the lowest is not less than 18PX, otherwise either too high, or too low.

D Color: The majority of the case is black, the code is: #000000-#333333, in order to protect the vision, there is also the use of gray, color code for #444444 or #555555.

4 business-to-business Industry website navigation page "Recommended content" link font size, weight, line spacing, color general standards

To make the content a primary and secondary point, will focus on content, readers may be interested in the content of the reader to give priority to find, save users to find the content of the time, improve the site stickiness, for information, technical articles, blogs, questions and answers, in the home page, the first level of the first column of the content of the editorial push, These recommendations are very different from the normal content link style.

The General standard is:

A font size: Most of the 14PX, for a section of the day or a period of time the focus of a recommended content, the title will be larger, is generally 16px-20px.

B Thickness: Most of the case, is definitely bold, I have seen a designer design site, recommended information, although the font size is relatively large, but not bold, did not reach the focus of attention to the effect of visitors.

C line spacing: More than 120%, generally 150%, otherwise the word is big, the distance is too tight, even show incomplete.

D color: With the general content link color is generally different, using black, red, blue and so on, in order to achieve more prominent effects, not only from the size, thickness and other points of view, but also use more eye-catching bright colors (red, orange, blue, etc.).

5 business-to-business Industry Web site List page "Product name" link font size, weight, line spacing, color general standard

On the list page, the product name, the company name, will be more prominent than the other fonts on the page, in front of the design of the effect chart has also been said, mainly for the purchase of the Chamber of Commerce priority attention to product names, select the products they want, will be further to see the product introduction, origin and other details, then in addition to the product name will need to weaken the content.

The General standard is:

A font Size: Most of them are 14PX, also can be 13PX.

B Thickness: bold.

C line spacing: 150%.

D color: and auxiliary content color is not the same, generally do not use black, with more blue.

Figure (94) Alibaba Products List page

Figure (94) For Alibaba Product List page screenshot, product name is 14PX, blue, bold, outside the title of most of the content is gray, weakened.

6 business-to-business Industry website auxiliary content font size, weight, line spacing, color general standard

Ancillary content includes many places, such as the first page of the information release time, information parameters, blog comments and so on, as well as product List page product parameters, areas, etc., content page information release time, source, edit, etc., these are ancillary information. In the design, need to weaken the auxiliary content in order to highlight the first visitors want to understand the content, so that the page more layered sense.

The General standard is:

A font Size: Most are 12PX, you can also use 11PX.

B Thickness: Absolutely not bold.

C: 150%, if there are more than one line, it is necessary to reduce spacing, 120% or so, reduce line spacing, but also a way to weaken.

D color: Color with gray, the general use of #666666-#999999, Gray is the largest symbol of auxiliary content, if a web designer to design the Web page, the auxiliary content does not use gray, it is completely unqualified.

Figure (95) Chinese Screw net Product List page

The above Website product List page, the auxiliary content is the middle model and so on content, including company name has adopted the weakening, the size is 11PX, is smaller than I thought 12PX, does not have the bold, the line spacing 150%, in the middle I thought the line spacing is lower some better.

7 navigation page, content page "boot content" font size, weight, line spacing, color general standard

The so-called guide content, and the last section of the auxiliary content has a certain similarity, is to guide visitors to the content of a simple understanding, guide visitors to further read more content, generally used in the recommended articles, information, abstracts and other places.

The General standard is:

A font size: Most of them are 12PX, or even smaller 11PX.

B Thickness: Absolutely not bold.

C line spacing: 120%, reduce line spacing, is also a weakening method, reducing the line spacing, it occupies less position, it is less easy to attract attention, to weaken the effect.

D color: Color with gray, generally using #666666-#999999.

Figure (96) recommended information of global Textile Network information channel

The above site channel recommended information, the title used blue, estimated 16PX, bold, very prominent, the title below the guide content color is gray (estimated to be #666666) font size is 12PX, I think the line spacing can be smaller, can play a weakening effect.

8 content page Information title font size, weight, line spacing, color general standard

Whether it is product introduction, or company introduction, as well as information articles, community blog posts, forum posts, can be unified called information, there will be a title, different information of the title there are some differences.

The General standard is:

A font Size: Most of them are over 14PX, the headline of the information is bigger, reach the 18px-22px, the product information is smaller, the 16PX is about.

B Thickness: Absolutely bold.

C line spacing: 150%.

D color: Mainly black, blue and other colors.

Figure (97) Food Business Web News Headlines

The above site title, the size of 24PX or so, bold, color gray, not so dazzling.

Figure (98) Alibaba product information title

Figure (98) for Alibaba product information title, the font size is about 14PX, bold, black color, product information title is smaller, in fact, I think a larger number is also possible, such as 16PX or so.

9 content page Information "Body" font size, weight, line spacing, color, background general standard

As long as it's the body of information, whether it's a product, Enterprise introduction, information articles, Bowen, posts, content may be more than 500 words, or even thousands of words, from the user experience, if a long time to see a lot of content, the word will be bigger, this is not only user habits, from the reading behavior, it is absolutely reasonable.

The General standard is:

A font size: Must be 14PX, I have seen a number of websites, the content of the information is incredibly 12PX, I saw such a site, the entire site for their products on the impression is very poor, how can this design? The most basic standards are not met.

B Thickness: not bold, edit the article in the small title to be bold, edited by the editor, and the page design is irrelevant.

C line spacing: 150%, this is basically the absolute standard, most of them are like this.

D color: Black or gray, some in order to make reading is not dazzling, the use of gray, general grayscale is not less than #555555.

D background: In order to read up, the eye is not too tired, you can not use a pure white background, you can use light blue, gray as the background. As with the published books, the regular printed paper is not pure white, but a little yellowing.

Figure (99) Sina Information final page content

Figure (99) For Sina Information final page content, the font size is about 14PX, not bold, color is about #333333, leading 150%, background is gray. We can also use pure white as the background, many sites are also white background, but this study found that a little bit of light blue or gray background color better, the reader looks not tired.

This article original author: Li Xuejiang, welcome the Exchange guidance consultation.