What does the visual hierarchy of fonts mean?
Because it has an important influence on the design project, we need to study and discuss it.
When you do this, we can allow users to easily understand the points you want to pay attention to, and make the instructions easy to understand.
Without the use of hierarchy, the text, words, or articles all look the same, and it is very difficult for the user to obtain useful information for him.
So next, I will introduce to you how to use the hierarchical effect of text to allow users to easily obtain the information they need to create a charming website.
The details start from the following.
The text is part of the design material, and it is necessary to consciously think about the specific structure combination. First of all, we need to think carefully about the meaning of words.
size
This is the technology that best emphasizes design elements. People's sight will naturally be attracted by those big things. If the text uses a large font, users will naturally read those contents.
It is necessary to reduce the font size to make it different from other fonts. Careful adjustments are necessary. When you make the font bigger or smaller, it will not change exactly as we expected, you need to be careful at all times. (E.g. when you are using decorative fonts)
The font size does not have a sense of uniformity, it will have a very amateurish feeling, it will also make the text difficult to read, and the size adjustment will become impossible. The following sample uses the font Open Sans. Such an elegant font is suitable for the title. [Open Sans is a sans serif font designed by Google commissioned by Steve Matteson. According to Google, it is designed with the concept of "the importance of honesty, open expression, and a neutral but friendly appearance" and is "optimized for print, Internet, and mobile device readability." ”】
When adjusting the font size, you need to verify that the size is appropriate. Start with the text, not the title, and determine their main font first. Bring out the characteristics of the font and let the user see the attractive effect.
Points to note when adjusting the font size
The font size used for the text is preferably above 14pt. (19px)
The size of the title is best controlled below 35pt. (Approximately 250% of the text)
The size of the subtitle should be controlled below 25pt. (About 175% of the text)
The size of the navigation menu should be controlled below 23pt (about 165% of the main text)
The character size on the navigation menu should be controlled below 20pt (approximately 140% of the text)
weight
The weight of the text refers to the thickness of the text and the meaning of how much white space should be left. Obvious and size are different in importance, especially when a unique font is used, some important content can be more prominent.
Once you have decided on the size and weight of the text, let's think about what font to use. Bold and thin are used together to show a sense of hierarchy. In order to convey the importance of text, there is a well-known design method, a technology that can express text even in the state of a small screen.
Italic
Italic is also a very effective means of emphasis, and sometimes it is easier to attract attention than bold. Because the visual difference is relatively small, it is very effective for special fonts.
Lowercase or uppercase?
All text is capitalized. Some people would argue that this can have a shocking effect. The same is true for web design. Using uppercase in the project can enhance the sense of hierarchy and prevent the small-sized text from mixing with the background.
Color scheme
The weight of the text also depends on the color. Let's make an easy-to-use color scheme. Therefore, we need to learn some basic principles of art, such as the difference between cool and warm colors, popular colors and natural colors, etc. It is very important to learn some basic principles of color matching.
When applying color to text, you also need to pay attention to its sense of layering. The use of bright and bright colors shows that they are more important than other elements, and you need to know some knowledge about colors and contrast.
Compared
As literally, contrast can be used in a variety of places such as color, weight, and size. The comparison between the main text and the title is arguably the most common technique.
Blank
Leaving a blank space between the paragraph and text of the article can improve the reading effect. But because there is a need to adjust the character width, you need to be careful when using it.
First of all, the first thing to consider is the line spacing. For different sizes and colors, we need to choose the right style.
After using the white space, because it will also affect the order of the hierarchy, if you use similar style fonts, the white space can slightly reduce the relevance between them, creating a refreshing effect. However, if there are parts that you want to notice and compare with other words, you need to carefully adjust the balance between them.
direction
Orientation (English: Orientation) refers to the form of expression of text in the layout. Although it may seem obvious, it is an important process in level performance. In most cases, letters and numbers are placed in a straight horizontal line on the screen, which will be neat and easy to read.
If the text is placed vertically, not only will it become an important design element, all eyes will be focused on it. Although this technique can reverse your design, as a designer, you still need to fully understand your design intent before using it.
Texture
The texture of text is a technique that takes a lot of time to master. This difficulty does not refer to the texture of the font itself, but refers to the style of all text on the page. Use appropriate textures, change design elements, and break the original design rules. Clarify the intention or concept so that your design will not be overkill.
Level
No matter how complicated the project is, it can be divided into three layers using text to completely distinguish the important parts of the website. The levels used here are divided into: Primary (English: Primary), Secondary (English: Secondary), and Tertiary (English: Tertiary).
The text on the main layer (English: Primary) is the most prominent element on the page. Generally, large size and bright colors are used to show a different charm from other characters. However, because the text has too much influence on the hierarchy, there will be restrictions on its use, for example, it can only be used in the title.
The text on the secondary layer (English: Secondary) does not have the same influence as the main layer, but it can make the user's attention to the content of the text very well. Make use of different points such as color matching, size, and white space to distinguish primary and secondary, which can be used in subtitles, introductions and excerpts.
The text on the third layer (English: Tertiary) is used in the main content, without any characteristic elements. The font used here does not need to be very eye-catching, you can choose some simple fonts without any exaggerated effects. Don't interfere with the main content, so that the user's attention will be transferred to other places.
At last
In web design, especially when a lot of content needs to be displayed, all the elements are very important to the user's visual experience. This is the end of the techniques introduced this time to use fonts to make your web pages more layered. I hope you can use them to make better works. Thank you everyone~ Let's feel the fun of design together.
Source: Network