/* * typography.css — font loading + type scale. * * Two font sources: * 1. Tektur (Google Fonts, variable) for display, headings, and the * wordmark. Loaded once in via (not @import) so the * browser can pre-connect and the font lands on the LCP path. * 2. The system stack for body — San Francisco on Apple, Segoe UI on * Windows, Roboto on Android, Inter on linux distros that ship it * (edge case). Zero network requests. * * Tektur's variable axes: wght (400-900), wdth (75-125). * Weight usage: wght 700 (Bold) on wordmark + display * wght 600 (SemiBold) on H1/H2 * wght 500 (Medium) on eyebrow labels * Width usage: default (100). We don't vary the width axis. */ /* --- Type scale tokens ------------------------------------------------ */ :root { --fs-display: clamp(64px, 14vw, 128px); /* VITAL wordmark hero */ --fs-h1: clamp(28px, 8vw, 56px); /* section headlines */ --fs-h2: clamp(22px, 3.5vw, 32px); /* sub-headlines */ --fs-body: clamp(15px, 1.3vw, 18px); /* body copy */ --fs-small: 13px; /* captions, meta */ --fs-micro: 11px; /* eyebrow labels, legal */ --lh-display: 1.0; --lh-heading: 1.15; --lh-body: 1.55; --tracking-display: -0.02em; /* tighten Tektur visually */ --tracking-heading: -0.01em; --tracking-eyebrow: 0.18em; /* wide for tracked-uppercase labels */ --tracking-wordmark: 0.22em; /* extra wide on the VITAL mark */ --font-display: "Tektur", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace; } /* --- Base element defaults ------------------------------------------- */ body { font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text); background: var(--bg); } h1, h2, h3, h4, h5, h6, .display { font-family: var(--font-display); line-height: var(--lh-heading); letter-spacing: var(--tracking-heading); font-weight: 600; font-variation-settings: "wght" 600; } /* --- Typographic utility classes ------------------------------------- */ .wordmark { font-family: var(--font-display); font-weight: 700; font-variation-settings: "wght" 700; font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--tracking-wordmark); color: var(--text); text-transform: uppercase; } .wordmark--sm { font-size: var(--fs-h2); letter-spacing: 0.16em; } .display { font-size: var(--fs-h1); font-weight: 700; font-variation-settings: "wght" 700; letter-spacing: var(--tracking-display); } .eyebrow { font-family: var(--font-display); font-weight: 500; font-variation-settings: "wght" 500; font-size: var(--fs-micro); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--accent); } .body-lg { font-size: var(--fs-body); color: var(--text-secondary); max-width: 65ch; } .body-sm { font-size: var(--fs-small); color: var(--text-secondary); max-width: 72ch; } .micro { font-size: var(--fs-micro); color: var(--text-tertiary); letter-spacing: 0.04em; }