4000+ useful information! A comprehensive B-side design guide: fonts

In B-side design, fonts are often the most frequently appearing "atom". Because they have different rendering methods (design software rendering and browser rendering) and in Web design, there are two major desktop operating systems (Windows and Mac OS), which results in many "variables" in fonts in B-side design.

[[425221]]

After reviewing the drafts of many designers, we find that they often have many page problems: lack of hierarchy and gray pages.

Missing layers

Lack of visual hierarchy is often a subjective feeling as a designer.

In class, I talked to everyone about this: As a B-end designer, we are actually more like a layout designer. Because when the interactive area increases from the mobile end to the desktop end, it also brings about the division of information areas and the guidance of visual movement lines.

The lack of hierarchy is often like when we are looking for an exit, we encounter a confusing "logo guidance system" that displays all the information densely on a single layout. So the design itself is actually the same.

Gray page

The term "gray page" actually originated from "art major", and is usually used to describe a work of art that lacks heavy colors or has a low ratio of heavy colors. You can also understand it as the focus of the page is often not found. Therefore, the gray page is often caused by the lack of heavy colors in the font.

Font Family

Font Famliy, also known as font fallback, is a common font CSS property in browsers.

The purpose is to ensure that the font has good adaptability and readability on different platforms and browsers.

The reality is that as a B-side product provider, we don’t know which fonts real users have installed on their computers, and we use font fallback to ensure the best page display effect.

The font family needs to be clearly defined at the beginning of the project, because the font is the most basic/bottom-level atom in the B-side page. If it is changed at will, the global design plan will be affected, so the risk is relatively high.

For example, the common font Family:

• Mac OS: English: San Francisco, Chinese: Ping Fang SC
• In Windows, English: Segoe UI, Chinese: Microsoft YaHei

Obviously these fonts are not set in stone, you can adjust them based on the actual user situation:

How is font fallback determined?

• Check and intercept the font-family code of competitors, and establish a basic product return plan by studying the return mechanism of competitors.
• Deliver the solution to the front-end for debugging, and determine the solution based on the debugging results (the rendering method of the design software and the front-end implementation is different, so it is recommended to make a judgment on the actual machine)

Font size and line height

Font size and line height are a pair of binding relationships

For font size, browsers have always had a minimum limit. To ensure user reading, the minimum font size is 12px.

In actual projects, we will set the height to 12px, 14px, 16px, 18px, etc., and the line height will be 1.5-1.6 times the font size, so I made a table of common fonts and line heights.

Finally, let’s talk about the importance of line height in B-side projects.

This is a question a classmate asked me. Can you think about it? Is it blue or yellow?

The correct answer is yellow. Because of the appearance of line height, it means that the text has a more uniform height, and in the actual spacing measurement, the line height must be counted as an element within the font.

Font Weight

The font weights are ExtraLight, Light, Normal, Regular, Medium, Bold and Heavy. Of course, it also has a numerical name: 100, 200, 300, 400, 500…

We can change the page hierarchy by using font weight. The bolder the font, the more attention the reader pays, and the greater the change in the entire information hierarchy. Bold fonts usually represent our titles, which means that your title summarizes all the information below. Therefore, good font weight management can help us distinguish the information hierarchy.

Gray font

The gray scale of the font will directly affect whether the page is gray. Let's first look at the problems of gray pages.

Although "grey" is a subjective feeling of our designers, if we want to delve into the logic behind it, we can find a more appropriate answer through the WCAG specification.

Here we lay out the common neutral colors and draw a line chart based on the brightness of the HSB color value. Because fonts are often used in the last three color levels, the color value trend is relatively steeper.

The logic behind the relatively steeper color scale is actually derived from the use of neutral colors. The light gray part is mainly used for "background distinction, dividing line, input box stroke", and the light gray is used to achieve the relationship with the page layout.

Dark gray is mainly used for "text, title, and text layout". It needs to open up changes in brightness to guide visual relationships and create an overall sense of hierarchy in the interface.

As for light gray and dark gray, there is often a saying in the industry that "font gray can be controlled by transparency, such as using #000 and then reducing or increasing the transparency at will."

When I delved into this issue, I found that this statement seems to exist in all major systems. Is this really true?

By looking at the design specifications of SAP, Lightning, Ant Design, Element, Clarity Design, etc., it is found that this statement mainly comes from Clarity Design and Ant Design in China. Friends who are not clear about the specifications can refer to the B-end Design Guide (youthce.com)

Clarity Design does have a paragraph describing the issues with font transparency.

“We use transparency to differentiate between font layers. When the font is applied to a light background, the transparency is adjusted based on #000; when applied to a dark background, the transparency is adjusted based on #FFF.”

After careful reading, you can understand that its core is to express the hierarchical relationship of fonts, so that everyone can quickly understand the concept of hierarchy instead of instructing everyone to use transparency to use fonts.

Let's look at Ant Design again. If we only look at the picture, it seems that the meaning is indeed to control the relationship between text color and background color through transparency, but look at the description text next to it.

