How To Pick the Best Fonts for Your Website?

First - time for some theory

The dictionary definition of a font is a metal cube used in printing to print the content on paper. This is in relation to printing. The typeface is a distinct appearance of letters with a characteristic style and layout, and the font - a digitally saved image of the typeface. In Polish, "font" is translated as "font", so in the article, we will use these names interchangeably to describe the digital form of the letter.

Six basic principles you need to know that will make it easier to make the right choices as a designer.

1. The font must express the essence of the brand

Did you know that pictures are worth more than a thousand words? The same is true with typography. You need to create the fonts properly in order to reflect the character of the company or brand. How is this achieved?

Analyze the style preferred by the recipients of the products and services of the company for the website you will be creating for them. By getting to know the target group, you will know whether traditional or modern fonts suit better.

Knowing the answer to these questions can make your decisions more precise:

1. Is this a technically-oriented company or maybe it offers products and services related to aesthetics (f.e: art, interior design, etc.)
2. What is the age and gender of the target group?
3. Are the services or products intended for a wider or narrowly defined audience?
4. Is this a "brand for everyone" or is the target very precise, for example: for educated women aged between 25 and 35 from urban areas?
5. What are the company's values and how do they want to convey those values?
6. Is the company a serious one or does it possess a sense of humour?

Be up to date with typography trends and analyze what other companies are doing to their advantage. Check what fonts have been used on sites that get accolades in web designing competitions. Observe good practices and try to apply them in your projects. However, what is important: do not copy solutions. If you are a business owner, you do not want to have the same solutions as your competitors, and if you are a designer - forgeries of someone's projects in your portfolio.

2. Select the font type

It is difficult to choose a font from the large numbers available, so at the beginning, you should get acquainted with the classification. You will learn in what situations it is preferable to use different types of fonts.

It is accepted that it is better to use sans serif fonts for websites, although combinations of sans serif and serif fonts are increasingly common (for more information on combining fonts, see later in this article). What is the difference between these fonts? Here's some useful information to help you make your decision.

Serif fonts:

These are fonts that have transverse or oblique dashes (so-called sheriffs) to decorate the writing. The use of serifs gives the letters a traditional feel. Such fonts are used for long paper publications (mainly in books) because the sheriffs help to follow the line of text, thus making reading more simple.

Due to the decorative nature, serif fonts also fit websites, but above all they are used as "additional" elements - for example, to write headers, quotes, subtitles, in logos, not to be used to write the main content of the page. They can be used by companies that want to emphasize their many years of experience, refer to tradition, signal certainty and stability.

Common serif fonts: Times New Roman, Georgia, Palatino, Bookman Old Style, Garamond, Courier, Lucida, Century, Arno Pro, MS Serif.

Sans serifs fonts:

Sans serif fonts lack the previously mentioned sheriffs or decorative lines. Therefore, they have a more modern and simple character. They are widely used on the internet, because, up until not too long ago, screens could not display serif fonts correctly. Sans serif is often chosen because reading such a letter on the screen does not strain your eyesight. This is because the fonts look different on the computer screen than they do in print.

In books and magazines, serif fonts predominate, however, sans serif fonts are also used in this type of publication: e.g. in headlines or titles. Sans serif fonts are often used in the branding of companies that are innovative or want to be seen as modern and dynamic. They show availability and simplicity, they are also a good choice if the company addresses its services to a younger generation.

Popular sans serif fonts:  Arial, Open Sans, Montserrat, Helvetica, Futura, Verdana, Trebuchet MS, Univers. 

Script fonts:

These are handwriting fonts. They can be elegant and formal, as well as informal and fun. Among them are very decorative and quite simple fonts. The advantage of these fonts is their high expressiveness and emotional load that they carry. They attract attention and allow you to communicate serious or humorous content (depending on the type of font). Comic Sans is the best known of this font group, which is used in humorous publications. Elegant Easter egg fonts are perfect for wedding invitations and greeting cards. They work on websites when we write small elements of the text - e.g. headlines or quotes.

While using these fonts, their readability should be the main priority - the more decorative and "complex" the font - the greater the chance that the user will have to focus their attention to "decipher" the inscription.

Popular egg fonts: Great Vibes, Lobster, Grang Hotel, Sofia, Arizonia, Black Jack, Cookie, Germanica, Miama, Pacifico, Tangerine.

Decorative and display fonts:

This is a large group of very diverse fonts, which can be described as having a wide variety of decoration. Their form can be associated with a specific emotion (it is with the help of such a font is sometimes saved the title of horror) or refer to the form of a particular era, place or object. Decorative fonts often refer to cultural phenomena, e.g. graffiti and sometimes take on the form of pictures.

