Spelen met fonts
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:
h1 {
/* Met schreef */
font-family: Georgia;
}
p {
/* Zonder schreef */
font-family: Verdana;
}
h2 {
/* Monospace */
font-family: Courier;
}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.
h3 {
/* Dit is commentaar in CSS! */
/* h3 krijgt een schreefloos lettertype */
font-family: Verdana, Geneva, Arial, sans-serif;
}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>.
<body>
<h1>Dit is een hoofdstuk</h1>
<p>Met een mooie inhoud</p>
</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.
body {
font-family: Verdana, Geneva, Arial, sans-serif;
}
h1 {
text-align: center;
font-family: Georgia, "Times new Roman", serif;
}
p {
text-align: right;
}Font-size (lettergrootte)
In CSS kun je groottes op verschillende manieren aangeven. Hiernaast zie je lettergrootte in pixels.
p {
font-size: 12px; /* 12 pixels hoog*/
}Font-style (italic, oblique)
Italic om tekst schuin te laten zien. Wil je niet meer schuin, gebruik je normal.
h1 {
font-style: italic;
}Font-variant (kleinkapitaal: small-caps)
Gebruik hoofdletters, maar dan klein weergegeven.
p {
font-variant: small-caps;
}Font-weight (bold, normal)
Dik gedrukte tekst, of juist niet dik gedrukt.
h1 {
font-weight: normal;
}Extra: toch andere fonts gebruiken
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.
Last updated
Was this helpful?