/* =========================================================================== hsb-poppins.css — Poppins voor de lopende tekst =========================================================================== WAT DIT BESTAND DOET -------------------- Het zet Poppins als letter voor alles wat tekst is: alinea's, knoppen, labels, formuliervelden, lijsten, tabellen. WAT HET NIET AANRAAKT --------------------- De menubalk en de koppen. Die blijven precies zoals ze waren. - h1 tot en met h4 staan in site.css al op Museo700. Omdat daar een eigen font-family staat, erven die niets van de regel hieronder. - De menubalk zet dit bestand expliciet terug op de systeemletter, want die stond er nergens apart in en zou anders meeveranderen. OVER h5 EN h6 ------------- Die staan in site.css NIET op Museo. Ze erven nu dus Poppins, net als de rest van de tekst. Wil je ze toch in Museo, zet dan onderaan dit bestand: h5, h6, .h5, .h6 { font-family: "Museo700", sans-serif; } ZELF GEHOST, NIET VIA GOOGLE ---------------------------- De vijf bestanden staan in assets/fonts/. Er gaat dus geen enkel verzoek naar fonts.googleapis.com, en daarmee ook geen IP-adres van je bezoekers naar Google. Dat scheelt een AVG-discussie en een extra verbinding. Poppins staat onder de SIL Open Font License. De licentie hoort bij de bestanden te blijven: zie assets/fonts/OFL-Poppins.txt. Niet weghalen. VOLGORDE -------- Laad dit NA site.css. Anders wint de body-regel van site.css. =========================================================================== */ /* --------------------------------------------------------------------------- 1. De vijf snitten --------------------------------------------------------------------------- Vier gewichten plus twee cursieven: 400, 400 cursief, 600, 700 en 700 cursief. Dat is alles wat een B- en een I-knop nodig hebben. De cursieven zijn echte cursieve snitten, geen scheefgezette rechte letter. Zonder die bestanden kiept de browser de gewone letter 12 graden over, en dat ziet er bij een geometrische letter als Poppins slecht uit. font-display: swap betekent: laat de tekst meteen zien in de reserveletter en wissel om zodra Poppins binnen is. Zonder die regel blijft je tekst de eerste momenten onzichtbaar. Alle bestanden zijn teruggebracht tot latin en latin-ext. Daar zitten alle Nederlandse tekens in, inclusief ë, ï, é en het euroteken. Dat scheelt van 155 kB per snit naar ongeveer 10 kB. --------------------------------------------------------------------------- */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/poppins-400.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0100-024F, U+0259, U+1E00-1EFF, 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: 'Poppins'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/poppins-400i.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0100-024F, U+0259, U+1E00-1EFF, 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: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/poppins-600.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0100-024F, U+0259, U+1E00-1EFF, 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: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/poppins-700.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0100-024F, U+0259, U+1E00-1EFF, 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: 'Poppins'; font-style: italic; font-weight: 700; font-display: swap; src: url('../fonts/poppins-700i.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0100-024F, U+0259, U+1E00-1EFF, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* --------------------------------------------------------------------------- 2. De twee stapels --------------------------------------------------------------------------- Eén plek om aan te draaien. De reserveletters erachter zijn de letters die een bezoeker ziet in de halve seconde dat Poppins nog binnenkomt; die lijken er qua breedte genoeg op om de pagina niet te laten verspringen. --------------------------------------------------------------------------- */ :root { --hsb-tekst: 'Poppins', -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --hsb-menu: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } /* --------------------------------------------------------------------------- 3. De lopende tekst --------------------------------------------------------------------------- Knoppen en formuliervelden erven hun letter niet vanzelf van body: die gebruiken standaard de letter van het besturingssysteem. Vandaar de tweede regel, anders staat er straks Poppins op de pagina en iets anders in het formulier ernaast. --------------------------------------------------------------------------- */ body { font-family: var(--hsb-tekst); } button, input, select, textarea, .btn, .form-control, .form-select { font-family: inherit; } /* --------------------------------------------------------------------------- 4. De menubalk blijft zoals hij was --------------------------------------------------------------------------- #header is de balk uit navbar.php. Het woordmerk SprekersburO daarbinnen staat in Museo en moet dat blijven, dus die uitzondering staat erachter. --------------------------------------------------------------------------- */ #header, #header button, #header input, #header select { font-family: var(--hsb-menu); } #header .navbar-brand, #header .logo, #header .kop { font-family: "Museo700", sans-serif; } /* --------------------------------------------------------------------------- 5. Maatcorrectie --------------------------------------------------------------------------- Poppins heeft een lage x-hoogte: de kleine letters zijn klein ten opzichte van de hoofdletters. Op dezelfde px-maat leest Poppins daardoor kleiner dan de systeemletter die er stond, terwijl de regels juist langer worden. Deze twee regels zetten dat recht. Vind je het te groot, zet ze dan uit — dat is de enige regel in dit bestand die over smaak gaat en niet over techniek. --------------------------------------------------------------------------- */ body { font-size: 1.0625rem; /* 17 px in plaats van 16 */ line-height: 1.7; } @media (max-width: 575.98px) { body { font-size: 1rem; /* op een telefoon weer 16, anders wordt het log */ line-height: 1.65; } } /* --------------------------------------------------------------------------- h5 en h6 erbij: alle koppen Museo700 --------------------------------------------------------------------------- In site.css staan h1 tot en met h4 op Museo700. h5 en h6 staan daar niet bij, dus die erfden Poppins van de body-regel hierboven. Op een pagina met diepe koppen — de voorwaarden, de FAQ, een lang artikel — zag je daardoor halverwege het lettertype wisselen. Alle koppen staan nu in Museo700, de broodtekst in Poppins. Eén regel voor de koppen, één voor de rest, en geen uitzonderingen ertussen. De kleur en de regelafstand komen uit site.css en blijven zoals ze waren; hieronder staat alleen het lettertype. --------------------------------------------------------------------------- */ h5, h6, .h5, .h6 { font-family: "Museo700", sans-serif; }