Texts are essential parts of your website, back in 2006, Oliver Reichenstein wrote that 95% of the information of the web are texts. Now this percentage probably has been reduced, since the average internet speed has increased a lot, and people started to create websites with rich media (images, videos, audios and others), but text is still on the first place in communication on the web, so it is important to build up your website thinking about having a logical display of your contents. There should be a hierarchy, which would define how important your different texts are. For example titles should be in headings, descriptions in paragraphs, and you could even make more levels with the headings. This isn’t just to satisfy Joomla, WordPress, and other kind of web developers with how pretty your code is, but for example Google is using these tags to identify what it should show in the title and description of the search result.
This is why we made two layers, the text layer, which makes paragraphs, and the heading layer, which makes headings. The difference between these two aren’t just the tag, but also we gave different options for them. The heading layer can have split text animation, which means that you can animate your text either separated by its words, or separated by its characters, and it can give some really cool effects. The reason you should use many animations is that they draw the eye. You can have many things on your website, and if you just want to pop some information, you don’t need to use annoying alerts, but a nice little effect can do the trick too.
The unique option for the text layer is that you can set up different texts for different devices. This can be important if you use it correctly to show some descriptions. It can be a pretty long text, and when you use smaller and smaller devices, the space in your website will become limited, and this option allows you to make a shorter description for tablets and phones to be able to manage the space better. You can also sacrifice from your font size, but the suggested minimal font size is 8px, because under it the text could become illegible. We have an option to set the minimal font size for every device, even for landscape or portrait views, and another option at the slide editor to increase or decrease the font size.
Designing your fonts
Let’s talk about the design. If the 95% of your website is text, the styling of your fonts will define a major part of how your pages will look like. The first thing you should choose is the font family which should look something like what you are trying to say. For example, if you are creating a medieval website, it would be cool to use ‘UnifrakturCook’, but if you are making a website for your company, it should look a little more professional. To have a nice looking website, you shouldn’t use many different families, only 3 or fewer because the hierarchy matters in this case too; you will want your users to know the priority of the text you are displaying, and you can do that by using the same kind of fonts for the same priority texts. It can be confusing, if one title has ‘Open Sans’ font family, the other ‘Montserrat’, because the user won’t know, why they are different, however, they aren’t.
One font family can look very different, if you use some other options, which are available in our Font manager, like making the font bold, or give a bigger line height to it.
Keep it simple
It is also important to not to overwhelm the reader with too much text, we are not in the school giving up homework, but your website should be inviting and pleasant to read, easy to navigate between the pages. Have different colors for your links or just when you hover over them to make them noticeable, and they should be logically built up to make the user find what he is looking for even if he doesn’t even know yet that he will want to look at something, where our slider comes up, and gives you a great advertisement. Don’t be afraid to use whitespace, which means big empty spaces, because it’s hard to look through the crowd, and it’s so much easier to see what the user needs to see in a nice minimal layout.
- Use 3 or fewer font families
- Use font size to show hierarchy
- Give minimum 8px font size
- Use matching fonts
- Use 5 or more fonts
- Give smaller, than 8px font size
- Overwhelm the user with too much text
- Use too many colors