.certificate-info:before { content: "\E086"; font-family: Glyphicons Halflings; }

BOWWE blog

Practical advice on website creation, online marketing and business development

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).

When designing, choose a font that will appeal to your audience. With what do you associate elegant handwriting, and the clear, massive font? Would you use them to convey the same content? If you run a children's store, you will not use simple and elegant business fonts and vice versa. If you want to find out what to look for when choosing the best font for your website, check out our article about fonts. 

Where to find free fonts?

If you do not have time to develop a unique font, you can opt for proven, most popular fonts. You can use paid fonts offered, for example, by Adobe, or from stock websites with free fonts, e.g. from the extensive database Google Fonts.

How to install fonts?

After downloading the font file, you need to install it. You can do this in two ways:
  • 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

The font size on the page matters! If you choose a font that is not too small or too large, you will make reading much easier for your users. A particular unit used by typographers to describe fonts is pt or point, that is, points. The preferred range of font sizes for use on websites is between 14-25pt. Larger fonts can be reserved for headings (20pt and above), and for plain text, the best range is 14-18pt. Regardless of the font size you choose, make sure that the 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?

Have you decided on the font size of your body text? Goog. But you don't know how to keep the size of the headings in proportion to the rest of the content? There are several best practices for this:
  • 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. 

Our tip: For successive headings, you can gradually decrease the percentage, e.g. for the H4 header you can multiply the basic font size by 130-150%. 

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

When designing websites, it is best to follow the principle of minimalism. Using more than two types of fonts in one project may disturb the aesthetics of the project. The safest solution is to choose two types of fonts: for headings and plain text. Also, keep in mind that not all fonts can work together. There are pairs of fonts that like each other better and some that are incompatible with each other. It's worth getting acquainted with them before making your final choice! We recommend that you use the best Font Combination Finder from Canva.

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!

Start now!

4. Develop the structure of the content

An equally important aspect of typography as choosing the font is the layout of the structure of all content on the page. It doesn't matter if it is a short description of your business or an extensive article in the blog section - the structure of each type of content has a massive impact on the perception of your website by users. Key elements of that care should be taken to maintain the consistency of the structure of the text, the

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

It has been known for a long time that short fragments of text are much better read. Too long lines or paragraphs can be tiring for the eyes and disturb the rhythm of reading. In order not to bore the user, the line length should be around 50-75 characters. The same applies to paragraphs that should not be forgotten. Paragraphs make longer texts will be more comfortable to read. 

Alignments

Use the text-align property to You can set how the text is aligned and snap the text to the right or left. You can also justify it to both edges or centre it. 
Our tip: Although it seems convenient to align all the edges of the text, we do not recommend that you ultimately justify the content on the page. Justified texts on the Internet do not look good and, contrary to appearances, interfere with readability. When aligned to the left edge, you have the option of moving words that do not fit to the next line, while still maintaining the same spacing. This way is more natural to the eye and gives the correct reading rhythm. 

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

You already know that it's better to follow minimalism in typography. The same goes for the colours. Using more than three colours in the text can already cause chaos on the website and make it look not very mature.

Take care of contrast 

The text should have adequate contrast to the background. Of course, the safest combination is black font colour on a white or light grey background. It is the most natural colour combination and does not tire your eyes while reading. 

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, bolditalic, 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. 

7. Create your font scale

Experiment with the font size, scale and different webphones! You can use the free sites. Thanks to this, you can quickly develop your own font system for the website, even if you are not a web designer. Try Type Scale - a site that offers a preview and selection of the appropriate font scale for your project or material.io - where you also have the opportunity to develop a font system for your site interactively. Here you can build a typographic visualization of your website design without any coding skills.
Find the best website designs with examples of exciting typography. Sites like Dribbble can find tons of graphic inspiration. Thanks to this, you will find out what is hot in the world of design: geometric fonts or maybe a simple font. Worth mentioning among the current trends Flat design. It's a design trend based on a simple design where typography plays an important role. The selection of an appropriately minimalist font is key here. 

Don't Ignore Typography On Your Website

In this article, we've outlined the most important aspects to pay attention to when trying to improve the typography on your website. Now you know that the wrong choice of fonts, wrong width of the text or too small spacing can distort the reception of text on the page, and thus discourage users from visiting it! Remember that typography is key to the success of any website design. By following its elementary rules, you can be sure that the text will not only be legible but above all will create the right mood and faithfully reflect the style of your website.
Share:

Ready to build your own website?

Don't worry, we'll help you! We can also do it for you!

Start right now
banner image

Create your own professional website

Start right now
1