Sustainable web design, shaping the future, system fonts

Sustainable web design — are system fonts a solution?

Illustration: Hannah Stollenwerk

What makes websites sustainable? On the one hand, low data transfer. Because the Internet consumes vast amounts of energy and, as a country, would be the seventh-largest emitter of CO2 worldwide. On the other hand, caring for one another: privacy, accessibility, common good and so much more. Gerrit Schuster creates sustainable websites for companies and agencies as a freelancer.

Where possible, they recommend using system fonts instead of web fonts in order to reduce data load. With today's options with web fonts and variable fonts, couldn't it also be seen as rather retrogressive to use system fonts?

Great question. If we don't change our perspective: Sure. The possibilities of system fonts are limited. However, our design doesn't live in a vacuum. We are responsible for users, clients and for a planet worth living in. I'm not saying we should therefore go back to the prehistoric days of the web. Instead, use our creative freedom responsibly. And in the 21st century, that definitely means using our planetary resources mindfully. In this light, I can't see a step backwards.

To what extent have you experienced the willingness of companies to move away from their corporate design for a more sustainable website?

As surprisingly high among small and large companies alike. This could be due to my primarily “eco-social” clientele. But when I consider the reasons for redesigning a website, it makes perfect sense: Websites are integrated as marketing tools into an overarching strategy. When this strategy means “becoming more sustainable,” a corporate design also changes. Then there is the willingness to set new “visible” signs.

Now readers are thinking greenwashing! That risk exists. Smart companies, however, are well aware that simply with a logo painted green they are no longer luring anyone out from behind the stove. The deeper a sustainable, i.e. responsible and respectful, claim is incorporated into the DNA of companies, the more trust it will gain in the future. Trust is the real currency.

Can you give us tips for using optimized font files in web design?

The most important tip is not to throw away all typographical sophistication “for the planet” quickly. A font file weighs very little compared to video content. There should only be one convincing reason for their use.

Second tip, as already mentioned: use Web-free fonts or modern system UI fonts where the CD allows. On Apple, Google or Microsoft systems, the respective UI font is then automatically displayed. No data transfer required.

Third party: Embed font files locally on the server instead of loading them via Adobe, Google, etc. This is primarily due to privacy reasons because these providers register the IP addresses of all site visitors.

Fourth: Use modern efficient file formats (.woff2 and .woff) and reduce the number of characters if possible. There is no reason to transfer Cyrillic characters if Cyrillic is not displayed. This reduction is known as subsetting and can be done using online tools.

What else would you like to tell readers?

The topic is, of course, more extensive than briefly summarized here. My article on my free collection of methods is a good way to get started sustainable-webdesign.now on. If you want to know more, you will also find links to more in-depth resources and other adjustments for more sustainability in the design process.

I'm happy that the design community is organizing and gaining traction: Ethical Design Network, The ethical move, Sustainable UX, Climate-Tech, Creatives For Future and many more. Collaborating, learning together and moving forward has never been easier.

The article was published in the column “Shaping the Future” in Grafikmagazin 03.22.