Lettertypes en CSS

Een website moet op alle toestellen bekeken kunnen worden: smartphones, tablets, laptops, iMacs enz. Als je een lettertype kiest voor je site, moet je er dus ook één kiezen dat op al die toestellen standaard geïnstalleerd is. Dat is minder vanzelfsprekend dan gedacht. Het is best mogelijk dat je een heel mooi lettertype op je computer hebt staan, maar andere mensen hebben dit niet noodzakelijk op hun computer staan. Soms wordt een lettertype samen met bepaalde software geïnstalleerd. De kans dat anderen dit hebben, wordt dan nog kleiner. 

Om die reden kan je op websites niet zo maar elk lettertype dat je wenst, gebruiken. Sommige lettertypes mag je zelfs niet online gebruiken omdat het auteursrecht dit niet toestaat. 

Beschikbare basislettertypes

In CSS bepaal je het lettertype voor een HTML-element met de instructie "font-family". De teksteditor Adobe Brackets toont dan meteen een lijst van alle beschikbare lettertypes voor online gebruik:

De belangrijkste types die we hier uit zullen gebruiken, zijn 

TYPE	UITZICHT	VOORBEELD
serif	Lettertype met "voetjes"	Times New Roman
sans-serif	Lettertype zonder "voetjes"	Arial, Helvetica
monospace	Elke letter krijgt evenveel ruimte (een i is niet even breed als een l, maar krijgt links en rechts witruimte bij zodat elke letter evenveel ruimte in beslag neemt).	Courier

Suggesties doen aan je browser

De lettertypekeuze is dus zeer beperkt. Een "serif"-lettertype zoals Times New Roman, geeft je site een klassieker, traditioneler uiterlijk, een sans-serif oogt frisser. 

Als je de aan je body-element de volgende stijlregel toekent, dan kies de browser het standaard "sans-serif"-lettertype dat op het computersysteem aanwezig is (Arial, helvetica....):

font-family:sans-serif;

Je laat de keuze aldus aan de browser. 

Je kan de browser echter ook suggesties doen: 

font-family: 'Avenir Next', helvetica, Arial, sans-serif;

In feite zeg je hier tegen de browser: kies 'Avenir Next'. Als dat lettertype niet aanwezig is, neem dan helvetica. Is ook dat niet aanwezig, neem dan Arial... Vind je ook dat niet... tja, kies dan het eerste het beste sans-serif-lettertype. 

Je merkt dat 'Avenir Next' tussen weglatingstekens (of aanhalingstekens) staat. Dat moet je doen als de naam van het lettertype uit meerdere woorden bestaat. 

Doorbreek de grenzen met Google Fonts

1. Ga naar Google Fonts: https://fonts.google.com/
2. Selecteer maximum 2 lettertypes die goed bij de stijl van je site passen. Klik op het "plus"-symbooltje rechtsboven het lettertype.
3. Onderaan de pagina verschijnt een zwart balkje. Klik erop.
4. Het venster met de insluitcode gaat open.
5. Klik op de rode @IMPORT-knop.
6. Kopieer alles tussen <style> en </style>
7. Ga naar je CSS-document en plak de gekopieerde regels helemaal bovenaan in het document.
8. Het venster van Google Fonts toont ook de namen van de lettertypes (de font-family):
9. In je eigen stijlbestand kan je nu het lettertype voor de gewone tekst en voor de titels bepalen. Opgelet: de onderstaande code is voorbeeldcode:body{ font-family: 'Niramit', sans-serif; } h1, h2, h3, h4, h5, h6{ font-family: 'Open Sans', sans-serif; }© Kris Merckx - https://www.schoolvoorbeeld.be:443/cursuswebdesign/lettertypes