Spelen met fonts
Last updated
Was this helpful?
Last updated
Was this helpful?
Er zijn drie soorten lettertypes die je gebruikt
Met schreef: sierlijke letters, mooi als kopje of als header. Dit lettertype leest op papier het lekkerst, niet zo op het scherm.
Zonder schreef: strakke letters, lezen het lekkerste op het scherm. Prima voor tekst.
Monospace: voor letters die allemaal even groot zijn, Een i neemt evenveel ruimte in als een m, dit is wel eens handig als je wat wilt uitlijnen of benadrukken. Code is ook altijd weergegeven in monospaced (zoals in de donkerblauwe codeblokken in deze cursus en in Replit), zodat de code strakker onder elkaar staat.
Voorbeelden:
Bij het kiezen van een lettertypen ben je afhankelijk van wat er op de computer van de eindgebruiker aan lettertypen geïnstalleerd zijn. Dat verschilt per computer (of telefoon), dus je kunt er niet zomaar vanuit gaan dat een lettertype dat bij jou aanwezig is ook bij andere gebruikers beschikbaar is. (Verderop zien we nog hoe je hier iets aan kunt doen.)
Om dat te ondervangen kun je een lijstje met lettertypes opgeven. Hieronder probeert de browser eerst Verdana te vinden. Als dat niet bestaat dan probeert hij Geneva te vinden enzovoort. Als laatste staat het generieke lettertype "sans-serif". Dat betekent dat al hij alle voorgenoemde lettertypes niet heeft, hij in ieder geval een sans-serif (schreefloos) lettertype naar keuze moet nemen.
CSS staat voor Cascading Style Sheet. Een cascade is het Engelse woord voor waterval. Het heet zo, omdat het in css zo werkt dat een stijl ook toegepast wordt op 'kinderelementen'. (de waterval "loopt over" in de onderliggende elementen als het ware.)
Hieronder zie je een <h1>-element in de <body> staan. <h1> is dan een kind van <body> en krijgt (erft) dezelfde stijl als de <body>.
Het <p>-element erft ook de stijl van de <body>.
Je kunt <h1> een toch een ander font geven dan de body door een specifieke regel voor <h1> in de css op te nemen.
Het <h1>-element heeft een ander lettertype dan de <body>. Je ziet namelijk dat er een ander font is aangegeven. Het <p>-element heeft nog steeds hetzelfde lettertype als de <body>; Er is in de CSS geen ander lettertype gekozen.
In CSS kun je groottes op verschillende manieren aangeven. Hiernaast zie je lettergrootte in pixels.
Italic om tekst schuin te laten zien. Wil je niet meer schuin, gebruik je normal.
Gebruik hoofdletters, maar dan klein weergegeven.
Font-weight (bold, normal)
Dik gedrukte tekst, of juist niet dik gedrukt.
Niet verplicht, maar wel handig.
Hierboven bespraken we dat je afhankelijk bent van de lettertypes die aanwezig zijn op de computer van de eindgebruiker. Een aantal jaar geleden was dat ook echt zo. Tegenwoordig kun je via CSS ook zelf fonts toevoegen. Deze worden dan mee gedownload met de webpagina en vervolgens gebruikt om de pagina mee weer te geven.
Je kunt hiervoor font-bestanden uploaden (net als je met de plaatjes deed) eerder. Maar handiger is om een online dienst te gebruiken. Google fonts is hier erg handig voor. Je kunt online zoeken in veel verschillende fonts en er een (of meer) uitkiezen. Er wordt dan een extra css bestand voor je gegenereerd die je aan je html kunt toevoegen (dat kan gewoon naast het css bestand dat je al hebt) en dan wordt het font automatisch geïmporteerd.