/* ============================================================================= Reference site — self-hosted fonts ============================================================================= This file is NOT part of DDS. DDS ships no font binaries: its typography tokens name a family and fall through to the platform UI font, so a product carries no font weight and no licence obligation it did not ask for. See docs/typography.md. The reference site is a product that consumes Dessau, and it wants the full typographic identity — so it does what Dessau recommends a product does, and serves as the worked example of that recipe. ----------------------------------------------------------------------------- The recipe, as actually applied here ----------------------------------------------------------------------------- 1. VARIABLE fonts, as WOFF2. One file per family covers every weight, so three files replace what would otherwise be nine or more, and WOFF2 is the only format worth serving — every browser that supports variable fonts supports it, and nothing else comes close on size. 2. SELF-HOSTED, never a third-party CDN. A CDN reference leaks every reader's IP address to another party and puts a third-party connection on the critical path. Same-origin removes both. 3. `font-display: swap`. Text renders immediately in the fallback and swaps when the font arrives. Never `block`: invisible text is worse than briefly different text. 4. The fallback stack is KEPT. The `--dds-font-*` tokens already list it and are not reduced to a single family here — a failed font request must degrade, not blank the page. 5. SUBSET to Latin and Latin Extended-A/-B, and `unicode-range` declaring the same. That covers every Latin-script language in Europe. The two do different jobs: the subset decides what is in the file, the `unicode-range` lets the browser skip the request entirely for a page that needs none of it. 6. The OFL notice travels with the files (`OFL-*.txt` in this directory). The licence requires it, and "we linked to it" is not the same thing. ----------------------------------------------------------------------------- How these files were produced ----------------------------------------------------------------------------- The Google Fonts source repository publishes TTF. One command per face, run by hand — the tooling is not a dependency of this repository and is not needed to use it: pyftsubset Inter-Variable.ttf \ --output-file=Inter-Variable-latin-ext.woff2 --flavor=woff2 \ --unicodes="U+0000-00FF,U+0100-024F,U+2000-206F,U+20A0-20BF,U+2122,U+2212" \ --layout-features+="tnum,pnum,lnum,onum,zero,frac,cv05,ss03" 1200 kB of TTF became 194 kB of WOFF2, and the variable axes survive intact. The `--layout-features` list is the part that is easy to get wrong. A subsetter keeps a default set of OpenType features and drops the rest, and `tnum`, `cv05` and `ss03` are not in that default set — but DDS uses all three (see `typography.css` and `base.css`). Dropped, the tables lose their tabular figures and nothing anywhere reports an error. Whatever a stylesheet asks for by name has to be named here too. ============================================================================= */ /* The Latin coverage this project needs: Basic Latin, Latin-1 Supplement, Latin Extended-A and -B, general punctuation and currency symbols. Written out per face rather than shared, because `unicode-range` cannot be a variable. */ /* --------------------------------------------------------------- body / UI */ @font-face { font-family: "Inter"; src: url("fonts/Inter-Variable-latin-ext.woff2") format("woff2"); /* The whole axis, because it is one variable file. */ font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0100-024F, U+2000-206F, U+20A0-20BF, U+2122, U+2212; } /* ------------------------------------------------------------------ display */ @font-face { font-family: "Space Grotesk"; src: url("fonts/SpaceGrotesk-Variable-latin-ext.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0100-024F, U+2000-206F, U+20A0-20BF, U+2122, U+2212; } /* --------------------------------------------------------------- monospace */ @font-face { font-family: "JetBrains Mono"; src: url("fonts/JetBrainsMono-Variable-latin-ext.woff2") format("woff2"); font-weight: 100 800; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0100-024F, U+2000-206F, U+20A0-20BF, U+2122, U+2212; } /* ----------------------------------------------------------------------------- Metric-matched fallback ----------------------------------------------------------------------------- Reduces the layout shift when the real face swaps in, by adjusting the fallback's metrics to match the real face's. Without it, text visibly reflows on font load — which is a Cumulative Layout Shift problem and, more simply, annoying to read. Originally done for the body face only, on the reasoning that it renders first and everywhere so its shift is the one that's actually noticeable. Measured rather than assumed once a consuming product asked why the display face — Space Grotesk, `.dds-display`, the largest heading size in the system, and literally the first thing on this page's own hero — did not get the same treatment: at 48px bold, a representative headline came out 7.5% wider in Space Grotesk than in the `system-ui` fallback (`ctx.measureText`, not eyeballed) — enough to move a line break, not a sub-pixel nudge. "Renders first and everywhere" turned out to describe the hero heading more precisely than it described body text (#124). JetBrains Mono stays unmatched: it renders inline, smaller, and never as the first or largest thing on a page — the original reasoning actually holds there, checked rather than assumed by extension from the other two. Space Grotesk's `size-adjust` went through three attempts before the real variable surfaced. Cap-height ratio (`sCapHeight / unitsPerEm`, from the font file, against Helvetica/Arial's own published cap-height) gave 10.6% width error against 7.0% unmatched — cap-height governs visual weight, and this is about advance width, a related but different property. A glyph-width ratio averaged across eight representative heading strings (101.4%) still measured 5–8% error once shipped. Both attempts compared real Space Grotesk against `"Helvetica Neue"` queried **by family name directly** — which is not what the fallback stack actually renders. Wrapping `local("Helvetica Neue")` in an `@font-face` and asking that wrapper for `bold` resolves, in Chromium, to a measurably narrower face than asking `"Helvetica Neue"` for `bold` directly (633px vs 675px on a 48px sample — a 6% gap, present with every descriptor stripped out, so it is not `size-adjust` or the overrides causing it). A fallback stack never reaches the family name directly; it only ever reaches it through the `@font-face` wrapper, so that was the wrong baseline both times, independent of which ratio fed `size-adjust`. Re-measured against the wrapper itself — the same eight-string method, same page, `"Space Grotesk"` vs a same-page `@font-face { src: local("Helvetica Neue"), … }` reference with no other descriptors — the average ratio is 108%, not 101%. That number is not a coincidence: it lands within a point of Inter's own long-shipped 107%, which is the same correction for the same Chromium behaviour, arrived at for Inter long before this ticket existed and never previously explained. `ascent-override`/`descent-override` come from the real face's own `sTypoAscender`/`sTypoDescender` ratios (read from the font file: Inter 96.9%/24.1%, Space Grotesk 98.4%/29.2%), divided by `size-adjust` — the override percentages apply to the fallback's ALREADY-scaled em, not its raw one. Checked against Inter's own shipped values first: 96.9%/24.1% divided by 107% reproduces 90%/22.5%, matching the shipped 90%/22% closely enough to trust the formula; Inter's 107% itself predates this entry and was not derived by it. */ @font-face { font-family: "Inter Fallback"; src: local("Helvetica Neue"), local("Arial"), local("Liberation Sans"); /* Inter runs optically smaller than Helvetica at the same size. */ size-adjust: 107%; ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; } @font-face { font-family: "Space Grotesk Fallback"; src: local("Helvetica Neue"), local("Arial"), local("Liberation Sans"); size-adjust: 108%; ascent-override: 91%; descent-override: 27%; line-gap-override: 0%; } /* Slot each metric-matched fallback in directly after its real face. The rest of each stack stays exactly as the tokens define it. */ :root { --dds-font-body: Inter, "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; --dds-font-display: "Space Grotesk", "Space Grotesk Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }