Websites met stijl

15. Lettertypen

In dit hoofdstuk

In dit hoofdstuk bekijken we hoe je het gebruikte lettertype opgeeft, en de lettergrootte. In de loop van het volgende volgende hoofdstuk beginnen we daadwerkelijk met het werk van het stijlblad. We gaan dan de stijlregels van de body opstellen.

Maar we beginnen met de mogelijkheid om commentaar toe te voegen bij een stijlblad.

Commentaar

Alles wat in een stijlblad tussen /* en */ staat is commentaar. Het wordt door de browser overgeslagen.

h3 { display: none;}
/* h3 koppen worden niet weergegeven
Haal deze declaratie weg om de koppen zichtbaar te maken */

Letters in soorten

In lettertypen is de precieze vorm van de letters, cijfers, leestekens vastgelegd. Er zijn duizenden verschillende lettertypen. Als teksten er bij de ene website of krant anders uitzien dan bij een andere, dan komt dat door het gebruikte lettertype. Een lettertype bepaalt al meteen voor een deel de 'sfeer' van een artikel of website. Een verslag van een bokswedstrijd vraagt om een ander lettertype dan een wetenschappelijk artikel.

Lettertypen kunnen onderverdeeld worden in verschillende soorten.

Schreefletters en schreefloze letters

r is een duidelijk verschil tussen lettertypen met schreef (Eng: serif) en lettertypen zonder schreef (Eng: sans-serif). Schreven zijn de uitsteeksels aan de uiteinden van een letter, in de eerste letter van deze alinea in rood weergegeven.
Op computerschermen zijn schreefloze lettertypen meestal wat gemakkelijker leesbaar, is de huidige opvatting. Voorbeeld: een lettertype met schreef, een lettertype zonder schreef

Display letters

Titels en koppen worden meestal vet en wat groter weergegeven. Vaak wordt daarvoor een ander, wat sprekender lettertype gebruikt, een display letter.
Voorbeeld: Krantenkop

Handschrift

Voor informele brieven zijn er tegenwoordig allerlei handschriftlettertypen (handwriting).
Voorbeeld:

Proportioneel en monospace

Bij de meeste lettertypen nemen brede letters als de m en de w meer ruimte in dan smalle letters als de i en de l. We spreken dan van proportionele letters.

Op schrijfmachines nemen alle letters evenveel ruimte in. Zulke lettertypen worden monospace genoemd. Op websites worden monospace lettertypen gebruikt om typemachineschrift te suggereren en om stukken computercode weer te geven. Ook op deze website worden stukken html en css weergegeven met een monospace letter.
Voorbeeld: Monospace letters lijken op schrijfmachineschrift.

Websafe lettertypen

Voor de onderstaande zin heb ik het lettertype 'Crafty girls' gebruikt, een handschriftletterype.
Hi Dad, ik ben nu in aangekomen in Madrid.
Ik heb van die tekst op mijn beeldscherm een plaatje gemaakt. Dat ziet er zó uit:

Waarschijnlijk ziet de bovenste zin 'Hi Dad...' op jouw computer er niet zo uit als de zin in op het plaatje. Dat komt dan omdat jouw computer niet beschikt over het lettertype 'Crafty girls'. Als zo'n lettertype niet aanwezig is kiest de browser een andere letter. Daardoor kan de website er anders uitzien dan de bedoeling is.
Een plaatje van de tekst op de website zetten is bijna nooit een optie: daarop werken hyperlinks niet, en het is dan niet mogelijk om de tekst nog te veranderen.

Een oplossing is het gebruik van websafe fonts, webveilige lettertypen.
Als je een lijstje met fonts opgeeft, zoekt de browser het eerste font uit de lijst op dat beschikbaar is op die computer. De truc is om lijstjes te maken met populaire Windows fonts, populaire Apple fonts en populaire Linux fonts die veel op elkaar lijken. De kans is dan groot dat er in zo'n lijstje voor elke computer wel een beschikbaar font is te vinden. De lijst wordt afgesloten met een 'generiek' lettertype: het standaard lettertype van een bepaalde soort (serif, sans-serif, monospace, cursive).
Enkele websafe fonts:

Opmerkingen

Een lettertype specificeren

Een lettertype geef je als volgt op: font-family: lettertypen;

Voorbeeld

body {font-family: 'Trebuchet MS', Helvetica, sans-serif; }

De browser toont de tekst in 'Trebuchet MS'. Is dat lettertype niet aanwezig op de computer dan gebruikt de browser Helvetica, is ook Helvetica niet aanwezig dan gebruikt de browser de standaard schreefloze letter.

De lettergrootte specificeren

De lettergrootte geef je als volgt op: font-size: grootte;

Voorbeelden:

body { font-size: 120%; };
h1 { font-size: 150%;}
body { font-size: 1.2em;
h1 { font-size: 1.5em;} }
body { font-size: 12px; }
h1 { font-size: 15px; }
Opmerkingen

Experiment 1: een lettertype specificeren

Lettertypen insluiten met Google Fonts

Wat hierboven staat over het kiezen van lettertypen is voor een deel achterhaald. Er zijn namelijk op internet veel lettertypen beschikbaar die je kan insluiten bij je website.
Het lettertype wordt dan tijdens het openen van een webpagina gedownload op de computer/tablet/smartphone van degene die je website bekijkt. Zo ben je er zeker van dat het aangegeven lettertype daadwerkelijk beschikbaar is.

Voor particulieren en kleine bedrijven is Google fonts verreweg de gemakkelijkste manier om lettertypen in te sluiten. De website van Google fonts bevat honderden lettertypen die vrij (zonder betaling) gebruikt mogen worden. Met een paar betrekkelijk eenvoudige stappen kan je een of meer lettertypen insluiten in je webpagina's of stijlblad.
Dat gaat als volgt:

  1. Zoeken
    Ga naar fonts.google.com/ en zoek naar een geschikt lettertype.
    Er zjn uitgebreide filter-, zoek- en sorteermogelijkheden.
  2. Selecteren
    Selecteer een lettertype door op het plusje bij dat lettertype te klikken.
    • Selecteer bij wijze van proef het lettertype 'Open Sans'.
      Dit is een van de populairste lettertypen. Omdat de letterypen standaard gesorteerd zijn op populariteit, zal het een van de eerste lettertypen zijn die je ziet. Je kunt ook in het zoekvak Open Sans intikken.
  3. Insluiten
    Klik op de zwarte balk met het aantal geselecteerde letterypen:  1 family selected .
    Er opent een hulpvenster:
  4. Klik in het hulpvenster op @IMPORT
  5. Kopieer de gegenereerde code, maar zónder de woorden <style> en </style>

    en plak die als eerste regel van het stijlblad.

Het insluiten is hiermee klaar. Je moet nog wel aangeven voor welke elementen je het lettertype gebruikt. Dat kan bv. met de volgende declaratie: body {font-family: 'Open Sans', sans-serif; } (Het tweede lettertype dient als reserve voor het geval er eens geen verbinding kan worden gemaakt met de website met Google Fonts.)

Opmerkingen

Zie ook de naslag Lettertype.

Experiment 2: een lettertype insluiten

Samenvatting

Commentaar

Lettertypen

Met en zonder schreef
Monospace (vaste breedte) en proportioneel

Het lettertype instellen

De lettergrootte instellen

Googe fonts: lettertypen downloaden

Zie de naslag lettertypen.