Wiki typography system
TopicFrom the PointSav Documentation
Inter and Source Serif 4 type stack, heading scale, and spacing tokens for the PointSav wiki.
Wiki typography system
The 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 the platform token system following the 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.
[edit]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.
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).
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.
[edit]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 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%.
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.
[edit]Type scale
| Level | Token | rem | px (17 px base) | Use |
|---|---|---|---|---|
| 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 |
| 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 |
| 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.
[edit]Reading measure and line height
| Property | Value | Token |
|---|---|---|
| Measure (max-width) | 68 ch | --ps-wiki-measure |
| 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.
[edit]CSS tokens
All values are CSS custom properties defined on :root in dist/tokens.css:
--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-mono: ui-monospace, 'SFMono-Regular', 'Cascadia Code', 'Consolas',
'Liberation Mono', monospace;
--ps-wiki-font-size-base: 1.0625rem;
--ps-wiki-line-height-body: 1.6;
--ps-wiki-measure: 68ch;
--ps-wiki-text-h1: 2.25rem;
--ps-wiki-text-h2: 1.75rem;
--ps-wiki-text-h3: 1.375rem;
--ps-wiki-text-h4: 1.125rem;
/* Short-form aliases used by wiki templates */
--font-ui: var(--ps-wiki-font-ui);
--font-prose: var(--ps-wiki-font-prose);
--font-mono: var(--ps-wiki-font-mono);
--leading-body: 1.6;
--measure: 68ch;
--text-h1: var(--ps-wiki-text-h1);
--text-h2: var(--ps-wiki-text-h2);
--text-h3: var(--ps-wiki-text-h3);
--text-h4: var(--ps-wiki-text-h4);
[edit]See also
- wiki-component-library — the nine components that use this type stack
- 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