Designing text’s appearance on websites. 7 golden rules. UX Tutorial
By Karol Andruszków
Would you like to improve UX on your website, but you don't have time to learn complex rules of text design? WITH BOWWE you don't need to become an expert in this field. Just follow a few simple tricks on your website! We explain the essential principles of Internet typography, the knowledge of which will forever change the aesthetics of the content on your website.
Although Typography today is of great importance in the design of websites and web applications, it is one of the most neglected elements when designing sites or running a blog. We often forget that readability text is as important to the user as the content itself. Typography elements such as font size, width and colour have a massive impact on User Experience, i.e. the user's experience on the web.
So how to make the text on the website readable and consistent with your brand's visual identity? Typographic rules used when designing websites, contrary to appearances, is not very complicated, and knowledge of them may turn out to be irreplaceable. We've collected the eight most essential rules thanks to which you will create an ideal typography system for your website and significantly improve its User Experience.
1. Choose the right font
The most important thing is that your typography should reflect the true nature of your industry. Therefore, choosing the right font for your website design cannot be a matter of chance. Just because a font is popular and you like it doesn't mean it will be appropriate for your industry. Pay attention to what the communicates typeface (i.e. its graphic features, i.e. style, proportion, shape).
Where to find free fonts?
How to install fonts?
- Install on a computer - this is the simpler option. All you have to do is unpack the font file. Then copy all unpacked files to the "fonts" directory in the "Windows" folder on your computer. Later, you can already open the font in any simple graphics program like GIMP.
- Installation directly on the website - this is a more complicated way. If you do not have coding skills, you will have to ask a programmer or web designer for help.
2. Select font size
- Makes the text legible - font size of 12pt and below can significantly hinder readability;
- Matches the typeface - for example, for its system font Roboto Google recommends a minimum of 16 pt. On the other hand, San Francisco - the font used, among others, in Apple devices, should be at least 18 pt. size;
- Reflects the purpose of the page - if the page is not dominated by text but design, you can use a smaller font. Also, in the case of interactive pages that encourage the user to click at every step, this procedure can be afforded. If, on the other hand, we are dealing with a page where text predominates, and the user's main task is reading (e.g. blog area, information portal) - it is better to choose a slightly larger font.
How to choose the size of the header?
- The H1 header should be 300% of the font size used in the body text.
For example, if your website uses an 18pt font for your body text, the optimal size for your headings is 54pt.
- The H2 header should be 200% of the body text font size.
In this case, with a base font size of 18pt, the ideal H2 heading would be 36pt.
Fonts in the mobile version
When choosing the font size, you must first of all answer the question on which devices the text will be displayed on. The same font size will look different on laptop monitors than on mobile devices. If you prefer to focus on the appearance of the website in the mobile sphere, remember these two important rules:
- on smartphone screens, a large font will not look nice, the
- headings should not take more than two lines.
Therefore, when designing a mobile website, it is worth checking how the text looks and making sure whether the font is too large.
3. Use the principle: Less is more
Ready to create your website?
Use the most convenient website builder, trusted by thousands of designers and create websites that will provide you with customers!
4. Develop the structure of the content
Distance between the lines
Is essential to maintain sufficient height line (called. Line-height), which is the space between the lines. Too short a distance will make the lines of text practically overlap. On the other hand, too high a text will be "exploded". So it's best to find a golden mean.
Length of lines and paragraphs
5. Match the colours
The colour of the font is an element of typography that is closely related to your brand's visual identity on the Internet. However, as with combining fonts, you should also be careful when choosing their colours. Here are the most critical standards for font colour:
Select a maximum of 3 colours
Take care of contrast
Only match the matching colours
Remember that there are colors that just don't go together, like red and green. Breaking color schemes in the case of fonts usually don't go together.
6. Stand out
With a hierarchy of importance in your text, you can emphasize that a word merely is more important than another. Therefore, the most important words on your website should be highlighted. They can be BIGGER, bold, italic, coloured or s e p a r a t e d by empty space.
Text elements, which you should highlight on your website:
- You can distinguish buttons CTA (Call To Action), i.e. calls to action. By giving them a different background, they will stand out from the rest of the text.
- If you want to live up to SEO, it's a good idea to bold the keywords that define your industry. Bold keywords will immediately catch your visitor's eyes. Thanks to this, your website will be remembered not only by search engines but also users.
- You can also highlight the font! If you have decided to use a popular typeface and you still want to stand out, you can give it unique features. Decorate it using bold or by adding serifs.