2.13 Use optimized and appropriate web typography
Provide custom fonts in the most suitable file format, but with a preference for pre-installed typefaces where possible.
Criteria
- Pre-installed typefaces:
Use pre-installed, web-safe typefaces and system fonts wherever possible.- Apple System Fonts
- CSS Fonts
- Fabulous Font-Face Fallbacks
- Fallback Font Generator
- Fallback lister
- Font style matcher
- GR491 – 2-4016 – System Fonts
- GreenIT – 029 – Prefer standard fonts
- How can we design sustainably?
- List of typefaces included with macOS
- List of typefaces included with Microsoft Windows
- Matrix of fonts bundled with Mac and Windows operating systems, Microsoft Office and Adobe Creative Suite
- Modern Font Stacks
- System Font Stack
- Using UX Design to Build a Sustainable Future
- Web Almanac: Sustainability
- Web fonts: when you need them, when you don’t
- Font optimization:
Limit the number and complexity of fonts downloaded. Design or subset fonts to omit unnecessary or unused stylistic variations, such as font weight or italics. Additionally design or subset to omit unused characters only where you and not the user or a third party control the input and output and can be sure only the confirmed Unicode range or character set will be used. When using a variable font, also restrict the supported axes and ranges to those required by your project whenever this reduces file size. Use the most performant file format available.- A Guide to Understanding What Makes a Typeface Accessible
- Best practices for fonts
- Font sustainability and accessibility analysis
- GPF – General Policy Framework (PDF) – 4.7 – UX and UI (Media Choices)
- GPF – General Policy Framework (PDF) – 4.8 – UX and UI (Font Limits)
- GPF – General Policy Framework (PDF) – 5.7 – Content (File Size Reduction)
- GR491 – 2-4015 – Font Limits
- GR491 – 8-3058 – Fonts and Varients
- Incremental Font Transfer
- Preload Fonts On Your Website For Better Core Web Vitals
- Reduce web font size
- The performance cost of custom web fonts, and how to solve it
- Should you preload fonts for performance?
- The Ultimate Guide to Font Performance Optimization
- Web Almanac: Sustainability
- Web Font Performance – How Your Fonts Affect Page Speed
- You’re loading fonts wrong
Benefits
- Environment
Reducing the number and complexity of custom fonts used reduces data transfer and rendering effort, which lowers associated emissions. - Performance
Using optimized web fonts or system fonts supports a smoother user experience and faster rendering. - Social Equity
System fonts are preinstalled and are reliable, ensuring content can always be presented fast in a font users are familiar with.
GRI
- Materials: Medium
- Energy: Medium
- Water: Medium
- Emissions: Medium