When we talk about font combinations, there are certain factors that we take into account: hierarchy and contrast. These two terms are closely linked, because we need to create a certain hierarchy between each word composing the project and this will be in charge of creating contrast.
In the graphics projects we can have more freedom to create font combinations, but in web design projects, these elements are more defined and therefore it is easier to make a policy decision on each of them.
It is very important to define the hierarchy among them, because if not we can take the user to error. In addition we would be wasting the potential that fonts give us. The text must be taking you through the project and not the reverse.
Thus, today we will talk about 5 tips to print to your web fonts the hierarchy they need. Let’s go! 😉
1. Build a scale
It is clearly the main point and from which you must build a good hierarchy of text. Before you begin, define the relationship of each of the text elements and the ratio between them.
It is useless to set the text paragraph with16 px and the titles with 18 px when the font chosen for titles has a smaller size and the effect is not what we want. The scale cannot only be determined by the numbers, but we have to check well to define what the hierarchy that we are looking for is. It starts from the font combination and it works the hierarchy from there.
Although if you are comfortable with this hierarchy possibly this will be with you for many of your web projects, think that you have to reset it in each of them, as font combinations will change and also the effect you want to produce. Although you will keep some issues, you will always have to reset!
2. The importance of a good text of paragraph
In the article tips for your blog text to be readable, you can find some tips to consider getting a good paragraph text.
Remember the importance of font size, line spacing, the space, combinations of background… These tips are very important, and if you want your paragraph text to work and most importantly, to be readable, you should have them always in mind.
Also, if the text appears in the header or below, being a key to understanding the project, it is a good idea to align in the center and of course maintain a font size that facilitates reading. Do not forget that if the text will appear in the center, it does not matter if that does not come from side to side of the screen, the ideal is that this is between 40-70 characters.
3. Prints different weight to different text elements
It is important to determine the visual weight that we give to each of the text elements, and this in addition to its size we can achieve it by applying different font factors.
If we leave our eye focused on various points, in this case, of the screen, we must go guiding him through the hierarchy of fonts and thus the weight that we give to them.
It is quite used to provide a greater size to fonts displayed on the top of the screen, and a lower to fonts on the bottom. But with this rule we can find areas where we want to draw attention and make contract with fonts.
Some tips to give more weight to fonts:
– Include thicker strokes: If your typeface has different types within the same family, it is time to make use of them. Use a bold, black or heavy, to get your text more important.
– Use it in capital letters: clearly if you combine uppercase / titles, lowercase / paragraph text, you will create a hierarchy between them. In addition you can play with the ratio of height / width. Depending on the effect we are looking for we will go to one or another wide.
– Do not forget the Space: if we play with this we can also organize the different fonts. It is not the same as these appear with spacing between them or with a particular separation. It depends on the hierarchy we give it, this spacing should vary.
– Use more original and creative fonts: we have said many times: titles and typographical spaces are perfect for use fonts that call our attention. So if you are looking to create hierarchy and contrast, use a different font that matches the paragraph text.
If on the contrary, what you are seeking is to remove weight to fonts, you can follow any of these tips:
– If we said before it is time to give thickness, now it is the time to remove it: use finer thicknesses or a more condensed font.
– Print less contrast with the background: Remember that if you want the text to be readable, there must be contrast, but also we can decrease it slightly to make less contrast.
– Use lowercase: In the same way as before we used uppercase to create hierarchy, we can use lowercase to increase the contrast.
4. Follow the pattern of the reading “Z”
When we read (in Western writing) we do it from left to right, our eye automatically goes on the left top (that is why most of logos are in this place.)
Thus, a great option is to use the natural flow and place the text of our website following this scheme. If we can get the text to flow in this manner, it will be easier to carry our visitor.
Think that by following this pattern, any word or set of words you want to enhance can do so by changing the colour or printing an underscore. These techniques (as old as the discovery of fire) continue to give their effects.
5. Visual inspection
We started saying it and we can only finish with it. Everything we have said has no validity if we do not make this last point: we have to do a visual inspection to verify that it fits what we are looking for and therefore we are printing hierarchy to the words or phrases we wanted.
When designing a web project, we are influenced by many factors: images, ilustrations… so the font hierarchy should suit them perfectly. Thus, although we define general rules, remember that in most cases, they must be specific to each project.
The hierarchy is changing…
How do I add fonts to CorelDRAW?
How to manage fonts in CorelDRAW
Step 1 Navigate to the font manager.
Step 2 Install/Select the font you want.
Step 3 Add the font to your desired folder/collection.
Step 4 You’re done! Your font is now easily accessible.
How do I extract fonts that used into ppt/pptx file?
Click views tab. Slick slide master tab. Point the cursor to the text boxes of the thumbnails for which you need to change the fonts. Then click fonts tab which will drop all the new default fonts.