Decorative and display fonts are expressive and stand out, but you have to be careful with their use because they can easily become out of fashion - they often reflect the design trends of the contemporary age. The choice of an appropriate decorative font on a website may also be a problem - it should match the character of the brand/company, and at the same time be readable, so it should be used with caution and mainly for writing small elements - e.g. headers. If you choose the right font, however, your website will definitely stand out.

Distinguishing between traditional fonts from the modern ones

Earlier, it was said that serif fonts are more "conservative" than sans serifs. However, serif fonts can be both modern and traditional.

Slab serif fonts are such types - a variant of serif fonts that depart from the classic features of these fonts. They have a decisively bold character because their serifs are enlarged, and the letters are less thin. Such fonts were created to quickly attract the reader's attention - so that the eyes would stop, e.g. on the headline. Known slab serifs fonts include Courier, Memphis and Rockwell.

To say whether a given font is modern or traditional one has to look at its features.

Features of traditional fonts:

In Old Style typefaces, the contrast between the thinnest and the thickest lines that build letters is not very high. If you guide through the thinnest points of the letters, you will see that they are diagonal lines, so the letters look sloped. In old fonts, the serifs are also diagonal. Such lettering has been known since the 15th century, and the most popular fonts of this type are Garamond, Bembo, Goudy, Palatino and Jenson.

Features of modern fonts:

In modern fonts (Modern typefaces) the contrast between the thickest and thinnest point of the letter is very large. They are less readable than Old Style typefaces, it is recommended to use them in headers. Such fonts include, among others Bodoni, Latin Modern Roman, Edition Regular or Rundfunk .

Between these categories, there are also fonts that show some features from both categories (Transitional typefaces). Fonts such as Times New Roman, Georgia and Baskerville fall into this category.

3. Select up to 3 fonts

Tools that help you choose fonts

If you are looking for fonts that will be adequate for your website, visit Woodmark.it, type in a word/sentence in the search box and see what it looks like using the given fonts. It's best to enter a piece of text that you really want to use on the website. This way it will be easier for you to compare differences in typography and conclude which fonts the text look the best.

Also, do a size test: check how the sentence in the given font looks in different sizes. Some of them can be highly decorative and contain many details - then they will work as headers, but probably not as body text. Make sure that sentences in the font size you want to use on the page look properly and are easily read.

Did you like the font found on some website and would like to use the same font in your website design? Install the FontFace Ninja Chrome plugin and use it to check the name of each font used on a given website. Just click on the icon of the installed plug-in and select the font whose name you want to know with the mouse cursor.

Choose to use no more than three fonts

Have you found a lot of fonts that you liked and deciding which one to use is difficult? Remember that you can't use too many of them. 2-3 fonts on a website are the optimal number. The use of a large number of fonts will make the page chaotic, makes reading the text difficult, and as such, reaching potential customers is also becoming a difficulty. Each of the selected fonts will have a different role. In this way, we can distinguish primary, secondary and accent fonts.

Basic font 

the one most visible on your site because of its application into slogans, titles and headers. Remember t is your brand that should be identified with it. It is worth to match the font present in your logo (if the logo contains text).

Secondary font

the one that fills in blocks of text: paragraphs, product descriptions, and blog entries making it the most-used. While the basic font may be original, the main purpose of this font is readability - it is very important that customers can read the content easily. The goal of the secondary font is also to extract the values of the primary font (for more information on combining fonts, see the next section).

Accent font

the one that you will use for specific purposes. When it comes to websites, this mainly applies to issues such as Call To Action buttons that are to attract attention and generate clicks. It can also be used to pinpoint to the most important parts of the text or display quotes. This type of font should be different from the rest to effectively attract the attention of the recipients.

Elements that you should plan out when making your website, f.e:

● Header 1: Basic font      

● Header 2: Basic font      

● Header 3: Secondary font      

● Text in the body: Secondary font      

● Quotes: Accent font  

When you choose specific fonts, check if their layout fits the rest of the text.

4. Skillfully combine fonts

Now that you know the basic font types and how to prioritize them on your website, it's time for you to learn how you can master the art of combining them. There are rules that you should follow to correctly select fonts.

By learning these rules, you'll learn which fonts match.

• Serifs with sans serif

Bezpiecznym po??czeniem s? fonty szeryfiowe z bezszeryfowymi - zw?aszcza, gdy stosujemy je w ró?nych rozmiarach. Takie czcionki s? na tyle inne, ?e w wielu przypadkach prezentuj? si? atrakcyjnie.

• Contrast size

Main headings should be a lot bigger than the "regular" text. If you write "plain" text in 18-point font, the headline should be significantly larger (like size 36), and not a smaller one like f.e, 24.

• Contrast thickness

The headline should be in a thicker font, followed by a thinner-font text, making the text more readable.

• Fonts from the same font family

