/* * Typography module: the only production file that names a typeface. * * Interface (see documents/design/_typography.md): * --tmt-font-ui / .tmt-font-ui all sans text: navigation, controls, tables, cards, charts, titles, headings * --tmt-font-reading / .tmt-font-reading reading copy: body default, call-outs, help, popovers, wordmark * --tmt-font-mono / .tmt-font-mono file paths, IDs, code * TmtTypography.chartFont() / .fontStack() (static/js/typography.js) for charts; * both take (token?, element?), element defaulting to * page_hero() (templates/components/macros.html) for every page title * * Scheme: Geist for the interface, the trackmytrail serif for reading copy. * * Defaults: body text is reading copy (style.css body rule), .tailwind-scope is * interface text (navigation.css), and every heading is interface text (below). * Only the sidebar and mobile wordmarks, which are spans, stay serif. * * Weights: 400, 500, 600 and 700 only (plan D-16). The Geist files contain * exactly that range and the serif has 400, 600 and 700 cuts, so every weight * renders from a real file. Serif text asking for 500 renders 400. Never use * an in-between weight (550, 650, 750) or a keyword (normal, bold). * * Everything else here is implementation. Callers choose a role, never a face. * The --tmt-face-* tokens are private; tests/test_typography_tokens.py fails on * any use outside this file. To change a typeface, edit its --tmt-face-* token * (and its @font-face rule) here; nothing else changes. */ /* Geist, trimmed from the official variable files to weights 400-700 (D-5). */ @font-face { font-family: 'Geist'; src: url('/static/fonts/geist/Geist-400-700.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Geist'; src: url('/static/fonts/geist/Geist-Italic-400-700.woff2') format('woff2'); font-weight: 400 700; font-style: italic; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { /* Private faces. Change the scheme here, nowhere else. */ --tmt-face-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --tmt-face-serif: 'trackmytrail', -apple-system, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue; --tmt-face-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace; /* Interface: the three roles. */ --tmt-font-ui: var(--tmt-face-sans); --tmt-font-reading: var(--tmt-face-serif); --tmt-font-mono: var(--tmt-face-mono); } /* Never fake bold or italic: every weight comes from a real file (REQ-16). */ html { font-synthesis: none; } /* Role classes. A role class is the most explicit face choice an element can make, so it wins over component defaults such as .call-out's reading face, whatever order the stylesheets load in. Descendants still inherit it. */ .tmt-font-ui { font-family: var(--tmt-font-ui) !important; } .tmt-font-reading { font-family: var(--tmt-font-reading) !important; } .tmt-font-mono { font-family: var(--tmt-font-mono) !important; } /* Headings, modal titles and popup titles are interface text (plan Step 8). Without this they inherit the body's reading face, so a new heading outside .tailwind-scope would silently render in the serif. A class on the heading (or a stylesheet that names the heading) still chooses another role. */ h1, h2, h3, h4, h5, h6 { font-family: var(--tmt-font-ui); }