Shulou(Shulou.com)06/02 Report--

This article mainly explains "what are the typesetting skills to improve the advanced sense of the UI interface". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "what are the typesetting skills to improve the advanced sense of the UI interface?"

1. Strengthen the hierarchical structure to improve the clarity of UI.

Gather the necessary text content, reorganize, and consciously sort out the visual hierarchy, so that users can perceive the content clearly. For the information level, it is usually made up of common text elements such as title, subtitle, text, reference description, and so on.

The clear hierarchical structure of the text depends on the style of response that conforms to the level to which the text itself belongs, so as to ensure readability. The headline should be prominent, the text should be clear, and the subtitle should play an auxiliary role in explaining the title, so it should be appropriately reduced, so that the relationship between the size and position of the text elements will be clearer.

A rule of thumb is to quickly sort out relationships by doubling and halving font sizes. For example, if the title word uses 32px, then the body font uses 16 px to create this contrast.

In more complex and changeable usage scenarios, ordinary text headings use twice the font size of the text, and words need to be highlighted in the title, then you can use three times the font size of the text, while under special topics or scenarios that need to be emphasized, use four times the font size of the text to present.

2. Consciously create typesetting with a sense of breathing

Word spacing, line height and president are the attributes that are most often adjusted when typesetting. The lack of sufficient spacing may make the text difficult to read, but too much indirectly may make users feel sparse and uncomfortable when reading.

Row height

In different places, different terms may be used to describe the concept of "line height". For example, "line spacing" is used in PS to describe it, which in essence describes the same thing-the vertical spacing between two lines of text.

Row height itself does not have a standard value, it usually depends on the characteristics of the font itself and design requirements. Generally speaking, many designs tend to set the line height to 1.5 times the font height, and in the actual design, it will be adjusted reasonably according to the design features of the font itself and the application scenario (mobile reading may be increased appropriately. Smartwatches may be set higher in the use scene). If your text uses a 16-point font, then this rule can be used directly-it's proven.

Word spacing

Word spacing refers to the horizontal spacing of the text. Few people spend too much time setting horizontal spacing, but it does have an impact on reading. In English fonts, word spacing usually follows the following guidelines:

When using uppercase letters, you need to increase the spacing

When the font size increases, the small character spacing needs to be reduced appropriately.

When increasing the font weight, it is necessary to reduce the space between small characters.

Usually in typesetting, the software will automatically adjust the distance between different letters and letters, and in the visual design, we also need to pay attention to the problem of character spacing.

President

The governor essentially refers to the width of the paragraph of the text and the length of each line of the text. Usually, the president of the text should be controlled relatively short so that it is easy to read. On a large screen, such as a laptop screen with 1440px width, use a length of 60 characters per line (Chinese is usually controlled between 35 characters and 42 words per line), but if you are on a mobile screen, the number of characters per line should be reduced to 35 characters 45 characters (Chinese can be controlled at 20 characters 25 words).

3. Select the font according to the content

When selecting text fonts, you need to take into account the experience of potential readers. Different fonts can bring different experiences to the interface and experience, and the choice of fonts can affect the user's first impression of the interface.

Note: English fonts usually do not have much choice, in this regard, China, Japan and South Korea have more problems in text fonts. However, on mobile APP, many applications can choose third-party fonts that are not the default of the system, while on web pages, it will be a lot of trouble to implement, so they usually only call local fonts.

"good designers regard text as content, and great designers regard text as UI. "--Cameron Moll

The correct font selection can convey information to users at both information and visual levels, and the wrong choice will lead to misunderstanding and confusion.

4. Use the same font family

If you do not have enough experience in the matching of different fonts, it is always the safest choice to use fonts of the same font family to design. Usually, a font family is designed for a clear goal. They have a more unified and cohesive appearance, and will be more convenient in the process of design and use.

Another advantage of using a font family is that it can more quickly adapt to the needs of different text elements in typesetting, and you can more quickly adjust the font size, thickness, text size, and color to create a corresponding contrast. Show different visual effects.

In addition, the same font family is usually accompanied by corresponding italics, equal-width fonts, and so on, which can meet some relatively special needs without manual modification.

5. Use left alignment whenever possible to improve readability

In the vast majority of countries and regions in the world, the text typesetting is from left to right (for example, Arabic is the other way around), and reading Shun news is from top to bottom. This determines that left alignment is an important benchmark for ensuring readability.

Left alignment provides the eyes with a reference position for scanning, which greatly reduces the reading pressure in the process of reading for a large amount of time-while center alignment obviously fails to do so.

In addition, additional attention should be paid to avoid having only one word on the last line of the paragraph, which is called "few words" in typesetting.

Thank you for your reading, these are the contents of "what are the typesetting skills to improve the advanced sense of the UI interface?" after the study of this article, I believe you have a deeper understanding of what the typesetting skills to improve the advanced sense of the UI interface have, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.