Web Typography: How to Find the Perfect Font for Your Website

7 Min.
perfect-web-typography

The right font doesn't just make your website more visually appealing. Fonts strongly influence whether sections of text on your site are actually read or not. In this article, I'll show you how to find the perfect font for your website!

Good typography takes years of studying fonts and design in great detail. But there's no need to panic or give up, I have a few basic tips up my sleeve to help you find the right font for your web project.

Best practices, tips and guidelines in web design

Web design is more than aesthetics. At least as important are: a good UX, accessibility and SEO. In this article I'll show you the best practices for successful websites and satisfied users.

The very first website

What happens when you load a website without CSS? In the past, websites were rendered in the fonts that were built into the operating system. These are still loaded today if the chosen font can't be accessed for whatever reason. The very first website is still online and looks the same now as when it went live in December 1990:

Web Typography: How to Find the Perfect Font for Your Website
The very first website

Without CSS, how a website is displayed in your browser doesn't depend on the website itself but on the operating system you're using. And whether you've made changes to the default settings.

For Windows users, serif fonts are displayed in Times New Roman by default. On Mac OS X, the default font is Times or Times Roman. Arial is used by Windows as the sans serif font. Mac OS X, on the other hand, uses Helvetica as the default sans serif font.

Zach Leatherman has developed a project in which he has tested various operating systems and the corresponding fonts. The Font Family tool gives you an interesting insight into fallback fonts - and what they look like in the end. 

Georgia and Verdana

In the mid-1990s, Georgia and Verdana joined the existing standard fonts. These fonts were designed by Matthew Carter especially for the web. Needing to build good websites with a meager selection of five fonts gave rise to what we would today consider a peculiar practice. Fonts that didn't usually exist on the web were incorporated as image files.

The disadvantages of this are obvious:

  • Meticulously detailed work is required to display the fonts on different devices.
  • The words can't be found or translated using the search function.
  • Every change in the texts represents a huge amount of extra effort.

Designing for the unknown

Fortunately, technology has developed much further since then. Nevertheless, you still need some basic knowledge of the technical workings of fonts. It's important to understand, for example, what happens on your website when the desired font isn't available. There are plenty of reasons why a font may not be available, e.g. a bad internet connection can result in a delay loading your CSS file.

On the web, unlike in graphic design, it's better to have a bad (inappropriate) font than no font at all.

So while you decide which font will best support your site visually, there are some basic technical questions you need to deal with too: 

  • Will your text be displayed even if the CSS file isn't loaded? 
  • Is your site still readable in the standard serif and sans serif fonts? 
  • Will you supply an alternative font? How will it be displayed? Can you make any other settings to give you more control over your fallback fonts?

First and foremost, you need to ensure the content is displayed at all. The general readability is the be-all and end-all when choosing typography. 

Interesting basics on FOUT vs. FOIT (when the font is loaded) are given by Robin Rendle in his article Loading Web Fonts with the Web Font Loader.

Further information can be found here:

Where does your font come from?

Now you're up to speed with fallback fonts and the general technical basics, there's another important point to consider. And that's where your font is actually loaded from. As mentioned above, every operating system has its own standard fonts. Every user can also add fonts to their computer. It's therefore impossible to know which fonts are, or are not, available. 

People are increasingly turning to web-based font services to avoid having to display their websites in Arial and Times New Roman. The advantage is obvious; you bypass the limitations you have using standard fonts and have a much larger choice of fonts at your disposal.

The most well-known web font services are probably Google Fonts (free) and Adobe Fonts (paid). But there are other providers out there. Strict data protection legislation, particularly in Europe, means more and more people are looking for alternatives to Google services. There are not only fonts available for embedding but also platforms that host your fonts for you. These services allow for limitless creativity. The prerequisite here is, of course, that you own the rights or licenses for the fonts.

Smashing Magazine has tried out various providers and collected its experiences here.

Design elements of fonts

There are a few characteristics of typographies you should know to make an informed choice about fonts on your website. Generally speaking, paragraphs should consist of fonts that are easy to read. If reading your texts is too taxing for visitors, they'll simply stop reading and won't take in any of the information displayed. 

Also, pay attention to how a font changes when it's made smaller. A font that is legible on a desktop may be difficult to read in a smaller format on a mobile device. 

Below is a selection of properties to keep in mind when looking for the perfect font for your project.

Web Typography: How to Find the Perfect Font for Your Website
Article: What Is Typography?

X-height

In the image below, you can see three examples of different x-heights. The x-height describes the vertical height of lower-case letters. If it's too small, the text becomes less accessible, especially with smaller font sizes. If the x-height is too large, it becomes more difficult for readers to distinguish between upper- and lower-case letters.

Web Typography: How to Find the Perfect Font for Your Website
Source: Professional
Web Typography

Apertures

Apertures are the openings we find in letters. Generally speaking, the more generous they are, the more pleasant it is to read long sections of text in that typeface.

Letter-spacing and kerning

While letter-spacing describes the general space between letters, kerning is the space between specific pairs of adjacent letters. This spacing may be larger for some pairs than for others due to the natural shape of the letters in question:  

Web Typography: How to Find the Perfect Font for Your Website
Article: Typography in 60 Seconds

With even spacing, your font appears more harmonious and is easier to read. If you feel like your chosen font still needs improvement, you can adjust both the letter-spacing and kerning via CSS:

.kerning {font-kerning: normal;}

.spacing {letter-spacing: 0.1em;}

Terminals, ascenders, and descenders

Terminals occur in the letters a, c, f, j, r, and y:

Web Typography: How to Find the Perfect Font for Your Website
Source: Professional
Web Typography

Ascenders and descenders are similar and refer to the extenders in, for example, f, q, and j:

Web Typography: How to Find the Perfect Font for Your Website
Source: Professional
Web Typography

The following applies to ascenders and descenders: the more inconspicuous they are, the less suitable they are for use in pronounced texts. Serif fonts, in particular, are well-defined in terminals, ascenders, and descenders. For this reason, serif fonts were long considered the safe option for longer sections of text.

Contrast

Fonts with a lot of contrast (left) are less suitable for small font sizes, such as those used in paragraphs, and are better suited for headlines.

Web Typography: How to Find the Perfect Font for Your Website
Source: Professional
Web Typography

Bold and italic

When choosing your fonts, you should also make sure they're available in different weights and styles. Otherwise, font styles that aren't available may be created artificially by the browser and can end up looking like this:

(The "faked" font styles are on the right) 

Web Typography: How to Find the Perfect Font for Your Website
Web Typography: How to Find the Perfect Font for Your Website
Source: Professional
Web Typography

Based on these criteria, you can now look for the body font for your website. Selecting a body font is usually more complicated as there are more aspects to factor in. That's why I recommend choosing the body font first and then basing the heading font(s) on that choice rather than the other way around.

You can get a more comprehensive overview and further explanations of terms here: https://www.shillingtoneducation.com/blog/what-is-typography/.

Serif - sans serif - monospace

There's a wide variety of font families to choose from. The three most common are probably:

  • Serif, e.g. Times New Roman
  • Sans serif, e.g. Arial
  • Monospace, e.g. source code 

When it comes to font combinations, there are two simple approaches you can follow. These are not a must and are merely guidelines that can help you. Especially if you don't have much experience in combining fonts:

  1. Use the same font for the body and headings but change the weight, letter-spacing and size, e.g. Lato:
Web Typography: How to Find the Perfect Font for Your Website
Use the same font for the body and headings 
  1. Combine a serif and a sans serif font, for example Baskerville and Open Sans:
Web Typography: How to Find the Perfect Font for Your Website
How a combination of fonts can look

There is also an online tool that helps you quickly discover and try out different font combinations: https://fontjoy.com/#.

Final thoughts

One important topic not covered in this article is the use of colors. Your text will, of course, appear different depending on whether it's set against a light or dark background. Moreover, you can create different font variations by taking the same font and not only displaying it in different weights but also in different colors. When choosing colors, always keep your style guide and branding in mind.

In addition to analyzing other websites, it's also a good idea to look at current trends for inspiration. You will quickly notice that certain font pairings are always repeated here and that there is little that is new. However, depending on the project and requirements, it may be necessary to fall back on the familiar rather than being particularly innovative - you can find more details in this article.

Further useful resources 

Your questions: Finding the perfect font

What questions do you have about typography on the web? Feel free to use the comment function. You want to be informed about new articles on web design and development? Then follow us on Twitter, Facebook or via our newsletter.

After studying Game Design and Creative Writing in the green Auckland region, Sonja Hoffmann specialized in web and app design and development. Her focus is on gamification and the exploration of user motivation and experience, coupled with a passion and curiosity for technological trends.

Comments on this article

Post a comment

Your email address will not be published. Required fields are marked with *.