Choosing the right typeface is easily one of the most important aspects of your site.

Nothing is more frustrating than landing on a page with content that is too small or that has a barely readable font. Even with well-designed web pages, visitors need to be able to actually read your content. Or they will not hesitate to exit your page back to the search results.

Just imagine landing on a site with this kind of typeface:

The font used is not exactly terrible, but it's not a great choice either especially when you want to convey a professional image with your website. Choosing a typeface involves more than simply selecting from a dropdown list. There are other factors to take into consideration as well.

Here we look at how to choose the right typeface for your website.

It's easy to take typeface for granted as you see them everyone from local advertisements to newspapers and more. But a lot of thought goes into choosing the right one.

Here are some basics to help you get started:

• Serif vs sans serif: One of the first decisions to make is whether to use serif or sans serif. Both have subtle differences depending on their usage in print and digital media. When designing for for the web, stick with a sans serif typeface. The following from this infographic illustrates the main differences:

• Size: In addition to choosing an appropriate font, also consider its size. Headlines typically use larger fonts as they are the first thing that visitors see while regular text generally have a 12pt size.
• Kerning and leading: Spacing is another important aspect of display typefaces. Kerning refers to the spacing between letters (e.g. AV) for a more aesthetic look. Leading refers to the space between lines in a paragraph. Both are easy to overlook but can drastically affect the readability of your text.
• Contrast: Finally, consider the colour of your text and background. Avoid using any colours that contrast too sharply. Black on white is perhaps the most popular combination. And for good reason too as other colour combinations are generally not recommended.

What you are ultimately aiming for is readability.

Online users tend to scan web pages rather than read each individual word. So the typeface you choose for your website needs to take that into consideration. Understanding the basics of typeface as described here will go a long way towards choosing the right one.

The web is constantly changing, which can be both good and bad. Good because new standards are being put in place that creates a better browsing experience for everyone. But bad because it can also create typeface compatibility issues.

For this reason, using a unique typeface is generally not recommended as it may not be compatible with modern interfaces on desktop and mobile devices.

One solution of course is to stick with a commonly used font (e.g. Arial, Helvetica, etc.). Another option is to use the font-family property in your CSS. This way you can choose the font you want and select a number of other fonts as a “fallback” in case the browser does not support the initial font you choose.

Alternatively, the @font-face rule is widely supported across all major browsers including Safari, Chrome, Firefox, and Opera.

Font pairing is a great way to add a nice touch to your content.

One example is using a different typeface for your headlines to differentiate them from the rest of the content. But font pairing is something that not many people (even web designers) get right. Fortunately, there is no need to reinvent the wheel here as there are plenty of resources available online to help you find the right typeface combination.

Font Pair is an excellent resource for font pairing suggestions. It gives examples of typefaces that pair well with each other and provides an example to show what it looks like:

In addition, you can also use Google Fonts for font combination suggestions. Using these resources takes a lot of the guesswork out of choosing the right typefaces that go well with each other. But remember to select typefaces that match with the overall tone of your site (e.g. professional, casual, lighthearted, etc.). And also avoid choosing anything that is not clearly legible.

Three seconds.

That's about the average number of seconds that users will wait before bouncing out to another site. In today's incredibly fast paced digital world, online users have little patience for slow loading sites. Your site might have a beautiful typeface, but it needs to load quickly to be effective.

Before deciding on a typeface, conduct a speed test first. Refrain from using too many typefaces as it could have a negative impact on loading times. Every little bit counts as even a one second improvement can ultimately translate to more sales to your business.

Conclusion

Display typeface is an important aspect of web design.

Your content needs to be easily readable to have any impact. A certain typeface may look fancy but it could actually hurt conversions if visitors are unable to make sense of it. Put some thought into choosing the right typeface for your website by understanding the basics and taking compatibility into consideration.