Making sustainable font choices in digital design

Wait, isn’t the web over pen and paper more sustainable? Well, yes. But although digitization produces less physical waste, it’s been consuming more and more energy each year. According to Thunder Said Energy, the internet consumed 800 terawatt-hours (TWh) in 2022 and is projected to grow with the increasing demands of data centers and AI.

Most of us use the internet, and each webpage we ask our devices to load (or queries we make on Chat GPT) contributes to this energy consumption. But, there are strategies to reduce the energy required for a webpage to load properly.

And as designers, we can help implement these strategies in our design choices as well as advocate for sustainable design.

These sustainable web practices will only become more and more important as the internet’s energy consumption continues to increase. Having a website with a low environmental impact benefits our limited natural resources and provides a better user experience with faster loading times and intuitive interfaces.

Though there are many ways to apply sustainable web design, one strategy to consider is selecting and using “sustainable” fonts. Fonts may seem minor and irrelevant when thinking about web page performance, but these design elements on every page add up (especially if your website traffic is high).

To be best equipped to select fonts for your website, let’s review what makes a font sustainable and how fonts impact UX design. I’ll also discuss a few more resources on font choices.

What makes a font ‘sustainable’?

Fonts hold a powerful place in digital design — from establishing brand-feel and tone to decreasing (or increasing) a website’s carbon footprint. And choosing a font to suit all your needs, such as company branding, inclusive design, and sustainability, is an important decision.

Let’s look at a few font characteristics to consider when selecting your website’s fonts: font type, number of font files, and legibility:

Font type

There are three main types of fonts to select from for a website. Each has pros and cons, so you must balance font reliability, sustainability, and your company’s branding:

• System fonts (also known as “web-safe” fonts) — These fonts are pre-installed on most users’ devices, such as Arial, Times New Roman, and Courier New. Since they’re already installed and don’t need to be loaded by a server, they’re more reliable and consume less energy compared to other font types
• Web fonts — These fonts are stored online versus a user’s device. So, every time a user visits a website, the browser must download the font. There are thousands of web fonts to pick from, like Google Fonts, and they offer a greater variety of styles than system fonts
• Custom fonts — These fonts are created either by hand or through digital tools and are unique and tailored to a company’s brand identity. Some examples of DIY fonts include IBM Plex and Apple’s San Francisco (both are open-source). However, custom fonts are more costly to create and must be downloaded by browsers when used, impacting performance and energy consumption

Number of font files

The next trait to consider when selecting a font is how many font files you’ll need for your website’s design.

Do you only need three fonts, or do you need 30? Even the same font with different weights, like “normal” and “bold,” may need separate files. So, the number of font files needed can significantly affect the energy consumed when a user’s device loads a website.

But the number of files needed depends on whether the font is traditional or variable; let’s review each below:

• Traditional fonts (also known as static fonts) — These fonts require one file for every single font used on a web page, including fonts with minor changes in weight or style. For example, if I need to use Arial-Regular for body copy and Arial-Bold for headings, I will need two separate font files, even though they’re from the same font family. So, if a website requires many fonts to establish a visual hierarchy or bring emphasis to specific words, traditional fonts will require more energy to load each of the font files
• Variable fonts — These fonts reduce the number of files needed for a website by housing multiple variants of a font in one file. So I can have all the weights and styles of one font family within a single file versus having ten or more files. Though variable fonts reduce energy consumption and optimize loading times, the font selections are limited and are not supported on all browsers and platforms yet

Legibility

The third trait to consider when selecting a font is legibility.

To design for inclusivity and accommodate most users, the fonts you choose need to be readable. Legible fonts help improve accessibility for users with vision and learning disabilities, such as low vision and dyslexia. Because legible fonts are typically minimal, they are also more eco-friendly due to reduced file sizes compared to more decorative fonts.

Other attributes of legible fonts include:

