CSS -lettertypen
Het kiezen van het juiste lettertype voor je website is belangrijk!
Lettertypeselectie is belangrijk
Het kiezen van het juiste lettertype heeft een enorme impact op hoe de lezers een website ervaren.
Het juiste lettertype kan een sterke identiteit voor uw merk creëren.
Het is belangrijk om een lettertype te gebruiken dat gemakkelijk te lezen is. Het lettertype voegt waarde toe aan uw tekst. Het is ook belangrijk om de juiste kleur en tekstgrootte voor het lettertype te kiezen.
Generieke lettertypefamilies
In CSS zijn er vijf generieke lettertypefamilies:
- Serif- lettertypen hebben een kleine lijn aan de randen van elke letter. Ze creëren een gevoel van formaliteit en elegantie.
- Sans-serif- lettertypen hebben strakke lijnen (geen kleine pennenstreken). Ze creëren een moderne en minimalistische look.
- Monospace -lettertypen - hier hebben alle letters dezelfde vaste breedte. Ze creëren een mechanische look.
- Cursieve lettertypen imiteren menselijk handschrift.
- Fantasielettertypen zijn decoratieve/speelse lettertypen.
Alle verschillende lettertypenamen behoren tot een van de generieke lettertypefamilies.
Verschil tussen Serif- en Sans-serif-lettertypen
Opmerking: op computerschermen worden schreefloze lettertypen als gemakkelijker te lezen beschouwd dan serif-lettertypen.
Enkele lettertypevoorbeelden
| Generic Font Family | Examples of Font Names |
|---|---|
| Serif | Times New Roman Georgia Garamond |
| Sans-serif | Arial Verdana Helvetica |
| Monospace | Courier New Lucida Console Monaco |
| Cursive | Brush Script MT Lucida Handwriting |
| Fantasy | Copperplate Papyrus |
De eigenschap CSS-lettertypefamilie
In CSS gebruiken we de font-familyeigenschap om het lettertype van een tekst te specificeren.
Opmerking : als de naam van het lettertype uit meer dan één woord bestaat, moet deze tussen aanhalingstekens staan, zoals: "Times New Roman".
Tip: de font-familyeigenschap moet verschillende lettertypenamen bevatten als een "terugval"-systeem, om maximale compatibiliteit tussen browsers/besturingssystemen te garanderen. Begin met het gewenste lettertype en eindig met een generieke familie (zodat de browser een soortgelijk lettertype in de generieke familie kan kiezen, als er geen andere lettertypen beschikbaar zijn). De namen van de lettertypen moeten worden gescheiden door een komma. Lees meer over fallback-lettertypen in het volgende hoofdstuk .
Voorbeeld
Specificeer enkele verschillende lettertypen voor drie alinea's:
.p1 {
font-family: "Times New Roman", Times, serif;
}
.p2 {
font-family: Arial, Helvetica, sans-serif;
}
.p3 {
font-family: "Lucida Console", "Courier New", monospace;
}