XYZ – A guide to choosing your website fonts

Font Families and types

When you hear “web design”, what are you thinking of? The layout of a website? Different styles, colours, and backgrounds? Web design is also about fonts and how these fit together to make the site look harmonious. Let’s talk letters and glyphs.

Types

Fonts are distinguished into different types, typefaces, and families. There are three general types, classified on how they are used.

Web fonts

Are the fonts you see in web applications and websites. Google Fonts and Adobe Fonts (formerly known as Typekit) provide a wide variety of selections. For more beautiful and fancy fonts try fontgenerator.io.

System fonts

You tend to come across on PC programs and applications on your mobile device.

Variable fonts

Are sets of fonts containing different weights (thickness) and widths (distance between letters). These are used nowadays as they automatically adapt their properties.

Example of how a variable font can adapt to a given space

Typefaces and font families

A typeface describes how the letters are designed. This includes variations in weight (thin, bold), slope (italic) and width (condensed).

A font family, like Arial, can have several typefaces that have a new font name, for example, Arial Black and Arial Narrow.

Font families are highlighted in blue and their typefaces (white background), examples are given for sans serif and serif fonts

Generally, one can classify font families into typographies: serif, sans serif, display, and script. Subordinated ones exist. Amongst them occur slab serif, modern, monospaced or non-proportional, just to mention a few.

Serif, like Times New Roman, is the classic that originates from newspaper prints.

A serif is a little stroke attached to a letter that follows parallel to the line of text. Serif fonts are thus easier for the eye to read.

Sans serif

From this family, the most known to you is probably Arial and Calibri. They are clear fonts with no embellishing decor or serifs.

Script

Looks like handwriting. Fonts are playful, like the Snell Roundhand or Edwardian font.

Display

Fonts, such as Cooper Black or Fat Face, are bold and unconventional. You will for example see upper and lower-case letters mixed, and dimensions of letters (height and width) reversed.

Evergreens and trends

What in your mind, is a good font? Remember when you scribbled down some notes on a piece of paper and couldn’t read your handwriting later? Obviously, no one wants to decipher a font.

Hence, fonts must be:

• scalable to all dimensions of media, on print and digital without losing quality
• readable in terms of size and script design
• compatible with other font families

A website should show a maximum of three different fonts that go well together and adapt to the needed line length. They do not have to originate from the same font family, but must be clearly readable on all screens and look good with any colours. Their typefaces must be equally well readable.

Versatile classics that never will be boring, are fonts such as:

• Arvo
• Roboto
• Lato
• Merriweather
• Montserrat
• Open Sans
• Times New Roman
• Playfair Display

Fonts in website builders

What fonts is your website editor offering?

Templates a website builder provides you to create your blog, online store, or personal website are designed in such a way that fonts match the topic of the template. Conveniently, you have a distinct selection of fonts to choose from.

In the Webnode editor, you will find the main font types listed in the claims of the navigation line

By the way, Webnodes top used fonts are:

• Montserrat, Roboto, or Open Sans of the sans serif family
• Playfair Display, Pt Serif, or Merriweather for the one with serifs

To change all fonts for your entire website at once is often possible in the design settings of the editor. Here you can change the combination of fonts and font families.

Examples of different combined fonts in the Webnode editor

Font-combinations are automatically “best paired”. They complement each other in such a way that they match the image background and the layout of the site. Thus, they are the cherry on the top of web design.

Trends

The world wide web started with sans serif fonts. Simply because screens back then did not have a sharp resolution to bring out handwritten and experimental font types. Now, creativity is all around us. There is no “wrong” font.

Web typography experiences a renaissance. Google fonts is a source for designers to develop typefaces further.

In 2020, sans serif fonts dominated. Expressive character letterings like Goldplay and Versus were rising. This year, the trend goes towards solidity and clearness. Yet, sans serifs are trending in the digital world. Everybody’s typos are made in geometrically clear sans serifs because they are:

