06
Fonts
It's good for the environment, users and business to be considerate about how much front-loading you're asking users to do.
What do fonts have to do with eco-conscious design?
There are many larger considerations that can be made in terms of pivoting towards a more environmentally considered approach to digital design, but it’s valuable to be aware of some of the more specific considerations that can be made too.
As designers know well, a font (strictly speaking, a typeface), isn’t an afterthought. If the copy that an organisation uses is its tone of voice, the font is the voice itself - and we as humans use our unconscious associative ideas to decide what that means about the brand it represents. User experience and accessibility practitioners know too that typefaces in the wrong hands, and the wrong places, can lead to many users being unfairly disadvantaged, and at worst stopped entirely, from accessing products and services.
With all this in mind, there are a lot of factors that contribute to decisions around typefaces, but a guiding principle that unites most is that too many of them at once is not good for user experience, and nor is too few. However, there are some environmental considerations that your team can integrate into your next font-fight to hopefully tip the scale into a resolution faster.
Just as with media like images or video, if a website enables a user to view something they don’t currently have available on their own PC, the user must load it. In this case, the user’s browser requests and receives the font file needed to display the text on the page with that font applied. Then, if your servers are set up to do so, or if you’re not loading fonts through a third-party such as Google Fonts, with any luck your user's browser will cache this font and use that one download, to apply the font to other pages on your site when your users reach them. If those conditions aren’t met, or if a user has set up their device to stop that from happening, it won’t.
All this downloading font files does what you might think, it requires, and uses energy which in turn generates carbon emissions. With over 200 million active websites on the internet, comprising more than 50 billion webpages, that adds up.
It takes users 50 milliseconds to make a decision about what they think about a website, and if it’s worth the effort to read what they find.
Why should I care?
Too many fonts on a webpage make your brand look unstable. Much like having too many voices shouting over each other while telling a story, it becomes less credible to the listener.
Big font files that take a long time to load make your site feel sluggish which, regardless of how fantastic it may look when it does appear, turns user’s away. Fonts that don’t load mean your users will be left with their browsers default, or worse nothing - which is both a waste of their time, and your potential leads.
This means it's good for the environment, users and business to be considerate about how much front-loading you're asking users to do.
Fonts play such an important role in branding and subconsciously telling a story, but it can sometimes be overlooked how they play a part in sustainability. I always remember the story in 2014, 14-year-old Suvir Mirchandani from Pittsburg, Pennslyvania found that he could save his school $21,000 a year – simply by changing the font they used on their hand-outs to Garamond. This methodology is exactly the same principle for digital.
Gregg Lawrence, Founder / Creative Director
What can I do right now?
System fonts are better for the environment, and faster.
System fonts are ones that already live on the majority of user’s devices. System fonts don’t need to be downloaded every time a user wants to load a webpage, so they load fast and save energy.
When devices need to default to a system type face, because a webpage hasn’t provided one, or can’t access the intended font for some reason, the browser will apply a system font. For Apple Mac user’s that’s usually San Francisco, for Windows user’s it’s Segoe and for Android users it’s Roboto.
However, developers and designers can specify from a huge array of system fonts that are pre-installed on user’s devices, that the operating system creator has already gone to the trouble of testing rigorously. This is great for accessibility, provided other factors like colour are taken into account. System fonts also generally have great support for characters (such as ?! and $), which helps to avoid the dreaded � symbol.
Custom web-fonts are best in moderation.
Of course brands still need to differentiate themselves, an internet full of the same fonts would be not only dull, but harder to navigate. Custom web fonts, the type that need to be downloaded by user’s browsers to display, aren’t going anywhere, nor should they. However, a good sign that you’ve found the right font or fonts for your business is that you don’t need too many. A guide for this is to limit your site to 3-4 typefaces, to differentiate between different headings and body text. Good design uses factors like colour, scale and positioning to add variation and interest to a page without evoking unsolicited nostalgia for the 90s.
How too many fonts can hinder your websiteHost third-party fonts yourself.
Services like Google Fonts or Typekit, are convenient, and offer a huge range of fonts used by websites the world over. The downside is that user’s devices don’t cache those fonts and re-use those font files again later, they download them again and again every time they are needed. To prevent users from needing to download the same font file again and again, consider downloading and hosting fonts on your website’s server, to enable your site to take advantage of caching. This enables one font to be used across different operating systems, and means your website is reliant on one less third-party.
Google has a guide for self-hosting its web fonts hereSources
- Reduce & Optimise Web Fonts For Page Speed / Page Speed Checklist
- A guide to web font optimization / WP Rocket
- How Much Data Do We Create Every Day? / The Mind-Blowing Stats Everyone Should Read, Bernard Marr, Forbes.com
- How Many Websites are there? / Beti Prosheva Gavrilovska, Review42
- Attention web designers: You have 50 milliseconds to make a good first impression! / Behaviour & Information Technology, Gitte Lindgaard, Gary Fernandes, Cathy Dudek & J. Brown
- System font, or web-safe font / Google Fonts
- Eye opening Web Statistics: Is Your Website Costing Your Business? / SWEOR
- System fonts / Apple
Next up...
07
Eco-friendly development practices
Within web development, and development widely there are many ways to implement more eco-friendly and sustainable practices.