How to Choose a Typeface to Match Your Website Design

Fontastic!

In today’s digital context, fonts and typefaces are terms which mean the same thing and are used interchangeably. Now that we’ve established the lingo, let’s take a closer look at this important visual element.

There are thousands of different fonts and many different foundries that come up with them. Fonts are a key accessory when it comes to designing a web site. They say so much about brand personality and intended audiences, which is why experienced designers make very deliberate decisions when selecting them. It’s an art and a science.

Fonts need to be suitable for particular offerings. For example, using fun, casual typefaces on a legal website might fail to inspire confidence in a service people turn to in serious moments.

Ask yourself if the tone of the lettering corresponds with the tone of the words. Consider the demographics of your ideal target market and what they would find appealing. Look for fonts that align with both your message and user profiles.

The font also has to have a fast load time or it affects user experience and defeats its purpose. This is often overlooked, but there are tools available for testing typeface load speeds so there’s no excuse for not doing so.

Font Categories

Body Typefaces

Web design fonts for using en masse in content heavy websites should be easy on the eye and easy to skim. These types of fonts are referred to as body typefaces. They’re the equivalent of a neutral colour – something you can paint all over your walls without giving people a headache, or making a space look cramped.

Body typefaces go somewhat unnoticed. But you can do a lot with them when they come in different weights or degrees of boldness, and when they can be condensed, extended or used in small caps. This capacity for variation allows some of your content to be highlighted while maintaining an overall consistency and professionalism.

Display Typefaces

You then have display or decorative typefaces which are a novelty and should be kept to a minimum for dramatic or thematic effect. For example, a font incorporating skulls for Halloween. Display fonts also extend to fonts for headlines which are bold, usually all-caps and used to attract attention.

Some script fonts with connecting letters such as cursive could be regarded as decorative. They look like handwriting and can make an impact where offerings want to portray a more vintage, elegant or artisanal aesthetic.

Serif and Sans-Serif

Serif fonts are the ones that look like they’re attached to bases or have extra strokes, as in the image of the word ‘Friends’ below. These lines at the ends of letters are referred to as ‘feet’. Serif fonts look traditional and can be seen as highbrow, especially because they’re frequently used in print books. However, serif fonts tend to be thin and small which sometimes doesn’t translate well to screens. The most famous serif font is Times New Roman, but other popular and flexible free serif fonts include Georgia, Cambria and Merriweather.

Sans-Serif means without serif. That’s right, no feet here. Consequently, sans-serif fonts look modern and progressive. See the word ‘sacred’ below. They fare better on digital interfaces and are usually the go-to choice online. Arial is a well-known example, as is Helvetica. For other free and versatile options, consider Franklin Gothic and Roboto.

X-heighting!

There are a few things you can do to optimize for readability and increase the time users spend on pages. The mean line above lowercase letters is called x-height. Regardless of the font size, copy is usually more readable when the x-height is closer to the capital letters. Having said that, you need to be able to tell the difference between uppercase and lowercase letters.

Other factors that have a bearing on readability include:

• Text contrasting well with the background. In terms of colour, the safe bets are black or dark blue on light colours, and white on dark colours. It’s a simple concept but one that can alter the user interface for better or worse.
• Hyphenation. Avoid it as far as possible.
• Spacing. The more space you have to work with, the better. White space improves contrast and guides the eye. Generally, your line height should be 150% of your font size – this strikes a balance between too little space between lines and too much space. Look up kerning, tracking and leading for more insight into the technicalities of spacing.
• Adaptability. Remember that the font needs to look good on mobile devices too, so be sure to have a look at smaller sizes to test their appropriateness for smaller screens. Also, check what the font looks like when bold and/or italicised.
• Alignment. Whether you go left, right, central or justified, always align text so that it’s more pleasing to the eye.

Mixing and Matching

Some popular fonts are thought of as overused and boring, so it’s worth taking your time to find less conventional but equally minimalist typefaces.

Fonts need to match other design elements otherwise the overall appearance of a site will confuse visitors and lead to distrust. If you decide to go with more than one font, ensure that they are discernibly different while being in harmony with each other. Play around until you get a good fit. And if your design instincts aren’t fully honed yet, stick to no more than 2 font colours and a maximum of three typefaces. One for page titles, one for subtitles and one for body copy.

It’s worth looking at fonts from the same typeface designer. ‘Super-families’ are font groups including serif and san-serif fonts which are complementary, so keep an eye out for those.

Familiarise yourself with font licensing limits before committing to buying one. They can be expensive so avail yourself of free services such as Google Fonts, particularly if you won’t be using the font in print assets. Google fonts also happen to be web safe and adapt perfectly to every browser.