Typesetting practical skills to improve the high-level sense of UI interface

In UI interface, typesetting design is equally important. It’s the responsibility of the interface itself how to effectively transfer the vital information to the user, and most of the time, it is usually done by text. That’s why effective typesetting is so important to improve the overall user experience. The essence of optimizing typesetting is to optimize UI and UX. Today I would like to share with you five practical typesetting skills to improve the advanced sense of UI interface.

Although most of the time, optimizing typesetting is to improve the readability of typesetting layout and the accessibility of the course, its lowest standard and core element is still to ensure the “usability” of typesetting itself. Reduce the barriers and friction when users use, reduce the cognitive load. Excellent layout design can make users pay attention to the content, rather than the layout itself.
“In fact, typesetting itself is not the choice of fonts, nor the production of fonts and layouts. It is the process of shaping the presentation form of the text and achieving the best experience. 」——Oliver Reichenstein
As for the importance of typesetting in UI design, I will not emphasize it any more. Now, I will share 5 practical typesetting optimization skills:
1. Enhance the hierarchy to improve the clarity of UI
The necessary text content will be collected, reorganized, and the visual hierarchy will be combed consciously, so that users can clearly perceive the content. For information level, it is usually composed of common text elements such as title, subtitle, text, quotation and so on.
A clear text hierarchy is based on the response style of the text itself, so as to ensure the readability. The main title 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. In this way, the size and position relationship before the text elements are more clear.
A rule of thumb is to quickly sort out the relationship by modifying the doubling and halving of font size. For example, if the title word uses ﹣ 32px, the text font uses ﹣ 16 ﹣ PX to create the contrast.

In more complex and changeable use scenarios, the title of ordinary text uses twice the font size of the text. If the title needs to be highlighted, it can use three times the font size of the text. For special topics or scenarios that need to be emphasized, it can use four times the font size of the text.
2. Consciously create layout with breathing feeling
Word spacing, line height and president are the most frequently adjusted attributes in typesetting. The lack of enough space may make the text difficult to read, but too much indirectness may make the user feel uncomfortable when reading.
·Row height
In different places, different terms may be used to express the concept of “line height”. For example, “line spacing” is used to describe it in “PS”. In essence, they describe the same thing – the vertical spacing of two lines of text.
Line 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 row height to 1.5 times of the font height. In the actual design, reasonable adjustments will be made according to the design features and application scenarios of the font itself (reading on the mobile end may be increased appropriately, and the use scenario of smart watch may be set higher). This rule can be used directly if your text is in 16 point font – it’s proven.

·Word spacing
Word spacing refers to the horizontal spacing of the text. Few people spend too much time on the horizontal spacing setting, but it does have an impact on reading. In English fonts, the spacing of characters usually follows the following rules:
When using capital letters, you need to increase the word spacing
When the font size increases, you need to reduce the word spacing appropriately
When increasing the font thickness, you need to reduce the word spacing appropriately

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 word even distance.
·President
The president essentially refers to the width of the text paragraph and the length of each line of the text. Usually, the length of the text should be controlled to be relatively short, so that it is easy to read. On a large screen, such as a laptop screen with a width of 1440px, use the length of 60-80 characters per line (Chinese is usually controlled between 35-42 characters per line). However, on a mobile screen, the number of characters per line should be reduced to 35-45 characters (Chinese can be controlled between 20-25 characters).

3. Select the font according to the content
When selecting text fonts, we need to consider the experience of potential readers. Different fonts can bring different experience 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 a lot of choice, in this regard, China, Japan and South Korea have more problems in text fonts. However, on the mobile app, many applications can choose a third-party font that is not the default of the system. On the web page, it will be a lot of trouble to implement it, so usually only the local font will be called.
“Excellent designers regard text as content, great designers regard text as UI. 」——Cameron Moll
Correct font selection can deliver information to users at both information and visual levels. Wrong selection will lead to misunderstanding and confusion.

4. Use the same font family
If you don’t have enough experience in the collocation of different fonts, it’s always the safest choice to use the fonts of the same font family for design. Usually, a font family is designed for a specific purpose. They have a more unified, cohesive appearance, in the design process, will be more convenient.
Another advantage of using font family is that it can quickly adapt to the needs of different text elements in typesetting. You can quickly make corresponding contrast and present different visual effects by adjusting font size, thickness, text size and color.
In addition, the same font family usually has corresponding italics, equal width font and so on, which can meet some relatively special needs without manual modification.

5. Use left alignment as much as possible to improve readability
In the vast majority of countries and regions in the world, the typesetting used is from left to right (for example, Arabic is the reverse), and reading Shun Xun is top-down. This determines that left alignment is an important benchmark to ensure readability.
Left alignment provides a reference position for both eyes when scanning, which greatly reduces the reading pressure in the process of a large number of long-time reading – while center alignment obviously can’t.
In addition, we should also pay attention to the fact that there is only one word in the last line of a paragraph, which is called “few words” in typesetting.

epilogue
Typesetting is an important skill that every designer needs to learn and master in the digital era. No matter what your design project is, these basic rules can always bring better results to your design. However, these typesetting skills are still very basic. In the actual design, many more complex typesetting layouts will be involved – but these basics are always the most important thing.

Please indicate：Free Editor Online Photoshop » Typesetting practical skills to improve the high-level sense of UI interface