“If the text color is too close to the background color, it will be difficult to read. Considering the requirements of barrier-free design, we refer to the WCAG standard and maintain a AAA level contrast ratio of more than 7:1 between the body text, title and background color.”

But if you read it carefully, you will find that it also only expresses the hierarchical relationship through transparency. I went to look at online products such as Alibaba Cloud, Yuque, and Teambition, and found that none of them used transparency.

So is transparency applicable? There are three problems with fonts that use transparency:

1. The font is not suitable for many scenarios:

When the font is on an image or textured background, a font with 65% transparency will obviously have the problem of uncontrollable fonts.

2. Increase rendering burden:

Using transparency for rendering will increase the burden on the browser. As a globally used content, if it is not necessary, try not to use it to avoid adding unnecessary burden.

3. Difficulty in maintenance

Because font color uses transparency, it is beyond the scope of color specifications, so a separate font Color component library needs to be maintained.

If you have experience with atomic design and Design Token, you will know that color and font belong to two different types of atoms, so the font color can generally use neutral color values.

Regarding specifications, I have always talked to my classmates about maintenance. Here is a little easter egg about the lack of maintenance of the design system:

What is information density?

We have talked about the concepts of font size and line height before, but there is a very complex design logic behind them. Through font size and line height, we can clearly understand the density relationship between different information; information density can determine the readability of information. Today, I will throw out some ideas and briefly talk about the logic behind page information density.

Information density can be understood as the amount of information you display on the page. Usually, people's intuitive feeling is that visual reading is more comfortable or more compact.

For example, when we draw a table with a fixed amount of information, we can control the amount of information displayed through font size, line height, and line spacing, and thus produce three visually completely different information display dimensions: spacious, comfortable, and compact.

Spacious: Taking the font size of 14px and the line height of 20px as an example, spaciousness is defined as the overall height of a word both above and below, which is 20px * 3 = 60px.

Comfortable: Comfortable is defined as half the overall height of the text at the top and bottom, that is, 20px * 2=40px.

Compact: Compact is the highest relative to information density. The height is basically about 0.6 times the line height (20 * 1.6 = 32px).

Of course, there is no unified standard for the definition of density, and it can be adjusted according to the characteristics of your own product. However, you must remember the three dimensions, which will be used in the second half of the text.

In actual work, we will emphasize the concept of screen effect.

This screen effect is similar to the square footage effect in the catering industry, and both are used as a specific indicator to measure the properties of a unit area. We can use it to measure the specific index of spaciousness, comfort, compactness, and interference from other factors outside the table.

The “screen effect” of the entire table can be obtained by dividing the information area by the table area * 100%.

The concept of "screen effect" can be used in many other components to find patterns. We will talk about it later.

What is legibility?

In simple terms, it means whether you can see the text clearly at a glance on the page and whether users can find it quickly. It is inversely proportional to the information density we mentioned above, that is, the higher the information density, the lower the readability.

However, when we meet customer needs at work, customers often care more about information density and ignore readability. For example:

• "Can you have a little more?"
• “Can the display be more detailed?”
• “I feel like more information could be added here.”

Faced with such problems, I believe you will often ask yourself, is the demand reasonable?

It is foolish to talk about requirements without considering the scenarios. For the above questions, we can think about the scenarios in this way:

Suppose you are "Boss Zhang" of ByteDance. As a boss, your important job every day is to check the overall status of the company. Then you open the management backend and click on the data dashboard. You find that the data dashboard is full of very large cards, but you don't need such a large font because the content is only for you to see, so you ask the designer to make corresponding adjustments.

Suppose Xiao Zhang is a sales employee. His daily job is to open the software to operate customer data. As Xiao Zhang becomes more proficient in the business, he wants to be able to display more information on a page for data operation. Therefore, he wants the designer to modify the density of information.

It seems that their demands all have their own reasons. For these situations, it is recommended that everyone can adopt different ways to present them.

Now we are dealing with Xiao Zhang's needs. The product involves a large user group. For the work needs of grassroots employees, we should consider abstracting special preferences into general logic and apply it to the system. For example, set different heights of the table at the bottom of the table: "spacious, comfortable, compact" and other dimensions to meet user needs in a more general way, rather than adjusting for each user individually.

In response to the specific needs of the boss, perhaps the entire function/product is designed for him. Therefore, for such "boss needs", we can make adjustments based on his specific usage habits. Therefore, designers should think more from the actual environment of specific groups of people.

Of course, if other roles besides the boss also need to use this function, we can also define different types of roles based on functions such as "view, classification, and filtering".

How should we strike a balance between comfort and density of page information? I really can't give you a universal formula. What can help you is to start from the real scenario/industry of demand and make a comprehensive consideration of the entire impact range.

Finally, regarding line height, there are many strange problems. For example, in Microsoft YaHei font, due to its own baseline, Microsoft YaHei font itself is displayed at the bottom. When we mix icons and text, there will be confusion. Let's discuss in the comment area. How do you deal with this situation?