Home logo, and top menu

Sustainable website fonts and the proper use of them

Sustainable website fonts and the proper use of them - A Coconut Design article

Using sustainable web fonts is one of the easiest ways to make your website more eco-friendly. In this article, we present a guide on how to choose your web fonts and use them in a way which reduces the carbon footprint of your website.

What Kind of Fonts Exist?

Simply put, there are 3 types of fonts: default fonts, web fonts and customised fonts. 

Default fonts, or system fonts are installed on your computer by default. Among others: Arial, Times New Roman, Courier New, Georgia, Verdana, and Helvetica are some of the common system fonts.

Web fonts are loaded from a server, from your own or from others (typically Google’s, if we’re talking about a Google font). This means that they are hosted online instead of the local computer on which the website is loaded. Loading from a server requires more time and energy, but with appropriate settings, this effect can be compensated.

Custom fonts are special fonts, made by a designer. DIY fonts are stored and loaded from your server. They are not very common, and their readability is not always adequate for texts. Apart from a few cases, it is recommended to use them mostly for decoration.

With proper optimization, you can choose any of them, the main thing is that they are readable and align with your brand.

What Does a Good Font Look Like?

A nice font can add a unique style to your website, but it is crucial not to overdo it. 

When choosing fonts, we recommend using the following tips:

  1. Keep it simple. You should have a maximum of 2 fonts on a website: one for the headings and one for the texts. If possible, they should match each other visually and in style.
  2. Fonts are made for reading. Readability is the most important thing when it comes to choosing our website fonts. After all, the main reason we employ text on our website is so that visitors can read it.
  3. Test them before launch. Some web fonts may not display well in certain browsers. Before you launch your website, we recommend having a look at your texts on different browsers and devices. You should also use specific settings for each screen size: font size and strength really matters when it comes to smaller devices.
  4. Don’t forget about numbers. There is a possibility that in certain web fonts, numbers aren’t well readable or look a little strange. Always check them before deciding on a font.

These considerations are much more important when it comes to using fonts than choosing a web font or a system font.

What Are the Most Sustainable Web Fonts?

Based on the above, it may seem that the default fonts are the most sustainable, because their loading does not require communication with a server, which means less energy consumption – not to mention their good readability.

However, these are often boring, hackneyed and do not necessarily match the style of the website.

Web fonts, on the other hand, can adapt well to a website’s design and the brand as a whole. Because of this, these fonts are most frequently used in web design. 

Since a lot of common web fonts are ‘Google Fonts’, many users’ computers are already familiar with them (at least the popular ones anyways). As a result, if you decide to use one of these, you can be sure that it will load swiftly and successfully.

Let’s see a few examples! For text, we recommend the most common Google fonts with the best readability: 

  • Roboto
  • Open Sans
  • Merriweather
  • Raleway

In the headings, we suggest using something more special, for the attention-grabbing effect! Our favourite Google heading fonts (with good readability) are:

  • Playfair Display
  • Lora
  • Slabo
  • Nunito
  • Anton
  • Exo or Exo 2
  • Teko

These can be safely paired with each other: one of those recommended for the text and one of those listed for the headings.

Of course, there are plenty of other options. The most important thing is to always answer the question: does a special font add anything to the website’s communication? If so, feel free to use it and take the necessary steps to ensure that it loads quickly and with good readability. This is how we can do the most for your brand and for our planet at the same time.

Not sure how to make your own website more appealing and sustainable? Or do you have questions about sustainable web design? Let’s see what we can do: book a free consultation now!