spb/ultra-sharp-agent-skills Public

1<!--2Author: Simon-Pierre Boucher3Contact: contact@spboucher.ai4-->56# Patterns — Typography Systems78## Contents9- Type-scale token sheet10- @font-face + preload boilerplate11- Metric-matched fallback (CLS-safe)12- Variable font setup13- Prose defaults14- Pairing shortlists by genre15- Gotchas1617## Type-scale token sheet1819```css20:root {21  --font-display: "Fraunces", var(--font-fallback-serif);22  --font-body: "Inter", var(--font-fallback-sans);23  --font-fallback-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;24  --font-fallback-serif: Georgia, "Times New Roman", serif;2526  /* Ratio 1.25 (major third); h1 fluid, the rest step down */27  --text-sm:  0.875rem;28  --text-base: 1rem;                                  /* never below 16px */29  --text-lg:  1.25rem;30  --text-xl:  1.563rem;31  --text-2xl: clamp(1.75rem, 1.3rem + 1.8vw, 1.953rem);32  --text-3xl: clamp(2rem, 1.3rem + 3vw, 2.441rem);3334  --leading-body: 1.6;35  --leading-heading: 1.15;36}3738h1 { font: 700 var(--text-3xl)/var(--leading-heading) var(--font-display); }39h2 { font: 700 var(--text-2xl)/var(--leading-heading) var(--font-display); }40h3 { font: 600 var(--text-xl)/1.25 var(--font-body); }41body { font: 400 var(--text-base)/var(--leading-body) var(--font-body); }42```4344## @font-face + preload boilerplate4546```html47<!-- Preload ONLY above-the-fold weights (usually body 400 + display 700) -->48<link rel="preload" href="/fonts/inter-400.woff2" as="font" type="font/woff2" crossorigin>49<link rel="preload" href="/fonts/fraunces-700.woff2" as="font" type="font/woff2" crossorigin>50```5152```css53@font-face {54  font-family: "Inter";55  src: url("/fonts/inter-400.woff2") format("woff2");56  font-weight: 400;57  font-style: normal;58  font-display: swap;          /* text visible immediately in fallback */59}60```6162## Metric-matched fallback (CLS-safe)6364```css65/* Tune size-adjust until fallback and web font occupy the same space.66   Tools output these (e.g. fontaine, capsize); values below fit Inter/Arial. */67@font-face {68  font-family: "Inter-fallback";69  src: local("Arial");70  size-adjust: 107%;71  ascent-override: 90%;72  descent-override: 22.5%;73  line-gap-override: 0%;74}75body { font-family: "Inter", "Inter-fallback", sans-serif; }76```7778## Variable font setup7980```css81@font-face {82  font-family: "Fraunces";83  src: url("/fonts/fraunces-vf.woff2") format("woff2-variations");84  font-weight: 300 900;        /* the range the file supports */85  font-display: swap;86}87.hero-title { font-variation-settings: "opsz" 72; font-weight: 640; }88```8990## Prose defaults9192```css93.prose {94  max-width: 65ch;             /* measure: 45–75ch */95  text-wrap: pretty;           /* fewer orphans where supported */96}97.prose h1, .prose h2 { text-wrap: balance; }98table.data { font-variant-numeric: tabular-nums; }99```100101## Pairing shortlists by genre102103Starting points — always re-justify against the brief (rule 1), never copy blindly:104105| Brief genre | Display | Body |106|---|---|---|107| Fintech / data product | IBM Plex Sans | IBM Plex Sans + Plex Mono (figures) |108| Editorial / longform | Fraunces or Newsreader | Source Serif 4 |109| Developer tool | Space Grotesk | Inter + JetBrains Mono (code) |110| Fashion / portfolio | Canela-like high-contrast serif | Neue Haas–style grotesque |111| Government / civic | Public Sans | Public Sans |112| Playful consumer | Bricolage Grotesque | Nunito Sans |113114Licensing quick check: Google Fonts and Fontshare = free incl. commercial;115foundry faces (Canela, Neue Haas) require a license — confirm before specifying.116117## Gotchas118119- **`font-display: swap` trades FOIT for layout shift** — pair it with metric-matched fallbacks or CLS suffers; `optional` is the strictest-CLS choice for non-brand fonts.120- **Preloading every weight defeats the purpose** — each preload competes with LCP-critical resources; 2 files max.121- **`vw`-only font sizes break pinch-zoom and text-only zoom** — clamp() with a rem term keeps zoom working.122- **`ch` unit varies per font** — 65ch in the fallback ≠ 65ch in the web font; check measure after fonts load.123- **Google Fonts CSS API adds a render-blocking third-party hop** — self-host the woff2 files instead.124- **Faux bold/italic:** if a weight/style file isn't declared, browsers synthesize it (badly) — declare every weight you use, or use a variable font.125- **Line-height with units inherits computed pixels** — always unitless (`1.6`, not `1.6em`).126