/* ========================================================= TSCB UTILITY-SYSTEEM — typografie Onderdeel van het tscb-systeem, zie basis/kleur.css voor de kleur-bridge en het versie-/hergebruikbeleid. ========================================================= */ /* --------------------------------------------------------- METRIC-FALLBACK — voorkomt layout-shift zolang Fraunces nog laadt. Deze fallback-fonts krijgen size-adjust + ascent/ descent-override zó dat ze exact dezelfde ruimte innemen als Fraunces → de swap wordt onzichtbaar (geen verspringen). Waardes berekend (capsize-formule) uit de échte Fraunces- metrics (unitsPerEm 2000, ascent 1956, descent -510, xWidthAvg 928) t.o.v. de fallback. Georgia = Win/Mac, Times-klasse = Linux/rest; de browser pakt de eerste local() die bestaat. --------------------------------------------------------- */ @font-face { font-family: "Fraunces-fallback-georgia"; src: local("Georgia"); size-adjust: 105.70%; ascent-override: 92.52%; descent-override: 24.12%; line-gap-override: 0%; } @font-face { font-family: "Fraunces-fallback-times"; src: local("Times New Roman"), local("Times"), local("Liberation Serif"), local("Nimbus Roman"); size-adjust: 116.03%; ascent-override: 84.29%; descent-override: 21.98%; line-gap-override: 0%; } /* --------------------------------------------------------- NUNITO SANS — tekstfont, zelf gehost (fonts/nunito-sans/). Variabel: één bestand per stijl dekt alle gewichten. --------------------------------------------------------- */ @font-face { font-family: "Nunito Sans"; font-style: normal; font-weight: 200 1000; font-display: swap; src: url("../../fonts/nunito-sans/nunito-sans-normal-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Nunito Sans"; font-style: normal; font-weight: 200 1000; font-display: swap; src: url("../../fonts/nunito-sans/nunito-sans-normal-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Nunito Sans"; font-style: italic; font-weight: 200 1000; font-display: swap; src: url("../../fonts/nunito-sans/nunito-sans-italic-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Nunito Sans"; font-style: italic; font-weight: 200 1000; font-display: swap; src: url("../../fonts/nunito-sans/nunito-sans-italic-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { /* Typografie-schaal — fluid lettergroottes + regelhoogtes */ --tscb_text_xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.85rem); --tscb_text_s: clamp(0.875rem, 0.83rem + 0.2vw, 1rem); --tscb_text_m: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); --tscb_text_l: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); --tscb_text_xl: clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem); --tscb_text_2xl: clamp(2.25rem, 1.7rem + 2.4vw, 3rem); --tscb_text_3xl: clamp(3rem, 2rem + 4vw, 4.5rem); --tscb_leading: 1.5; /* lopende tekst */ --tscb_leading_tight: 1.15; /* koppen */ /* Font-family — tekst Nunito Sans (thema), koppen Fraunces (Custom Font Manager) */ --tscb_font_body: "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --tscb_font_heading: "Fraunces", "Fraunces-fallback-georgia", "Fraunces-fallback-times", serif; } /* --------------------------------------------------------- 2. FONT-FAMILY — tekst Nunito Sans 400 / koppen Fraunces 600 body erft door naar p, span, li enz.; koppen (ook .brxe-heading met afwijkende tag) krijgen het zwaardere gewicht. --------------------------------------------------------- */ body { font-family: var(--tscb_font_body); font-weight: 400; } h1, h2, h3, h4, h5, h6, .brxe-heading { font-family: var(--tscb_font_heading); font-weight: 600; } /* Koppen vanaf h2 een tikje lichter dan de h1. Die h1 opent de pagina en is het enige niveau dat er echt uit mag springen, dus die staat op de volle koptekstkleur. Het is KLEUR en geen gewicht. Van Fraunces staan alleen 400 en 600 als echte snede op de server; 600 naar 400 is geen tikje maar een sprong, en een tussenwaarde zou de browser zelf gaan verzinnen (synthetisch vet) — dat wordt op grote koppen meteen zichtbaar als vervorming. Beide niveaus lezen dezelfde --tscb_kopkleur uit basis/kleur.css, elk in z'n eigen menging met wit, zodat de koptekstkleur op één plek staat en de onderlinge verhouding vanzelf klopt als je hem verzet. Mengen met wit en niet met transparant, zodat er geen achtergrond doorheen schemert — de logo-lagen liggen achter de pagina. */ /* De h1 heeft als enige kop een eigen maat. De schaal hierboven is op een wortelgrootte van 16 px gerekend en die staat hier op 10, dus zelfs de bovenste stap blijft onder wat een openingskop hier nodig heeft. */ h1 { --tscb_h1_size: clamp(3.6rem, 2.6rem + 3vw, 5.4rem); /* Ruimer dan --tscb_leading_tight (1.15). Die maat is voor h2/h3; op deze grootte lopen twee regels daarmee tegen elkaar aan. */ --tscb_h1_leading: 1.25; font-size: var(--tscb_h1_size); line-height: var(--tscb_h1_leading); /* Een stap lichter dan h2-h6; zie basis/kleur.css. */ color: var(--tscb_kopkleur_licht); } h2, h3, h4, h5, h6 { color: var(--tscb_kopkleur_zacht); } /* --------------------------------------------------------- 3. TYPOGRAFIE — font-size + line-height Werkt op elk element: p, h1–h6, span, li, enz. --------------------------------------------------------- */ .tscb_text_xs { font-size: var(--_tscb_text, var(--tscb_text_xs)); line-height: var(--_tscb_leading, var(--tscb_leading)); } .tscb_text_s { font-size: var(--_tscb_text, var(--tscb_text_s)); line-height: var(--_tscb_leading, var(--tscb_leading)); } .tscb_text_m { font-size: var(--_tscb_text, var(--tscb_text_m)); line-height: var(--_tscb_leading, var(--tscb_leading)); } .tscb_text_l { font-size: var(--_tscb_text, var(--tscb_text_l)); line-height: var(--_tscb_leading, var(--tscb_leading_tight)); } .tscb_text_xl { font-size: var(--_tscb_text, var(--tscb_text_xl)); line-height: var(--_tscb_leading, var(--tscb_leading_tight)); } .tscb_text_2xl { font-size: var(--_tscb_text, var(--tscb_text_2xl)); line-height: var(--_tscb_leading, var(--tscb_leading_tight)); } .tscb_text_3xl { font-size: var(--_tscb_text, var(--tscb_text_3xl)); line-height: var(--_tscb_leading, var(--tscb_leading_tight)); }