• Distinct characters — Some fonts do not discern between an uppercase I, numeral 1, and lowercase l (L), as well as an uppercase O and numeral 0. Though the context of the characters helps understand which is being used, you can’t assume it’s obvious to all users. So, selecting a font that includes distinct characters will enhance a website’s accessibility
• Limited font variations — A website can have many font weights and styles — regular, bold, black, italicized, underlined, etc. But less is more when it comes to accessible and sustainable practices. Limiting the fonts on a webpage reduces the cognitive load needed to process each font, enhances text readability from less visual clutter, and decreases how many fonts need to be loaded

How does your font choice impact sustainable UX design?

We just reviewed what makes a font sustainable and got a little into how fonts can improve UX design. But let’s dive deeper into how the font(s) you select for your website affects user experience by reviewing the UX features affected by your choice:

• Performance — When sustainable fonts are used in a website’s design, it loads faster because less data needs to be downloaded to render the web page. Users expect web pages to load quickly, so much so that they may abandon the website after waiting about 3 seconds. Not only do sustainable fonts consume less energy, but they provide a better user experience by loading web pages faster (and reducing abandonment rate)
• Visual hierarchy — Implementing sustainable fonts means using fewer font variations, which also means using the fonts more intentionally across the website. This improves a web page’s visual hierarchy by ensuring elements of importance, such as headers, are emphasized and easy to find. And constraining fonts on a website also improves consistency from page to page since there are fewer font variations to select from
• Accessibility — Using sustainable fonts enhances accessibility because they are typically minimal sans or sans serif fonts that optimize legibility. Decorative and display fonts can be aesthetically pleasing but are hard to read for users with vision or learning impairments. This is due to the font’s characters not being distinct from one another or blending together, hindering readability

Examples of sustainable fonts

Just because a font is sustainable doesn’t mean it isn’t aesthetically pleasing or can’t fulfill a design’s requirements. In fact, many popular websites and companies use sustainable fonts because they perform better and are legible.

Here is a recommended list of sustainable fonts (all from Google Fonts):

• Roboto Serif
• Lora (serif)
• Libre Caslon Text (serif)
• PT Serif
• Noto Sans
• Nunito Sans
• Work Sans
• PT Sans

Here are some examples of fonts to avoid (all from Google Fonts):

• Beau Rivage (or any cursive font)
• Fascinate Inline (or fonts with 3-dimensionality)
• Danfo (or fonts with irregular baselines)
• Gajraj One (or fonts with characters that blend together)

Resources for sustainable font choices

We now know the traits of sustainable fonts and how they affect UX design, but how do you ensure the font(s) you pick are sustainable and inclusive? Thankfully, there are many free tools from which to get this assurance. Let’s review a few recommended tools below.

Web-optimized font tools

• Google Fonts — Has a wide variety of open-source fonts to select from, and they’re already optimized for web usage. Google Fonts uses WOFF (Web open font format) and WOFF2 file formats, which are more efficient than traditional formats like TTF (TrueType) or OTF (OpenType)
• Font Squirrel — Offers fonts for commercial use ( free and paid). Font Squirrel offers fewer font families than Google Fonts but still offers a wide range. The download process is easy. Just select the “Download” button when viewing a font family to either download it directly from Font Squirrel or be directed to a seller, like FontSpring, to purchase it

Font performance testers

• Google Lighthouse — If you use Chrome, this tool is already embedded in your Chrome Developer Tools. Lighthouse is a free, automated tool that helps you find issues and improve a website’s performance, such as font optimization. Just open Chrome DevTools (or use Option+Command+J on Mac or Shift+CTRL+J on Windows), select the “Lighthouse” tab, then select the “Analyze page load” button to get results in minutes
• WebPageTest: This is another free tool that analyzes a website’s performance. All you have to do is paste a website’s URL into an input field and select “Start test.” After the test is complete, you get a detailed report of metrics and recommendations for improvements. You can also create a free account to save the test results to compare performance reviews as the website is updated

Accessible fonts

