We gaan dieper in op de belangrijkste opmaakeigenschappen. U leert werken met eigenschappen voor het lettertype, tekst, kleur en achtergronden.

Eigenschappen voor lettertypen:

  • font-family = lettertype
  • font-size = lettergrootte
  • font-style = letterstijl
  • font-variant = lettertype
  • font-weight = lettergewicht

1. Lettertype

Het lettertype wordt aangegeven met de eigenschap font-family. De volgende waarden zijn mogelijk:

  • lettertype naam
  • generieke naam
  • inherit
    Deze waarde komt voor bij veel eigenschappen. Het betekent steeds hetzelfde: erf de waarde van het ouderelement. Voorbeelden:<li> behoort tot het ouderelement <ul>
p {
font-family: "Times New Roman", Times, serif;
}

Tip: een lettertypenaam die uit meer woorden bestaat, moet altijd tussenaanhalingstekens staan zoals hierboven "Times New Roman").

Er zijn vijf generieke font-families:

  • serif: een proportioneel lettertype (dat wil zeggen dat de breedte zich aanpast aan de letter: een i neemt dus minder ruimte in beslag dan een m) met schreef. Bijvoorbeeld: Times New Roman, Times en Garamond.
  • sans-serif : een proportioneel lettertype zonder schreef. Bijvoorbeeld:Arial, Futura, Helvetica en Verdana.
  • monospace: een niet-proportioneel lettertype (dat wil zeggen dat elke letter evenveel ruimte in beslag neemt)? Bijvoorbeeld: Courler new en Courler;
  • cursive: een lettertype dathandgeschreven tekst probeert nate bootsen. Bijvoorbeeld: brush Script, Comic Sans MS, Flemish Script en Zapf Chancery;
  • fantasy: een lettertype datniet onderéén van de andere generieke font-families valt. Bijvoorbeeld:Allegro en Western.

Een browser probeert altijd het lettertypen te gebruiken die in het stijlblad is aangegeven. Als alle pogingen falen, wordt het een systeem lettertype die op de bezoeker zijn pc staat.

De grootte van het lettertype wordt ingesteld met de eigenschap font-size.

De CSS -specificatie geeft de volgende waarden voor font-size:

  • een absolute grootte
  • een relatieve grootte
  • een lengte (px, pt, em)
  • een percentage

Absolute grootte is handig als de fysieke grootte van de uitvoer bekend is

  • Stelt de tekst in op een opgegeven grootte.
  • Staat niet toe dat een gebruiker de tekstgrootte in alle browsers wijzigt.

Relatieve grootte

  • Stelt de grootte in ten opzichte van omliggende elementen.
  • Hiermee kan een gebruiker de tekstgrootte in browsers wijzigen.

Een lengte in em

Om gebruikers toe te staan de grootte van de tekst aan te passen (in het browsermenu), gebruiken veel ontwikkelaars em in plaats van pixels.

De em-maateenheid wordt aanbevolen door de W3C.

Als u geen lettergrootte opgeeft, is de standaardgrootte voor normale tekst, zoals alinea's, 16px (16px = 1em).

De grootte kan worden berekend van pixels tot em met behulp van deze formule: pixels / 16 = em

h1 {
font-size: 2.5em; /* 40px/16 = 2.5em */
}
	

Met font-style bepaalt u of tekst normaal, cursief of schuin wordt weergegeven.

Mogelijke waarden zijn:

  • normal = standaard
  • italic
  • oblique

Het verschil tussen schuin (oblique) en cursief (italic) ziet er in de praktijk hetzelfde uit.

	.schuin {
font-style: italic;
}
	

Voor kleine hoofdletters gebruik je font-variant.

Mogelijke waarden zijn:

  • normal
  • small-caps

De voorbeeldstijlregel definieert kleine hoofdletters:

h1, h2, h3 {
font-variant: small-caps;
}

De eigenschap font-weight geeft het gewicht van een lettertype aan

p.normal {
font-weight: normal;
}
p.thick {
font-weight: bold;
}

Surft naar https://fonts.google.com. Kies een lettertype naar keuze, rechts kan je de categorieën (= familiesoorten) kiezen. Klik op het +-icoon. Onderaan rechts verschijnt een pop-upvenster, klik dit open. Selecteer de link en kopieer, plaats deze code binnen de <head> tag.

<link href="https://fonts.googleapis.com/css?family=Gochi+Hand"
rel="stylesheet">
h1 {
font-family: 'Gochi Hand', cursive;
}

Font .woff meeleveren

Wil je liever een eigen desktop font meesturen, gebruik dan een lettertype generator. Fontsquirrel.