UI interface typesetting skills: how to improve the advanced feeling of UI interface?

Typesetting design is equally important in the UI interface. The interface itself is responsible for effectively conveying important information to users. In most cases, this is usually done through words. Effective typesetting is so important to improve the UI user experience. Optimizing typesetting is essentially optimizing UI and UX. Now I will share with you five practical typesetting skills to enhance the advanced feeling of UI interface.

1. Enhance the hierarchy and make the UI clearer.

Combing, reorganizing and consciously combing the visual level, so that users can clearly perceive the content. In the information hierarchy, it is usually composed of common text elements such as title, subtitle, text and reference notes.

A clear text hierarchy depends on the style corresponding to the level of the text itself to ensure readability. The title should be prominent, the text should be clear, and the subtitle plays an auxiliary role in explaining the title, so it should be appropriately reduced to make the size relationship and position relationship in front of the text elements clearer.

A rule of thumb is that by modifying the font size and reducing the font size, the relationship between them can be quickly eliminated. For example, the title word is 32px, and the text font is 16px to create this contrast.

For more complex and changeable usage scenarios, the font size of common text titles is twice. If the title of the title needs to be highlighted, the font size of the text can be three times, and it can be displayed with four times in special circumstances or when it needs to be emphasized.

2. Consciously create an atmosphere of format.

Spacing, line height and line spacing are the most frequently adjusted attributes in typesetting. Lack of enough space may make the text difficult to read, but too much indirectness may make users feel uncomfortable when reading.

(1) line height

The concept of "line height" can be expressed in different terms in different places. For example, the "line spacing" in PS is described by "distance". Essentially, they describe it with two lines of vertically spaced characters.

There is no standard value for the collection itself, which usually depends on the characteristics and design requirements of the font itself. Generally speaking, in many designs, the line height is often set to 1.5 times the font height. In the actual design, according to the design characteristics of the font itself and the application scenario (the reading volume of the mobile terminal may increase appropriately, and the smart watch may be set higher in this application scenario), reasonable adjustments are made. This rule can be used directly. If your text is in font 16, it has been verified for a long time.

(2) Word spacing

Kerning refers to the spacing between horizontal characters. Almost no one will spend too much time setting horizontal kerning, but it will have a certain impact on reading. When using English fonts, kerning usually follows the following principles:

When using capital letters, you need to increase the spacing between words.

When the font size increases, the spacing between words should be reduced appropriately.

When increasing the font thickness, we should appropriately reduce the spacing between words.

When typesetting, the software will automatically adjust the letter spacing, and at the same time, we should pay attention to the problem of uniform spacing in visual design.

(3) President

Line number essentially refers to the width of a text paragraph and the length of each line of text. Generally speaking, the length of text is relatively short, so it is easy to read. For notebook computers, such as a large screen with a width of 1440px, a line of 60-80 characters is used (Chinese is generally controlled at 35-42 characters per line), but if it is on a mobile screen, the number of characters per line should be reduced to 35-45 (Chinese is controlled at 35-45 characters).

3. Choose a font according to the content

When choosing text fonts, we should consider the reading experience of potential readers. Various fonts will bring different experiences in the interface and experience, and the choice of fonts will affect the user's first impression of the interface.

Note: There are generally not many choices of English fonts. In this regard, China, Japan and South Korea will obviously have more problems in the font of Chinese characters. However, on the mobile APP, many applications can choose non-default third-party fonts, while on the web page, it is more troublesome to implement, so generally only local fonts will be called.

"Good designers regard words as content, and great designers regard words as UI. -Cameron Moore

Choosing the right font can convey information at both the information and visual levels, and the wrong choice will lead to misunderstanding and confusion.

4. Use the same font family

If you are not rich enough in the collocation of different fonts, then use the same font design, which is the safest choice. Generally speaking, font design is for a clear goal. They have a more unified and cohesive appearance, which will be more convenient in design and use.

Another advantage of using font family is that it can adapt to the needs of different text elements more quickly. You can compare them more quickly and present different visual effects by adjusting the font size, thickness, text size and color.

In addition, in the same font family, it corresponds to italics, equal-width fonts and so on. It is often attached so that some special requirements can be met without manual modification.

5. Use left alignment as much as possible to improve readability.

In most countries and regions in the world, the typesetting of characters is from left to right (as opposed to Arabic), and the fluency is from top to bottom. It determines that left alignment is an important benchmark to ensure readability.

In the process of reading for a long time, left alignment provides a basic scanning position for human eyes, which greatly reduces the reading pressure, while center alignment obviously cannot do this.

In addition, we should pay special attention to avoid only one word in the last line of a paragraph, avoid single-word lines in typesetting and avoid typesetting.

Typesetting design is an important skill that every designer needs to learn and master in the digital age. No matter what type of your design project is, these basic principles will always bring better results to your design. But these typesetting techniques are only a very basic part. In actual design, many more complicated typesetting layouts will be involved, but these foundations are always the most important. If you want a better typesetting layout, go to class and take a typesetting class ~