Though the WCAG (Web Compliance Accessibility Guidelines) does not recommend a specific font or font size, there are resources on selecting a font.

• Section 508 Compliance — Section 508 is a federal law that requires all federal agencies to provide equal access to digital information, including ICT (information and communication technology). It references the WCAG 2.0, Level AA standards to offer a moderate level of accessibility conformance. Section 508 offers some recommendations on typography, such as using sans-serif fonts and minimum font size requirements when a user can’t customize the size
• SiteImprove — SiteImprove is a digital optimization tool that analyzes a website for accessibility and SEO. They offer many tips on web accessibility, even for font selections. They suggest using fonts such as Tahoma, Calibri, and Verdana, as well as recommendations for font sizing

There’s more to sustainable UX design

Since we’ve only reviewed one way to practice web sustainability, you may be wondering what else you can do to reduce your website’s energy consumption.

Let’s discuss more strategies to create eco-friendly websites.

Ensure the website’s navigation is optimized

Not only does enhanced information architecture assist users in finding the right information quickly, but it also reduces the amount of web pages they load.

If users find your website’s navigation confusing, run a card-sorting exercise with the target user group to allow the users to organize the navigation’s structure rather than making assumptions.

Reduce images’ file size

Of course, websites have images — they give information additional visual aids and add appeal, but they also impact energy and performance.

Compressing an image’s file size by reducing its size or resolution (but maintaining image quality) helps reduce the website’s carbon footprint and loading speed.

Delete unnecessary content

If any content, such as decorative images or animations, doesn’t add value to a web page, delete it. Like all the other content on the web page, these unnecessary elements need to be loaded by the browser, thus using energy.

A good question to validate the necessity of any content is, “If this wasn’t included, would the user still have the information they need?”

But remember that redundant content is sometimes vital to users who better process information in text rather than images (and vice versa).

Implement dark mode

Though dark mode has been a big UX trend for years, it also serves a sustainability purpose because the “nighttime” colors consume less energy than the traditional light mode. Dark mode can be an option users can swap to, the website’s default mode setting, or the only mode available.

Some big tech companies like Netflix and Max only offer their services in dark mode.

Choose a ‘green’ hosting service

These service providers help keep a website up and running but use renewable resources like solar power. Green hosting services are energy-efficient and don’t rely on fossil fuels, so websites can be considered “carbon-neutral.”

A few examples of green hosting services to look into are GreenGeeks, Kualo, and Hostinger.

Conclusion

There’s a growing need for websites to practice web sustainability. Think about how many web pages you visit daily; with each web page loaded, energy is consumed. There are numerous ways to reduce the energy needed to render a web page correctly, and one of them is using sustainable fonts.

How sustainable a font is depends on its type, the number of font files required, and its legibility. System fonts are more sustainable than web and custom fonts since they’re pre-installed on users’ devices but have more limited options. Variable fonts reduce the number of font files needed by combining font families into a single file but are not currently supported by all browsers. And because legible fonts are usually minimal, they are more sustainable and accessible.

Not only do sustainable fonts help reduce energy consumption, but they also provide better user experiences. Sustainable fonts optimize a website’s performance, visual hierarchy, and accessibility so web pages load faster, are easier to comprehend, and are available to more users. When selecting fonts, it’s recommended to pick a serif (Roboto Serif) or sans-serif (PT Sans) and avoid cursive fonts or those with irregular baselines.

As you select sustainable fonts, you can use tools such as Font Squirrel to download optimized fonts and Google’s Lighthouse to check your website’s performance. After implementing sustainable fonts, you can look into other sustainable web practices, such as deleting unnecessary content and applying dark mode as a user setting.

By selecting and using sustainable fonts on your website, you’re helping reduce energy consumption every time a user visits the website. Though the energy being saved seems minuscule, it adds up with each user. What’s more, it helps you pave the way for further exploration into how you can reduce a website’s carbon footprint with every page load.