2.18 Use optimized and appropriate web typography

User Experience Design

Provide custom fonts in a highly optimized and correct format, but with a preference for pre-installed typefaces where possible.

Criteria

• Pre-installed typefaces: Machine-testable
  Use pre-installed, web-safe typefaces wherever possible.Related Resources
  • Apple System Fonts
  • CSS Fonts
  • Fabulous Font-Face Fallbacks
  • Fallback Font Generator
  • 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: Machine-testable
  Limit the number of fonts used. Design or subset fonts to omit unnecessary or unused variations, such as font weight or characters. Use the most performant file format available.Related Resources
  • Best practices for fonts
  • 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
  • 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
  • The Ultimate Guide to Font Performance Optimization
  • Web Almanac: Sustainability
  • Web Font Performance – How Your Fonts Affect Page Speed

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

View the Guideline

Tags

PerformanceUIUsabilityCSS