• Bold
• Sharp
• Utilitarian
• Solid
• Clean
• Using negative space

Choosing a font

Enough facts. It is your turn. How do you decide what is the best font to tell your story?

Meaning of fonts

Font families and their typical characters

Fonts convey a mood. They have character. Handwritten-like script fonts flow with elegance and passion. Due to their extended strokes, rounded lines, and bow-like embellishments, they are more decorative. If Cinderella could dance a font, it would be Edwardian script. If a French Michelin-rated restaurant brings out a new signature dish, it should present itself in script fonts.

Display fonts are the chameleon, changing from amusing to unique or playful. The bouncy font on the Jelly Belly bean box knows how to lure you to the right corner in the candy shop.

Modern font types are stylish and bold. You will recognize the Futura font on the high-end fashion brand Dolce & Gabanna as well as your PayPal account.

Because of the old heritage of newspaper prints, serif fonts carry tradition, trust, and respect. The famous fashion magazine Vogue uses Bodoni, a serif font. Apple originally quoted “Think different” in the same font family.

On the contrary, the sans serif font Trade Gothic is used by Nike or Helvetica for The North Face. A sans serif font conveys stability, strength, clarity, and cleanliness, which is often embraced by sports companies.

Are you starting to get a feel for the fine nuances in font types? Which font family will present you best? A good way to start is to clarify what your mission is and what your business represents. If you have a personal site or a blog, lean towards a font that represents your character traits best.

The right choice for your brand

Mostly 2-3 different fonts guide your visitor through the sections of your pages. With them, they will be like chapters in a book. It will be clearer when a new section starts with a heading in a bolder or more decorative font and ends with a normal-sized text.

Different fonts also let you highlight different content or change the tone of voice, for example, if you like to quote someone or draw attention to new offers. Fonts differentiate the product lines of your e-shop better for your customers.

Choose the right font for you and your brand, by answering the following questions:

• Who is my audience and what’s important to them?
• Is there a font that relates to my customers’ experience?
• Will the font work with the context it will be seen in?
• Which font captures my brand’s personality?
• Will my colours work with the selected font?

For example, if your website is supplementing your YouTube channel and you have a lot of thumbnails on a page leading to your videos, or equally have many images if you are an artist. Your audience is looking at your content rather than reading through it. Consequently, your font should not distract from the visual content.

If you are a lawyer or consultant, you may like to reflect trust and liability. An emotional script font would look out of place here.

A font must also be compatible across all browsers. Examine your font choice and its accessibility in browsers used on several devices before you make your final decision. Accessible fonts are critical for people with certain vision impairments (e.g., low-vision), so it’s imperative you select them.

Biggest faux pas

Many font families of different characters and typefaces mixed can ruin the background and context

Finally, knowing what to avoid when choosing your font is sometimes easier to remember than what to do. Here are the most important takeaways:

Respect the family!

Using more than 3 different font families. Stick to one but vary its typeface. A font family such as Helvetica, Verdana, Open Sans has already enough variations in typefaces to distinguish passages in your text.

Not all mixes match

You can mix. Be careful experimenting with opposing characters, such as Times New Roman and Edwardian Script. They will not blend.

Enhancing

Limit embellished script fonts or complex display fonts to highlight headings. Do not use them for text passages in a paragraph.

Space

Do not be stingy with the sizes. A good accessible font size all people can read is 16pt. Go below that and you’ll exclude people with lesser eyesight to read your story.

Long lines

Avoid long sentences or fonts that have a lot of white space between the letters. Normally, in templates of website builders, the layout is coded in such a way that line breaks are introduced before they become necessary.

Raging arrangements

Last but not least, even if you have the best font for your website, make sure all text is aligned properly. Properly means sticking to either centred or right-aligned text on one page. If you have text boxes with lines of text starting at the top-centre and bottom right, the reader will have trouble following the text of your page. Arrange your text. Use white spaces to give your reader a break.

Interested in web design? The Web Design article provide you with insights on how to make your website look awesome.