A well-thought-out and well-chosen typography is key to achieving an aesthetically pleasing and, most importantly - easily readable website. But do you know how to make the text on the website clear and consistent with your brand's identity? 

Don't worry. I have collected the 8 most crucial typography rules that will make the entire process of creating the perfect typography for your website easy and effective. Make sure to follow all the rules, and you will be rewarded with a transparent typography system that will make your project look professional and improve its UX.

The most important thing is that your typography should reflect the true nature of your industry. Therefore, choosing the right website typography 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 brand. Pay attention to what the font communicates and whether it matches your brand's style.

Pay attention to what the font communicates and whether it matches your brand's style. If you run a children's store, you will not use simple and elegant business fonts and vice versa. Always match fonts to your brand communication to be consistent with it. 

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 special unit typographers use to describe fonts is "pt" or "point". 

The preferred range of standard font sizes for 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: 

a) makes the text legible - font size of 12pt and below can significantly hinder readability;

b) 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 18pt size; 

c) reflects the website's purpose - if the page is not dominated by text but by design, you can use a smaller font. Also in the case of interactive pages that encourage the user to click at every step, this solution can be afforded. If, on the other hand, you are dealing with a website where text dominates, and the user's main task is reading (e.g. blog area, information portal) - it is better to choose a slightly larger font.

Have you decided on the font size of your body text but 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:

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

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

⚡ BOWWE Growth Hack:

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

When choosing the font size, you must answer the question on which devices the text will be displayed. The font size will look different on laptop monitors than on mobile devices. If you prefer to focus on the appearance of the website in mobile devices, remember these two important rules:

a) On smartphone screens, a large font will not look nice, 

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

⚡ BOWWE Growth Hack:

When creating a website in the BOWWE builder, it is automatically responsive. This means that, first of all, you don’t need to create a separate website tailored to mobile devices. Secondly, editing the website can switch between desktop and mobile preview in a few seconds. Thanks to this, you can very easily control how the font of your choice behaves on mobile devices.

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 project's aesthetics. The safest solution is to choose two font types: headings and plain text. 

However, you also need to keep in mind the contrast. If you use two fonts that are too similar, they will not wholly draw users' attention. Try not to choose two Sans Serif fonts but instead choose a combination of Serif and Sans Serif, making your content look even more attractive.

Also, keep in mind that not all fonts can work together. There are pairs of fonts that like each other better, and some are incompatible. It's worth getting acquainted with them before making your final choice! 

⚡ BOWWE Growth Hack:

If you want to be 100% sure that you choose the best fonts pairing you can always take inspiration from fontpair.co. 

An equally important aspect of typography as choosing the font is the layout and 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 dramatically impacts users' perception of your website. What are typography rules for better readability?

Maintaining sufficient line height (or leading) and the space between the lines is essential. Too short a distance will make the lines of text practically overlap. On the other hand, too high a reader will be "exploded". So it's best to find a golden ratio. 

It has been known for a long time that short text fragments are much better read. Too long lines or paragraphs can be tiring for the eyes and disturb the reading rhythm. The line length should be around 50-75 characters to not exhaust the user. The same applies to paragraphs - they make longer texts easier to read. 

In typography, alignment is the positioning of the text relative to a margin, the edge of a page, or another reference point. 

⚡ BOWWE Growth Hack:

Although it seems convenient to align all the edges of the text, we don’t recommend that you ultimately justify the content on the page. Justified readers on the Internet simply don’t look good and, contrary to appearances, interfere with readability. When aligned to the left edge, you can move words that don’t fit to the following line while maintaining the same spacing. This is more natural to the eye and gives the correct reading rhythm.

The font color is an element of typography closely related to your brand's visual identity on the Internet. However, as with combining fonts, you should also be careful when choosing their colors. Here are the most essential standards for font color:

You already know that it's better to follow minimalism in typography. The same goes for the colors. Try not to use more than three colors in the text because more can cause chaos on the website and make it look infantile.

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

Remember that some colors, such as red and green, don't go together. Breaking color schemes in the case of fonts usually doesn't work. 

⚡ BOWWE Growth Hack:

​​​​To select the font color more quickly and efficiently, you can use Color Tool from material.io. Thanks to this, you will be able to see if the selected font color will fit well with, for example, the background color on your website. 

With a hierarchy of importance in your text, you can emphasize that one word is more important than another. Therefore, the most critical words on your website should be highlighted. You can make them bigger, color or use bold or italics.

⚡ BOWWE Growth Hack:

Highlighting more essential words or text fragments is very important in the case of blog materials. Such a procedure makes them more readable and easier to remember. It is also worth using bolding them for keywords necessary for the high positioning of the website in search results.

Font scaling is the process of increasing or decreasing the size of text on a website. 

You might want to create a font scale for a few reasons. One reason is to ensure that all of your page's text is the same size. This can be important for usability, mainly if you use text to convey important information to your visitors. It can also make your page look more uniform and professional.

Another reason to use a font scale is to make the text easier to read. You may find that some fonts are too small or too large when you view them at their default size. By scaling the text, you can make it more comfortable to read.

There are a few things to remember when creating a font scale.

a) Make sure that all of the text on your page is the same size. This includes both the body text and any headings or other text elements.

b) Choose a font size that is comfortable and easy to read. You may need to experiment with different font sizes to find the one that is right for you. Some fonts may look good at a large size but become difficult to read when they are scaled down.

⚡ BOWWE Growth Hack:

There are a lot of free online tools with which you can easily create a font scale. One of them is type-scale.com.

Find the best website designs with examples of exciting typography. On websites like Dribbble you can find tons of inspiration. You can also use platforms like Pinterest that allow you to create so-called Boards where you can collect anything that inspire you and share it with your friends or coworkers. 

It is also worth doing research among websites similar to yours or your competitors. Then you will learn how others implement the best typography principles and how you can do this too!

Remember that typography is key to the success of any successful website design. By following typography principles, you can be sure that the text will not only be legible but, above all, create the right mood and faithfully reflect your brand's style. 

By following the best practices of good typography found in this article, you can quickly improve the appearance of your website and, most importantly, the user experience.

Read also: