perfect-web-typography

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

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 Font
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 that you have dealt with the technical background and fallback fonts, there remains one very important aspect. Namely, where your font is actually loaded from. As mentioned before, every operating system has its own standard fonts. In addition, every user can install fonts on their computer. It is therefore impossible to know which fonts are available - or not. 

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.

"*" indicates required fields

I would like to subscribe to the newsletter to be informed about new blog articles, ebooks, features and news about WordPress. I can withdraw my consent at any time. Please note our Privacy Policy.
This field is for validation and should not be changed.

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 distance between letters, we understand kerning as the distance between certain letters. This spacing can be greater than between others due to the natural shape of the letters:

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

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/#.

Conclusion on typography on the web

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 postson web design and development? Then follow us on Twitter, Facebook or via our newsletter.

Did you like the article?

Your rating helps us improve our future content.

Post a comment

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