2.18 Take a More Sustainable Approach to Typefaces

Since the advent of the modern web, the ability to include embedded fonts and provide a more customized experience has seen their use explode. They aren’t always the most performant option (which poses emissions hazards) and come with a few issues such as Flash Of Unstyled Content (FOUC) / Flash Of Unstyled Text (FOUT) which should be addressed.

Criteria

Default Typefaces: Use standard system-level (web-safe / pre-installed) fonts as much as possible.
Font Optimization: The number of fonts, and the variants within typefaces (such as weight and characters) are limited within a project, using the most performant file format available.

Impact

Medium

Effort

Low

Benefits

Environmental:
Reducing the number of fonts being loaded will reduce the amount of rendering that occurs, all of which have a carbon impact (as the physical rendering of non-system typefaces graphically onto every element of the DOM will have an energy commitment).
Social Equity:
System-level (Web Safe) fonts work across the widest range of devices and platforms, which improves access to information for those who may have tightly regulated browsing habits or limited availability.
Performance:
By providing Web fonts that are optimized but optional, visitors can experience the product or service with a level of speed versus aesthetic they feel comfortable with.
Economic:
While pretty, custom typefaces are entirely optional on the Web and, as such, the bandwidth they consume (and the emissions this produces) are unnecessary. This added cost can be eliminated, but the benefit such fonts give in readability or personality for a website or application is worth considering.

GRI

materials: Medium
energy: Medium
water: Medium
emissions: Medium

Example

Code:

font-family: Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;

System Font Stack.

Resources

View the Guideline