In every design, there must be a hierarchical order between the elements to be able to guide the viewers and to give them clues about the elements that are more important than the rest. In web design, these elements will usually attract the attention of visitors and stimulate a certain action, either sign up for a service or continue browsing the site.
The visual hierarchy not only applies to images but also text. This typographic hierarchy can be considered as a sub-hierarchy since it is part of the visual hierarchy and, as the name implies, refers to the order of importance of the text blocks.
In this article, we list the elements that you must take into account to establish an appropriate typographic hierarchy in your designs.
Total space
The space you have for your design is a determining factor to establish an appropriate size for your fonts. You should take into account the spaces where you will not include text, that is, where you will only place images or icons.
To make this a simpler task, you can draw them in your sketch as blocks. Add some symbol to those squares or rectangles that are images and those that are blocks of text so you can differentiate them and verify how much real space you have for your texts. You should also consider blanks, particularly micro-spaces.
The size of the body text
Although the title is the first text that visitors will notice when entering your website, probably the most relevant information for them is found in the body of text that makes up a large percentage of the website’s content. Therefore, it is advisable to determine the font you will use, the size and the spacing.
Once you have delimited the body of text, you can choose the size and font for the other elements such as the title, subtitle, quotes, legends, etc. The decisions you make for these elements will depend on the body of the text. As you should know, the size of each text should increase according to its importance. The titles will be the important text element of the site, followed by subtitles, navigation, body text and lastly, the footer.
As usual, the most important elements go to the top of the page. Therefore, the title is always the most visible block of text on any web page and the footer is placed at the end.
Reading patterns
One of the most common reading patterns on the web follows the outline of a “Z” or an “F”. This is one of the most relevant factors that we can take into account when designing since naturally, the view of your visitors will rest on the upper corners. It is no accident that in many designs, the logo is placed in the upper left corner. As the user’s view tends to settle in these areas, it is a suitable place for the logo.
Use this knowledge about visitor reading patterns to place text blocks in a way that is more convenient for visual reading.
Visual weights
While the size of the text blocks determines how remarkable that element will be on the users’ screen, it is not the only important factor. The visual weights of each element also have an impact on visual reading and design in general. For this reason, when choosing the fonts for your text, you must take into account the visual weight of each of them because it will make them look bigger. So, it is of great importance to consider the visual weights.
We list a series of features that have an impact on the visual weight of the sources:
Fonts that have some additional decoration.
Wide fonts
Fonts that use capital letters always.
Bold Fonts
All these particularities of the fonts you choose will increase your visual weight.
The number of variations of the font
Some font families include many variations. The Helvetica Neue font has 51 variations, which opens up many possibilities for designers as they maintain the unity of the design, but they can add diversity by including a variation of the font.
Variations of the font in web development by top web development companies are often used to highlight a certain phrase or word. This simple technique can help reinforce the message, so it is quite common to see how it is applied to various websites. So, if a variation is added to a certain word in a certain way, it will be more important and this is something that should be considered when establishing a typographical hierarchy.
Not only the variations of a given font can help you highlight words, but you can also do it by color or by using simple animation in that word.
In conclusion
Establishing a typographic hierarchy in a web development project can be a complex task and there are several factors that you should consider. Based on these, you can develop effective strategies to determine the correct typographic hierarchy. If you take these factors into account, we are sure that you could facilitate the process. We also recommend that you document this process, especially in the size selection phase, as you may find a certain pattern when working with percentages. These patterns could be useful for future projects that have a certain similarity.
