CSS Lettertype

Het kiezen van het juiste lettertype voor je website is belangrijk!

Lettertypekeuze is belangrijk

Het kiezen van de juiste lettertype heeft een aanzienlijke invloed op de gebruikerservaring van de website.

De juiste lettertype kan een krachtig merkbeeld voor je merk creëren.

Het is belangrijk om een leesbare lettertype te gebruiken. Een lettertype voegt waarde toe aan je tekst. Het kiezen van de juiste kleur en tekstgrootte voor het lettertype is ook belangrijk.

Algemene lettertypefamilies

In CSS zijn er vijf algemene lettertypefamilies:

  • Serif lettertype (Serif) - er is een kleine streep aan de rand van elke letter. Ze creëren een vormelijke en elegante uitstraling.
  • Sans-serif lettertype (Sans-serif) - de letterlijnen zijn eenvoudig (zonder kleine strepen). Ze creëren een modern en eenvoudig uiterlijk.
  • Kolomlettertype (Monospace) - hier hebben alle letters dezelfde vaste breedte. Ze creëren een mechanische uitstraling.
  • Kalligrafische lettertype (Cursive) - imiteert de schrijfhand van de mens.
  • Fantasy-lettertype (Fantasy) - is een decoratieve/leuke lettertype.

Alle verschillende lettertype-namen behoren tot één van de vijf algemene lettertype-series.

Het verschil tussen Serif en Sans-serif lettertypen

Serif tegen Sans-serif

Tip:Op het computerscherm wordt de sans-serif lettertype als gemakkelijker leesbaar beschouwd dan de serif lettertype.

Enkele voorbeelden van lettertypen

Algemene lettertypefamilies Voorbeeld van lettertype-namen
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

Eigenschap font-family van CSS

In CSS gebruiken we de eigenschap font-family om het lettertype van de tekst te definiëren.

De eigenschap font-family moet meerdere lettertype-namen bevatten als 'reserve' systeem om de maximale compatibiliteit tussen browsers/operating systems te waarborgen. Begin met het lettertype dat je nodig hebt en eindig met de algemene reeks (als er geen andere beschikbare lettertypen zijn, laat de browser kiezen voor een vergelijkbare lettertype in de algemene reeks). Lettertype-namen moeten gescheiden worden door komma's.

Opmerking:Als de naam van het lettertype meer dan één woord bevat, moet deze worden afgesloten met aanhalingstekens, bijvoorbeeld: "Times New Roman".

Voorbeeld

Definieer verschillende lettertypen voor drie paragrafen:

.p1 {
  font-family: "Times New Roman", Times, serif;
{}
.p2 {
  font-family: Arial, Helvetica, sans-serif;
{}
.p3 {
  font-family: "Lucida Console", "Courier New", monospace;
{}

Probeer het zelf