Diff: design-system/wiki-typography-system
From 3f1e0da to 3f1e0da
+0 / −0 lines
| Before | After |
|---|---|
| --- | --- |
| schema: foundry-doc-v1 | schema: foundry-doc-v1 |
| title: "Wiki typography system" | title: "Wiki typography system" |
| slug: wiki-typography-system | slug: wiki-typography-system |
| short_description: "Inter and Source Serif 4 type stack, heading scale, and spacing tokens for the PointSav wiki." | short_description: "Inter and Source Serif 4 type stack, heading scale, and spacing tokens for the PointSav wiki." |
| category: design-system | category: design-system |
| type: topic | type: topic |
| status: active | status: active |
| bcsc_class: public-disclosure-safe | bcsc_class: public-disclosure-safe |
| last_edited: 2026-06-01 | last_edited: 2026-06-01 |
| editor: pointsav-engineering | editor: pointsav-engineering |
| paired_with: wiki-typography-system.es.md | paired_with: wiki-typography-system.es.md |
| --- | --- |
| # Wiki typography system | # Wiki typography system |
| The [[app-mediakit-knowledge|PointSav wiki]]'s typographic system uses Inter for user interface elements and navigation, Source Serif 4 for body reading prose, and a system-provided monospace stack for code and technical notation, built on [[design-system-substrate|the platform token system]] following the [[design-primitive-vocabulary|primitive vocabulary conventions]]. This article explains the font choices, the heading scale, the spacing tokens, and how the system achieves broad linguistic coverage for bilingual (English/Spanish) content. | The [[app-mediakit-knowledge|PointSav wiki]]'s typographic system uses Inter for user interface elements and navigation, Source Serif 4 for body reading prose, and a system-provided monospace stack for code and technical notation, built on [[design-system-substrate|the platform token system]] following the [[design-primitive-vocabulary|primitive vocabulary conventions]]. This article explains the font choices, the heading scale, the spacing tokens, and how the system achieves broad linguistic coverage for bilingual (English/Spanish) content. |
| --- | --- |
| ## Font stack | ## Font stack |
| **User interface and headings:** Inter (variable font, weight axis 100–900). Inter is a community open-source typeface designed by Rasmus Andersson, published under the SIL Open Font License 1.1 (SIL OFL 1.1), which permits use, modification, and redistribution without restriction. Inter is a neo-grotesque designed specifically for screen readability, with high legibility at small sizes and clear differentiation between commonly confused glyphs (l, 1, I; O, 0). It carries no corporate brand association and is the modern UI workhorse across the design-system field. | **User interface and headings:** Inter (variable font, weight axis 100–900). Inter is a community open-source typeface designed by Rasmus Andersson, published under the SIL Open Font License 1.1 (SIL OFL 1.1), which permits use, modification, and redistribution without restriction. Inter is a neo-grotesque designed specifically for screen readability, with high legibility at small sizes and clear differentiation between commonly confused glyphs (l, 1, I; O, 0). It carries no corporate brand association and is the modern UI workhorse across the design-system field. |
| **Body reading prose:** Source Serif 4 (variable font, weight axis 200–900). Source Serif 4 is Adobe's open-source text typeface, published under the SIL Open Font License 1.1. It provides comfortable reading at a 68-character measure with slightly higher stroke contrast than Inter, which aids eye-tracking across long prose lines. | **Body reading prose:** Source Serif 4 (variable font, weight axis 200–900). Source Serif 4 is Adobe's open-source text typeface, published under the SIL Open Font License 1.1. It provides comfortable reading at a 68-character measure with slightly higher stroke contrast than Inter, which aids eye-tracking across long prose lines. |
| **Code and technical notation:** System-provided monospace stack — `ui-monospace`, `SFMono-Regular`, `Cascadia Code`, `Consolas`, `Liberation Mono`. No custom font file is loaded for code. The system stack covers all major platforms with zero additional network round-trip. Used for inline `code`, code blocks, command-line examples, and metadata fields (dates, identifiers). | **Code and technical notation:** System-provided monospace stack — `ui-monospace`, `SFMono-Regular`, `Cascadia Code`, `Consolas`, `Liberation Mono`. No custom font file is loaded for code. The system stack covers all major platforms with zero additional network round-trip. Used for inline `code`, code blocks, command-line examples, and metadata fields (dates, identifiers). |
| **Fallback chains:** -apple-system, BlinkMacSystemFont, Segoe UI, Roboto (system UI sans-serif) for UI contexts before Inter loads; Georgia, Times New Roman (system serif) for prose contexts before Source Serif 4 loads. | **Fallback chains:** -apple-system, BlinkMacSystemFont, Segoe UI, Roboto (system UI sans-serif) for UI contexts before Inter loads; Georgia, Times New Roman (system serif) for prose contexts before Source Serif 4 loads. |
| --- | --- |
| ## Delivery | ## Delivery |
| Inter and Source Serif 4 are available through Google Fonts and direct download from their respective repositories. Both ship variable font files covering the full weight axis — a single variable file replaces multiple static-weight files, reducing total payload. | Inter and Source Serif 4 are available through Google Fonts and direct download from their respective repositories. Both ship variable font files covering the full weight axis — a single variable file replaces multiple static-weight files, reducing total payload. |
| - **Inter variable** (`inter-var.woff2`) — Latin subset approximately 100–130 KB; the latin-ext subset, required for Spanish bilingual content, adds approximately 15–20%. | - **Inter variable** (`inter-var.woff2`) — Latin subset approximately 100–130 KB; the latin-ext subset, required for Spanish bilingual content, adds approximately 15–20%. |
| - **Source Serif 4 variable** (`SourceSerif4Variable-Roman.woff2`) — Latin subset approximately 80–100 KB; latin-ext adds approximately 10–20%. | - **Source Serif 4 variable** (`SourceSerif4Variable-Roman.woff2`) — Latin subset approximately 80–100 KB; latin-ext adds approximately 10–20%. |
| **Self-hosting** from the deployment's `/static/fonts/` directory is the preferred delivery method. No requests reach external font CDNs, which protects reader privacy. | **Self-hosting** from the deployment's `/static/fonts/` directory is the preferred delivery method. No requests reach external font CDNs, which protects reader privacy. |
| **`font-display: swap`** prevents invisible-text flash during font load. The fallback system font renders immediately; Inter and Source Serif 4 swap in when their downloads complete. For a text-heavy wiki, immediate readability takes precedence over font-swap layout shift. | **`font-display: swap`** prevents invisible-text flash during font load. The fallback system font renders immediately; Inter and Source Serif 4 swap in when their downloads complete. For a text-heavy wiki, immediate readability takes precedence over font-swap layout shift. |
| --- | --- |
| ## Type scale | ## Type scale |
| | Level | Token | rem | px (17 px base) | Use | | | Level | Token | rem | px (17 px base) | Use | |
| |---|---|---|---|---| | |---|---|---|---|---| |
| | H1 | `--ps-wiki-text-h1` | 2.25 rem | 38 px | Article title | | | H1 | `--ps-wiki-text-h1` | 2.25 rem | 38 px | Article title | |
| | H2 | `--ps-wiki-text-h2` | 1.75 rem | 29.75 px | Major section | | | H2 | `--ps-wiki-text-h2` | 1.75 rem | 29.75 px | Major section | |
| | H3 | `--ps-wiki-text-h3` | 1.375 rem | 23.375 px | Subsection | | | H3 | `--ps-wiki-text-h3` | 1.375 rem | 23.375 px | Subsection | |
| | H4 | `--ps-wiki-text-h4` | 1.125 rem | 19.125 px | Minor heading | | | H4 | `--ps-wiki-text-h4` | 1.125 rem | 19.125 px | Minor heading | |
| | Body | `--ps-wiki-font-size-base` | 1.0625 rem | 17 px | Running prose | | | Body | `--ps-wiki-font-size-base` | 1.0625 rem | 17 px | Running prose | |
| **Base:** 106.25% root font size (17 px) — slightly larger than the 16 px browser default for improved readability at a 68-character measure on desktop. Headings and navigation labels render in Inter; body prose renders in Source Serif 4. | **Base:** 106.25% root font size (17 px) — slightly larger than the 16 px browser default for improved readability at a 68-character measure on desktop. Headings and navigation labels render in Inter; body prose renders in Source Serif 4. |
| --- | --- |
| ## Reading measure and line height | ## Reading measure and line height |
| | Property | Value | Token | | | Property | Value | Token | |
| |---|---|---| | |---|---|---| |
| | Measure (max-width) | 68 ch | `--ps-wiki-measure` | | | Measure (max-width) | 68 ch | `--ps-wiki-measure` | |
| | Body line-height | 1.6 | `--ps-wiki-line-height-body` | | | Body line-height | 1.6 | `--ps-wiki-line-height-body` | |
| 68 characters per line is the typographic optimum for sustained reading with a text-weight serifed face. A 1.6 line-height at 17 px base gives 27.2 px leading, matching the spacing rhythm of Wikipedia's body text. | 68 characters per line is the typographic optimum for sustained reading with a text-weight serifed face. A 1.6 line-height at 17 px base gives 27.2 px leading, matching the spacing rhythm of Wikipedia's body text. |
| --- | --- |
| ## CSS tokens | ## CSS tokens |
| All values are CSS custom properties defined on `:root` in `dist/tokens.css`: | All values are CSS custom properties defined on `:root` in `dist/tokens.css`: |
| ```css | ```css |
| --ps-wiki-font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; | --ps-wiki-font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; |
| --ps-wiki-font-prose: 'Source Serif 4', 'Georgia', 'Times New Roman', serif; | --ps-wiki-font-prose: 'Source Serif 4', 'Georgia', 'Times New Roman', serif; |
| --ps-wiki-font-mono: ui-monospace, 'SFMono-Regular', 'Cascadia Code', 'Consolas', | --ps-wiki-font-mono: ui-monospace, 'SFMono-Regular', 'Cascadia Code', 'Consolas', |
| 'Liberation Mono', monospace; | 'Liberation Mono', monospace; |
| --ps-wiki-font-size-base: 1.0625rem; | --ps-wiki-font-size-base: 1.0625rem; |
| --ps-wiki-line-height-body: 1.6; | --ps-wiki-line-height-body: 1.6; |
| --ps-wiki-measure: 68ch; | --ps-wiki-measure: 68ch; |
| --ps-wiki-text-h1: 2.25rem; | --ps-wiki-text-h1: 2.25rem; |
| --ps-wiki-text-h2: 1.75rem; | --ps-wiki-text-h2: 1.75rem; |
| --ps-wiki-text-h3: 1.375rem; | --ps-wiki-text-h3: 1.375rem; |
| --ps-wiki-text-h4: 1.125rem; | --ps-wiki-text-h4: 1.125rem; |
| /* Short-form aliases used by wiki templates */ | /* Short-form aliases used by wiki templates */ |
| --font-ui: var(--ps-wiki-font-ui); | --font-ui: var(--ps-wiki-font-ui); |
| --font-prose: var(--ps-wiki-font-prose); | --font-prose: var(--ps-wiki-font-prose); |
| --font-mono: var(--ps-wiki-font-mono); | --font-mono: var(--ps-wiki-font-mono); |
| --leading-body: 1.6; | --leading-body: 1.6; |
| --measure: 68ch; | --measure: 68ch; |
| --text-h1: var(--ps-wiki-text-h1); | --text-h1: var(--ps-wiki-text-h1); |
| --text-h2: var(--ps-wiki-text-h2); | --text-h2: var(--ps-wiki-text-h2); |
| --text-h3: var(--ps-wiki-text-h3); | --text-h3: var(--ps-wiki-text-h3); |
| --text-h4: var(--ps-wiki-text-h4); | --text-h4: var(--ps-wiki-text-h4); |
| ``` | ``` |
| --- | --- |
| ## See also | ## See also |
| - [[wiki-component-library]] — the nine components that use this type stack | - [[wiki-component-library]] — the nine components that use this type stack |
| - [[wiki-dark-mode]] — the colour scheme system that pairs with these typographic tokens | - [[wiki-dark-mode]] — the colour scheme system that pairs with these typographic tokens |
| - [[design-system-substrate]] — the token vault where font stack and scale variables are defined | - [[design-system-substrate]] — the token vault where font stack and scale variables are defined |