Les 2: Fonts, lettergrootte en stijl

Er zijn drie soorten lettertypes die je gebruikt

  1. Met schreef: sierlijke letters, mooi als kopje of als header. Dit lettertype lees op papier het lekkerst, niet op het scherm.

  2. Zonder schreef: strakke letters, lezen het lekkerste op het scherm. Prima voor tekst.

  3. 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.

Voorbeelden: Dit is schreef Dit is schreefloos Dit is monospace

h1 {
  /* Met schreef */
  font-family: Georgia;
} 

p {
  /* Zonder schreef */
  font-family: Verdana;
} 

h2 {
  /* Monospace */
  font-family: Courier;
}

Je kunt ook meerdere lettertypes in één keer instellen.

De browser probeert eerst Verdana te vinden. Als dat niet bestaat dan probeert hij Geneva te vinden enzovoort.

Niet op ieder besturingssysteem bestaan dezelfde lettertypes.

h3 {
  /* Dit is commentaar in CSS! */
  /* h3 krijgt een schreefloos lettertype */
  font-family: Verdana, Geneva, Arial, sans-serif;
}

Cascading Style Sheet betekent dat een stijl ook toegepast wordt op 'kinderelementen'.

Hiernaast zie je een <h1>-element in de <body> staan. <h1> is dan een kind van <body> en krijgt (erft) dezelfde stijl.

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 ander font geven door dat in je CSS aan te geven.

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)

Dikgedrukte tekst, of juist niet dikgedrukt.

h1 {
  font-weight: normal;
}

Opdracht

[1] Ga verder met het bestand uit de vorige leskaart. Pas bovenstaande font-opties toe op elementen in je pagina. Probeer ze allemaal uit op verschillende HTML-elementen.

[2] Maak de opdracht op repl.it.

PreviousLes 1: CSS koppelen aan je HTML-paginaNextLes 3: Kleuren en achtergrondplaatje

Last updated