The thickness contrast mentioned above is easily achieved using fonts from the same family, e.g. Open Sans and Open Sans Semibold. There are many fonts that have many variants - you may want to consider combining two of them on your site. For example, on our BOWWE page creator page, you will find different versions of the Roboto font: Roboto font, Roboto Condensed and Roboto Slab.

• Avoiding fonts that are too similar 

This principle also applies to contrast. If the contrast between the fonts is too low (the fonts are too similar to each other), then their combination will not appear good - even if one of the fonts is a serif and the other - sans serif.

• Similar words

There are fonts that are carriers of emotions, e.g. meant to be eloquent, serious, flashy or humoristic. Combining fonts from these categories will make the whole text look simply chaotic and without order.

• Expressive fonts used with bland, neutral ones

If you use a script font (similar to a handwritten font) in the header, use a neutral font to save the content in the body. The use of two expressive fonts will be seen as a distraction and a hindrance to easy reading.

• Avoid conflicting proportions

For example, if two fonts have different proportions ( one will have very enlarged letters and the other one will be condensed), then they may look poorly when combined. By checking if the height of the lower case matches, you can determine in making the right combination.

Smart and effective methods to combine fonts

The above font selection guidelines may be helpful, but it is difficult to apply dry rules. Below you will find links to helpful tools that will help you to combine fonts correctly.

Font pair

The site presents pairs of fonts that match each other. You can immediately download prepared font pairs from the site, and all fonts are available in Google Fonts.

Canva Font Combinations

You choose the font name from the list, and the search engine suggests a different font selected for it and presents examples of what a good font combination will look like.

Typ.io

The site shows various font combinations with examples of their use Particular attention should be paid to font sets used on websites.

5. Focus on readability

If you think that finding a font that is the closest to your handwriting, we smartly advise you not to use that font. Decorative fonts add a distinct style, but are difficult to read, and you should want users to spend as much time as possible on your website and read the content you post.

While large headers or Call-To-Action can be written in a more complex graphic font, in the case of the body text, it is much better to use basic, easily readable fonts.

You should ask yourself:

Which font on my site will make reading easiest?

The readability of the text is influenced, among other factors, by:

• Interior lights - most fonts are well designed in this respect, but it's worth choosing the universal font instead of the narrow one.      
• Leading - a font that is too small with too narrow spacing will make reading difficult. Preferably the interline spacing should be min. 120% of letter size (150% is often considered optimal)      
• Paragraph spacing - for even greater readability, use slightly larger paragraph spacing.      
• Text alignment - too much text in one line and too small margins can effectively discourage reading. The golden rule says 50-60 characters in the verse as an ideal.      
• Contrast - the font should be of such a color that it stands out from the background on which it is presented. Both too low and too high contrast will make reading difficult.      
• Size - the font size indicates the importance of the element and allows you to divide the text into readable sections. Optimal font sizes for individual elements:      
• Titles: 30 - 70,      
• Headings: 22 - 30,      
• Plain text: 16-20.      
• Italics, bold, underline - it's best to use them scarcely. Underlining is rarely used on websites. Bold font emphasizes the importance of elements, increasing their visibility. Italics are great for writing foreign language expressions and quotes.      

If the above-mentioned items are incorrectly selected, then reading your site's content will bore the reader and make them leave it very quickly, without even getting acquainted with the offer. It is worth spending time working on the readability of the text.

6. Remember these things

They say that the devil hides in the details. When it comes to fonts, this is certainly the case, so make sure they look good on the page. Here are some helpful tips.

Diacritic marks

Only choose fonts that have all the diacritical marks you need. If some of the characters in your language are missing, try to find another similar font that will support them. Also check if quotation marks, commas, exclamation marks or queries look good. The problem with the lack of needed characters can occur in both free and paid fonts.

Language versions

If you plan to publish your website in several language versions, be sure to check if the texts written in these languages look well saved using the font of your choice.

Font License

Be sure to verify that you have the right to use the font on the website and whether it can be used for commercial purposes and modified. Always read the license text attached to the font.

Page loading time

Add only the fonts you need on the website and only in the language versions that your site supports. Otherwise, you might unnecessarily increase the time it takes the website to load, and it affects how well the page will appear in search results and whether users become familiar with its content.

Summary

1. The font is intended to express your brand's personality and match the style of your audience.
2. Learn the font classification and decide if a modern or traditional font will best suit your site.
3. Use up to 3 different types of fonts on one website. A larger number will create chaos.
4. Skillfully choose the fonts on your website. It is safest to decide on fonts from one family or use tools suggesting font selection.
5. Remember that regardless of whether you choose more or less bold fonts, the most important and the end goal is always READING.
6. Make sure you have the right to use the font on your site and that it looks good in all the languages in which you plan to use it.

Ready to choose the best font for your website?

Visit bowwe.com and create your website.

Grow your business with BOWWE!