From 2e6d374b4b4c0d2712d6ea9b766d2ace51e1b837 Mon Sep 17 00:00:00 2001 From: Mieszko Makuch Date: Thu, 3 Sep 2026 15:14:44 +0200 Subject: [PATCH] article headlines: --fs-h2 instead of --fs-h1 (long news titles filled the viewport at 56px; editorial 32-40px convention) --- DESIGN.md | 4 ++-- src/styles/global.css | 6 +++++- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/DESIGN.md b/DESIGN.md index cf6830c..c281ca5 100644 --- a/DESIGN.md +++ b/DESIGN.md @@ -39,8 +39,8 @@ Type scale — the ONLY font sizes in the codebase (no ad-hoc rem values): | (base) | 1rem | Body, line-height 1.5 (1.65 only on `.prose`; 1.55 `.standfirst`; 1.45 cards/footer) | | `--fs-l` | 1.125rem | Card titles, standfirst, panel titles, hero subtitle | | `--fs-xl` | 1.5rem | Prose h2, featured title, auth h1 | -| `--fs-h2` | clamp(1.75–2.5rem) | Section heads | -| `--fs-h1` | clamp(2.25–3.5rem) | Page/article headlines | +| `--fs-h2` | clamp(1.75–2.5rem) | Section heads, article headlines (news titles run long — full `--fs-h1` would fill the viewport) | +| `--fs-h1` | clamp(2.25–3.5rem) | Short page heads only ("News & Announcements") | | `--fs-display` | clamp(2.5–4.75rem) | Home hero only | Font tokens end with a generic (`sans-serif`); use them bare — diff --git a/src/styles/global.css b/src/styles/global.css index 6762d1f..051dcfc 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -515,7 +515,11 @@ span.page-step { color: var(--muted); } /* disabled end stop — non-interactive .article-layout { display: grid; grid-template-columns: minmax(0, 70ch); } .article { padding-block: var(--space-l) var(--space-xl); max-width: 70ch; } .article .back { color: var(--muted); font-size: var(--fs-s); } -.article h1 { color: var(--galaxy); font-size: var(--fs-h1); margin: 14px 0 10px; } +/* Article headlines use the SMALLER head token (--fs-h2, 28–40px), not + --fs-h1: news titles run long (10+ words) and at 56px a title fills the + viewport — editorial convention (Guardian/BBC/NYT ~32–40px). --fs-h1 stays + for short page heads ("News & Announcements"). */ +.article h1 { color: var(--galaxy); font-size: var(--fs-h2); margin: 14px 0 10px; } .article .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; color: var(--muted); font-size: var(--fs-s); margin-bottom: var(--space-l);