5 practical typography tips to improve the high-end feel of UI interface

In the UI interface, typography design is equally important. How to effectively convey crucial information to users is the responsibility of the interface itself, and in most cases, this is usually done with text.

This is why effective typography is so important for improving the overall user experience of the UI. Optimizing typography is essentially optimizing the UI and UX.

[[326821]]

Although in most cases, optimizing typography is to improve the readability of the layout and improve course accessibility, its lowest standard and most core element is still to ensure the "usability" of the typography itself. Reduce obstacles and friction when users use it, and reduce cognitive load. Excellent typography design can make users pay attention to the content, not the typography itself.

“In fact, typography itself is not about choosing fonts, nor is it about making fonts and layouts. It is the process of shaping the presentation of text to achieve the best experience.” - Oliver Reichenstein

I won’t emphasize the importance of typography in UI design anymore. So, I will share 5 practical typography optimization tips below:

1. Strengthen the hierarchy to improve the clarity of the UI

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

A clear text hierarchy relies on a responsive style that matches the level to which the text belongs, so as to ensure readability. The main title should be prominent, the main text should be clear, and the subtitle serves as an auxiliary explanation of the title, so it should be appropriately reduced. In this way, the size and position relationship between text elements are clearer.

A rule of thumb is to quickly sort out the relationship by modifying the font size by doubling and halving it. For example, if the title font is 32px, then the body text font should be 16px to create this contrast.

In more complex and varied usage scenarios, ordinary text titles use twice the font size of the text. If the title needs to be highlighted, then 3 times the font size of the text can be used. In special topics or scenarios where emphasis needs to be placed, 4 times the font size of the text can be used.

2. Intentionally create typography that breathes

Font spacing, line height, and line length are the most commonly adjusted attributes when doing typesetting. Lack of sufficient spacing may make the text difficult to read, but too much spacing may make users feel uncomfortable when reading.

• Line 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 between two lines of text.

There is no standard value for line height itself. It usually depends on the characteristics of the font itself and the design requirements. Generally speaking, in many designs, the line height tends to be set to 1.5 times the font height. In actual design, it will be reasonably adjusted according to the design characteristics of the font itself and the application scenario (it may be appropriately increased for mobile reading, and may be set higher for scenarios such as smart watches). If your text uses a size 16 font, then this rule can be used directly - it is a proven rule.

• Word spacing

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

• When using capital letters, you need to increase the spacing between characters.
• When the font size increases, the spacing between characters needs to be reduced appropriately.
• When increasing the font weight, you need to reduce the spacing between characters appropriately.

Usually when typesetting, the software will automatically adjust the distance between different letters. However, when doing visual design, you also need to pay attention to the issue of kerning.

• President

Line length essentially refers to the width of a paragraph, the length of each line of text. Usually, the line length of text should be kept relatively short so that it is easy to read. On large screens, such as a 1440px laptop screen, use a line length of 60-80 characters (Chinese is usually controlled between 35-42 characters per line), but if it is a mobile screen, the number of characters per line should be shortened to 35-45 (Chinese can be controlled within 20-25 characters).

3. Choose fonts based on content

When choosing a text font, you need to consider the experience of potential readers. Different fonts can bring completely different experiences to the interface and experience. The choice of font can affect the user's first impression of the interface.

Note: English fonts usually do not have a lot of room for selection. In this regard, China, Japan, and South Korea have more problems with text fonts. However, on mobile apps, many applications can choose third-party fonts that are not the default system fonts, but on web pages, it is much more troublesome to implement, so usually only local fonts are used.

“Good designers treat text as content. Great designers treat text as UI.” —Cameron Moll

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

4. Use the same font family

If you don’t have enough experience in matching different fonts, it’s always the safest choice to use fonts from the same font family. Usually, a font family is designed for a specific purpose. They have a more unified and cohesive appearance, which makes them easier to use in the design process.

Another benefit of using a font family is that it can adapt to the typesetting requirements of different text elements more quickly. You can create corresponding contrasts and present different visual effects more quickly by adjusting the font size, weight, text size, and color.

In addition, the same font family usually comes with corresponding italics, monospaced fonts, etc., which can meet some relatively special needs without manual modification.

5. Use left alignment whenever possible to improve readability

In most countries and regions in the world, the text layout used is from left to right (for example, Arabic is the other way around), and the reading order is from top to bottom. This determines that left alignment is an important benchmark to ensure readability.

Left alignment provides a reference position for the eyes when scanning, which greatly reduces the reading pressure during the process of large-scale and long-term reading - center alignment obviously cannot do this.

In addition, one extra thing to note is to avoid having only one word in the last line of a paragraph. Single-word lines are called "few words" in typesetting, which needs to be avoided.

Conclusion

Typography is an important skill that every designer in the digital age needs to learn and master. No matter what your design project is like, these basic rules can always bring better results to your design.