From 36fa1293f8776fdb192843b8b0e58c64bc68bca3 Mon Sep 17 00:00:00 2001 From: Russell Trow Date: Wed, 3 Jun 2026 10:17:48 +0100 Subject: [PATCH 1/3] Add pattern on optimizing web font loading and formats This document outlines strategies for optimizing web font loading and selection to improve web performance and reduce environmental impact. Signed-off-by: Russell Trow --- ...e-web-font-loading-and-format-selection.md | 61 +++++++++++++++++++ 1 file changed, 61 insertions(+) create mode 100644 docs/design/optimise-web-font-loading-and-format-selection.md diff --git a/docs/design/optimise-web-font-loading-and-format-selection.md b/docs/design/optimise-web-font-loading-and-format-selection.md new file mode 100644 index 00000000..0a77b0c8 --- /dev/null +++ b/docs/design/optimise-web-font-loading-and-format-selection.md @@ -0,0 +1,61 @@ +--- +version: 0.1 +submitted_by: Paula de Matos +submitted_by_linkedin: https://www.linkedin.com/in/pauladematos/ +published_date: +category: Design +tags: frontend, web-performance, fonts, typography, media-assets, network +personas: Front End Engineer, Product Designer, UX Designer, Full Stack Engineer +--- + +# Optimise web font loading and format selection + +## Description + +Typefaces are essential for communication, but custom web fonts come with a hidden environmental cost: they must be downloaded by every user's device before text can render correctly. A single page may load multiple font files covering different weights, styles, and character sets, each adding network bytes and increasing the energy consumed by data transmission and device processing. + +The problem is compounded when fonts are served in inefficient formats, when unused variations are loaded speculatively, or when system fonts — already present on the device — are bypassed in favour of custom alternatives that serve no functional advantage. These decisions, often made for aesthetic reasons, silently increase the carbon footprint of every page view across a site's entire audience. + +## Solution + +Prefer system fonts where they serve the design intent. Modern operating systems ship with a broad range of high-quality typefaces. Using system font stacks eliminates the network cost of font delivery entirely and avoids render-blocking behaviour. When a custom font is genuinely required, the following approaches reduce its impact: + +- **Use modern, compressed formats.** Serve fonts in WOFF2, which offers significantly better compression than older formats such as TTF or OTF. Avoid serving legacy formats unless browser support requirements demand it. +- **Subset fonts to actual usage.** Rather than loading a full Unicode character set, generate a subset that covers only the characters, scripts, and languages your users will actually encounter. Tools exist to subset fonts at build time, reducing file size substantially. +- **Load only the variations you use.** Each weight (light, regular, bold) and style (italic, oblique) is a separate file. Audit your design system and only load font variations that appear in production. If bold and regular are sufficient, do not load thin, medium, or italic variants. +- **Apply font-display strategies.** Use the `font-display` CSS descriptor to control how text renders while fonts load, favouring approaches that show content immediately using a system font fallback rather than blocking render or causing invisible text. +- **Self-host fonts where possible.** Serving fonts from your own CDN removes third-party request overhead, allows better caching headers, and avoids connection latency to external font services. + +## SCI Impact + +`SCI = (E * I) + M per R` + +- `E`: Reduced. Smaller font payloads mean less data transferred over the network, lowering the energy consumed by network infrastructure and user devices on each page load. Eliminating unused font variations has a compounding effect across high-traffic sites. +- `I`: Unchanged. This pattern does not influence the carbon intensity of the electricity grid powering the infrastructure. +- `M`: Reduced marginally. Faster page loads and reduced processing reduce active device time per session, contributing a small reduction in embodied emissions amortised over device lifetimes. + +## Cost Impact + +- **Network egress costs decrease.** Smaller font payloads reduce bytes transferred from CDN or origin servers. For high-traffic sites, the savings across millions of requests can be material. +- **Third-party font service costs may decrease.** Some hosted font services charge based on page views or request volume; self-hosting eliminates these costs entirely. +- **Build pipeline complexity may increase marginally.** Subsetting fonts and generating compressed variants requires tooling at build time. This is a one-time setup cost rather than an ongoing operational cost, and the payoff in reduced transfer costs typically far outweighs it. + +## Assumptions + +- The application is a web-based product where fonts are delivered over HTTP/S to end-user browsers. +- The design system has been audited to understand which font weights, styles, and character ranges are actually used in production. +- The team has the ability to influence font selection and loading strategy at the design or front-end engineering level. +- Browser support requirements permit the use of WOFF2 (supported by all modern browsers). + +## Considerations + +- **Switching to system fonts changes visual identity.** For brands where custom typography is a core design element, moving to system fonts may not be acceptable. In these cases, the focus should shift to format optimisation and subsetting rather than elimination. +- **Aggressive subsetting can cause missing characters.** If a subset excludes characters that appear in user-generated content, dynamic text, or internationalised strings, those characters will fall back to a different font, causing visual inconsistency. Subsetting decisions should be informed by real content, not just design mockups. +- **Variable fonts offer a middle path.** A single variable font file can replace multiple weight/style variants and may be smaller in total than loading several static files separately — though this depends on usage patterns and should be measured. +- **Font caching reduces the per-session impact.** For returning users, a well-cached font may add no network cost at all. Optimisation has the greatest impact on first visits and cold caches. + +## References + +- [W3C Web Sustainability Guidelines — Use Optimized and Appropriate Web Typography](https://www.w3.org/TR/web-sustainability-guidelines/#use-optimized-and-appropriate-web-typography) +- [Wholegrain Digital — Performant Web Fonts](https://www.wholegraindigital.com/blog/performant-web-fonts/) +- [GSF Green Software Principles — Energy Efficiency](https://principles.green/principles/energy-efficiency/) From 67effa397683bc45d24898fdc9e83c6c84baae8d Mon Sep 17 00:00:00 2001 From: Russell Trow Date: Wed, 3 Jun 2026 10:38:55 +0100 Subject: [PATCH 2/3] Revise web font loading guidelines and update version Updated version number and refined content for clarity and focus on environmental impact of web font usage. Signed-off-by: Russell Trow --- ...e-web-font-loading-and-format-selection.md | 68 ++++++++++++------- 1 file changed, 42 insertions(+), 26 deletions(-) diff --git a/docs/design/optimise-web-font-loading-and-format-selection.md b/docs/design/optimise-web-font-loading-and-format-selection.md index 0a77b0c8..327d5234 100644 --- a/docs/design/optimise-web-font-loading-and-format-selection.md +++ b/docs/design/optimise-web-font-loading-and-format-selection.md @@ -1,58 +1,74 @@ --- -version: 0.1 +version: 0.2 submitted_by: Paula de Matos submitted_by_linkedin: https://www.linkedin.com/in/pauladematos/ published_date: category: Design -tags: frontend, web-performance, fonts, typography, media-assets, network -personas: Front End Engineer, Product Designer, UX Designer, Full Stack Engineer +tags: frontend, fonts, typography, design-system, accessibility, internationalisation, web-performance +personas: Product Designer, UX Designer, Front End Engineer, Full Stack Engineer --- -# Optimise web font loading and format selection +# Choose typefaces appropriately and optimise ## Description -Typefaces are essential for communication, but custom web fonts come with a hidden environmental cost: they must be downloaded by every user's device before text can render correctly. A single page may load multiple font files covering different weights, styles, and character sets, each adding network bytes and increasing the energy consumed by data transmission and device processing. +Typeface selection is a design decision, but it carries a direct environmental consequence. Custom web fonts must be downloaded to every user's device on each visit, adding network bytes and increasing the energy consumed by data transmission and device processing. When designers choose custom fonts without first evaluating whether existing system fonts could meet user needs, they introduce an avoidable cost that compounds across every page view at scale. -The problem is compounded when fonts are served in inefficient formats, when unused variations are loaded speculatively, or when system fonts — already present on the device — are bypassed in favour of custom alternatives that serve no functional advantage. These decisions, often made for aesthetic reasons, silently increase the carbon footprint of every page view across a site's entire audience. +The environmental impact worsens when font choices are not informed by actual user requirements. Fonts loaded with unnecessary weights, styles, or character ranges — or chosen primarily for aesthetic reasons when a system font would serve equally well — silently increase the carbon footprint of the product for every user, on every visit. ## Solution -Prefer system fonts where they serve the design intent. Modern operating systems ship with a broad range of high-quality typefaces. Using system font stacks eliminates the network cost of font delivery entirely and avoids render-blocking behaviour. When a custom font is genuinely required, the following approaches reduce its impact: +Font decisions should begin with understanding user requirements, not aesthetic preference. Working through these stages in order ensures that custom fonts are only introduced when they genuinely serve users better than what already exists on their devices. -- **Use modern, compressed formats.** Serve fonts in WOFF2, which offers significantly better compression than older formats such as TTF or OTF. Avoid serving legacy formats unless browser support requirements demand it. -- **Subset fonts to actual usage.** Rather than loading a full Unicode character set, generate a subset that covers only the characters, scripts, and languages your users will actually encounter. Tools exist to subset fonts at build time, reducing file size substantially. -- **Load only the variations you use.** Each weight (light, regular, bold) and style (italic, oblique) is a separate file. Audit your design system and only load font variations that appear in production. If bold and regular are sufficient, do not load thin, medium, or italic variants. -- **Apply font-display strategies.** Use the `font-display` CSS descriptor to control how text renders while fonts load, favouring approaches that show content immediately using a system font fallback rather than blocking render or causing invisible text. -- **Self-host fonts where possible.** Serving fonts from your own CDN removes third-party request overhead, allows better caching headers, and avoids connection latency to external font services. +**1. Identify what users actually need from typography.** + +Before any font is selected, designers should establish the functional requirements: + +- **Readability and legibility** — does the context require high character distinctiveness? Ambiguous character pairs (such as lowercase l, uppercase I, and numeral 1) matter significantly in interfaces where users read codes, identifiers, or data. +- **Purpose and context** — UI interfaces, data-dense dashboards, and long-form reading have different typographic demands. A font well-suited to one may perform poorly in another. +- **Accessibility** — consider dyslexia-friendly letterforms, sufficient character distinguishability, and the needs of users with visual impairments. +- **Internationalisation** — if the product serves users across languages, character set coverage, text direction, and script support all influence which fonts are viable. + +**2. Evaluate whether system fonts meet those requirements.** + +Modern operating systems ship with a broad range of high-quality typefaces. If the requirements identified in step 1 can be satisfied by system fonts, using them eliminates the network cost of font delivery entirely and removes render-blocking behaviour. System fonts are already present on the user's device — they have zero download cost. + +A hybrid approach is worth considering: system fonts for body text, where readability requirements are often well met by defaults, combined with a single custom font for headlines or brand-critical elements — loading only the one weight needed. + +**3. If a custom font is genuinely required, minimise its impact.** + +- **Use modern, compressed formats.** Serve fonts in WOFF2, which offers significantly better compression than TTF or OTF. Avoid legacy formats unless browser support requirements demand them. +- **Subset to actual usage.** Generate a subset that covers only the characters, scripts, and languages your users will encounter. Loading a full Unicode character set when only Latin characters are needed is a common and avoidable source of excess weight. +- **Load only the variations used.** Each weight and style is a separate file. Audit your design system and load only what appears in production — if regular and bold are sufficient, do not load thin, medium, or italic. +- **Apply font-display strategies.** Control how text renders while fonts load, favouring approaches that show content immediately using a system font fallback rather than blocking render or causing invisible text. +- **Self-host fonts where possible.** Serving fonts from your own infrastructure removes third-party request overhead, enables better caching, and avoids connection latency to external font services. ## SCI Impact `SCI = (E * I) + M per R` -- `E`: Reduced. Smaller font payloads mean less data transferred over the network, lowering the energy consumed by network infrastructure and user devices on each page load. Eliminating unused font variations has a compounding effect across high-traffic sites. -- `I`: Unchanged. This pattern does not influence the carbon intensity of the electricity grid powering the infrastructure. -- `M`: Reduced marginally. Faster page loads and reduced processing reduce active device time per session, contributing a small reduction in embodied emissions amortised over device lifetimes. +- `E`: Reduced. Choosing system fonts where appropriate eliminates font download energy entirely. Where custom fonts are retained, optimisation reduces the bytes transferred and processed on every page load. Both effects compound across high-traffic products. +- `M`: Reduced marginally. Reduced data transfer and faster rendering lower active device processing time per session, contributing a small reduction in embodied emissions amortised over device lifetimes. ## Cost Impact -- **Network egress costs decrease.** Smaller font payloads reduce bytes transferred from CDN or origin servers. For high-traffic sites, the savings across millions of requests can be material. -- **Third-party font service costs may decrease.** Some hosted font services charge based on page views or request volume; self-hosting eliminates these costs entirely. -- **Build pipeline complexity may increase marginally.** Subsetting fonts and generating compressed variants requires tooling at build time. This is a one-time setup cost rather than an ongoing operational cost, and the payoff in reduced transfer costs typically far outweighs it. +- **Network egress costs decrease.** Smaller or eliminated font payloads reduce bytes transferred from CDN or origin servers. At scale, this is material. +- **Third-party font service costs may be eliminated.** Some hosted font services charge by page view or request volume; self-hosting removes these costs entirely. +- **Design and build time may increase modestly upfront.** Establishing typography requirements and subsetting fonts requires deliberate effort. This is a one-time cost per product rather than an ongoing operational cost. ## Assumptions -- The application is a web-based product where fonts are delivered over HTTP/S to end-user browsers. -- The design system has been audited to understand which font weights, styles, and character ranges are actually used in production. -- The team has the ability to influence font selection and loading strategy at the design or front-end engineering level. -- Browser support requirements permit the use of WOFF2 (supported by all modern browsers). +- The product has web-based surfaces where fonts are delivered over HTTP/S to end-user browsers. +- Designers have input into typeface selection before engineering decisions about font loading are made. +- The design team has access to information about user needs — language coverage, accessibility requirements, context of use — to inform font selection. +- Browser support requirements permit WOFF2 (supported by all modern browsers). ## Considerations -- **Switching to system fonts changes visual identity.** For brands where custom typography is a core design element, moving to system fonts may not be acceptable. In these cases, the focus should shift to format optimisation and subsetting rather than elimination. -- **Aggressive subsetting can cause missing characters.** If a subset excludes characters that appear in user-generated content, dynamic text, or internationalised strings, those characters will fall back to a different font, causing visual inconsistency. Subsetting decisions should be informed by real content, not just design mockups. -- **Variable fonts offer a middle path.** A single variable font file can replace multiple weight/style variants and may be smaller in total than loading several static files separately — though this depends on usage patterns and should be measured. -- **Font caching reduces the per-session impact.** For returning users, a well-cached font may add no network cost at all. Optimisation has the greatest impact on first visits and cold caches. +- **System fonts vary across platforms.** A system font stack that looks excellent on macOS may render differently on Windows or Android. Where visual consistency across platforms is a hard requirement, system fonts alone may not be sufficient. +- **Custom fonts may be a brand requirement.** Where a typeface is central to brand identity, switching to system fonts may not be an option. In these cases, the emphasis should shift entirely to format optimisation and subsetting. +- **Aggressive subsetting can cause missing characters.** If a subset excludes characters that appear in user-generated content, dynamic text, or internationalised strings, those characters will fall back to a different font, causing visual inconsistency. Subsetting should be informed by real content and user language data, not only design mockups. +- **Font caching reduces per-session impact for returning users.** Optimisation has the greatest environmental benefit on first visits and cold caches. For products with high proportions of returning users, the marginal gain from further optimisation diminishes over time. ## References From 6d70fab6c9387b15f647d35fff28a77fee572ef0 Mon Sep 17 00:00:00 2001 From: Russell Trow Date: Thu, 18 Jun 2026 16:33:51 +0100 Subject: [PATCH 3/3] Revise typography document version and title Updated version to 1.0 and added published date. Revised title for consistency. Signed-off-by: Russell Trow --- ...t-selection.md => system-first-typography-user-needs.md} | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) rename docs/design/{optimise-web-font-loading-and-format-selection.md => system-first-typography-user-needs.md} (98%) diff --git a/docs/design/optimise-web-font-loading-and-format-selection.md b/docs/design/system-first-typography-user-needs.md similarity index 98% rename from docs/design/optimise-web-font-loading-and-format-selection.md rename to docs/design/system-first-typography-user-needs.md index 327d5234..f455b36f 100644 --- a/docs/design/optimise-web-font-loading-and-format-selection.md +++ b/docs/design/system-first-typography-user-needs.md @@ -1,14 +1,14 @@ --- -version: 0.2 +version: 1.0 submitted_by: Paula de Matos submitted_by_linkedin: https://www.linkedin.com/in/pauladematos/ -published_date: +published_date: 2026-06-18 category: Design tags: frontend, fonts, typography, design-system, accessibility, internationalisation, web-performance personas: Product Designer, UX Designer, Front End Engineer, Full Stack Engineer --- -# Choose typefaces appropriately and optimise +# Prioritise system-first typography selection based on user needs ## Description