Websites met stijl

Naslag: lettertypen

Soorten

Er zijn verschillende soorten lettertypen:

• Met schreef (engels: serif)
  Letters met schreef hebben verdikkingen aan de uiteinden van de 'pootjes' van de letters.
• Schreefloos (zonder schreef) (engels: sans-serif)
  Schreefloze letters hebben niet zulke verdikkingen. Op computerschermen worden schreefloze lettertypen meestal beter leesbaar gevonden.
• Display (voor titels en koppen)
  
• Handschrift
  Een lettertype dat er uitziet alsof het met de hand geschreven is.
• Monospace (lettertype met vaste breedte)
  Bij monospace neemt elke letter evenveel ruimte in. (Bij verreweg de meeste lettertypen nemen smalle letters (i,l) minder ruimte innemen dan brede letters (m,w). (Zulke lettertypen heten proportioneel.)

Lettertypen worden ontworpen door grafische ontwerpers. Die tekenen alle tekens (letters, cijfers, leestekens) uit, vaak in een gewone variant een cursieve variant een een vette variant. Al die letters bij elkaar worden een 'fomt family' (zeg maar: lettertype) genoemd. De ontwerper heeft zijn ontwerp ook een naam gegeven, bijvoorbeeld Arima, Arial, Times.

Font-family

• Lettertypen: de namen van één of meer lettertypen gescheiden door komma's.
• Als de naam van een letterype spaties bevat moet de naam tussen aanhalingstekens.
• Het eerste lettertype uit de lijst dat op de computer aanwezig is wordt gebruikt.

Voorbeelden

• In het laatste voorbeeld wordt voor h2-koppen het lettertype Verdana gebruikt.
• Is Verdana niet beschikbaar op de computer, dan wordt Calibri gebruikt.
• Is ook Calibri niet beschikbaar dan wordt Arial gebruikt.
• Is ook Arial niet beschikbaar dan wordt de standaard sans-serif letter gebruikt.

Font-size

• Grootte: de grootte van de letter in %, em, px:
  • Procent: 100% is de grootte van de standaardletter op de computer
    200% is 2x zo groot.
  • em: 1 em is de grootte van de standaardletter op de computer
    1.5em is 1,5x zo groot, (Let op: 1.5em, niet 1,5em)
    1em is dus hetzelfde als 100%
  • px: 1 pixel (beeldpunt).

Voorbeelden:

Opmerkingen:

• Lettertypen waarvan de grootte in procenten of em is opgegeven zijn relatief. voorbeeld 1 body { font-size: 120%}
  h2 { font-size: 120%}
  Alle letters in de body zijn 120% groot. De h2-declaratie is echter relatief, dat wil zeggen dat de letters in de h2 kop 20% groter zijn dan de letters in de body. Die letters zijn dus 120% van 120% oftewel 144% groot.
• Lettertypen waarvan de grootte is opgegeven in px zijn niet relatief. voorbeeld 2 body { font-size: 18px}
  h2 { font-size: 18px}
  Bij de declaratie van voorbeeld 2 zijn de letters in de h2-kop even groot als de (andere) letters in de body, namelijk 18px.
• Het verdient aanbeveling om de lettergrootte op te geven in % of em. Dan kan de gebruiker in alle browsers in- of uitzoomen.

Font-weight

Het gewicht geeft aan hoe zwaar (vet) de letters worden afgedrukt. Het kan de volgende waarden aannemen:

• normal (normale letter)
• bold (vette letter)
• Een van de getallen 100, 200, 300,...,900
  100 is het lichtst, 900 het zwaarst (vetst). 400 is normal, 700 is bold.
  Meestal is een lettertype maar in 2 of 3 zwaarten beschikbaar: dan wordt bv. 100..600 als normal weergegeven, 700..900 als bold.

Voorbeelden

Font-style

Mogelijke waarden:

• normal (normale letter)
• italic (cursieve letter)

Voorbeeld

Google fonts

Google fonts (fonts.google.com) is een website met honderden lettertypen (fonts) die gratis te gebruiken zijn.

Met de onderstaande stappen kan een lettertype uit de verzameling worden ingesloten bij het openen van een webpagina:

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.
   Het is mogelijk om meer dan één lettertypen te selecteren. Dit vertraagt het laden van de webpagina's wel.
3. Insluiten
   Klik op de zwarte balk met het aantal geselecteerde letterypen:  1 family selected .
   Er opent een hulpvenster:
   3.1 Eventueel aanpassen
   Gewoonlijk is alleen de standaard variant (niet vet, niet cursief) in de taal 'Latin' geselecteerd.
   • Kies eventueel ook een vette en/of een cursieve variant door op CUSTOMIZE te klikken en de gewenste varianten aan te vinken.
   • Kies eventueel exta talen als Greeks of Cyrillisch of Latin extended (voor exotische symbolen als ŕ, ǣ, œ ,š).
   • Klik op Embed om het aanpassen af te sluiten.
   
   3.2 Embed (Insluiten)
   Kies voor één van de twee onderstaande methoden:
   • 3.2.1 Insluiten in de html-pagina
     • Klik op STANDARD
     • Kopieer de gegenereerde code
       
       en plak die ergens in de <head> van de betrefende html-pagina's.
     òf
   • 3.2.2. Insluiten in het stijlblad
     • Klik op @IMPORT
     • Kopieer de gegenereerde code, maar zónder de woorden <style> en </style>
       
       en plak die als eerste regel van het stijlblad.

Klaar.

Opmerkingen:

• Bij methode 3.2.1 wordt een html-code in de head van de betreffende webpagina's geplaatst. Als maar een paar pagina's het betreffende font gebruiken, is dat geen probleem.

  Als echter alle pagina's het betreffende font gebruiken, moet de code naar de head van al die pagina's gekopiëerd worden. Dan is methode 3.2.2. veel eenvoudiger. Die code moet alleen naar het stijlblad worden gekopieerd.

  Daarom verdient methode 3.2.2 bijna steeds de voorkeur. Die hoeft alleen maar naar het stijlblad te worden gekopiëerd.
• Om een ingesloten lettertype daadwerkelijk te gebruiken moet het nog worden gekoppeld aan een element, bijvoorbeeld met een stijlregel als: body {font-family: 'Open Sans', sans-serif; } (Het tweede lettertype dient als reserve voor het geval de website met Google Fonts plat ligt.)
• Hoe meer varianten/talen worden geselecteerd, hoe trager de webpaginas laden. Google Fonts geeft een schatting (fast, moderate, slow) van de impact op de laadsnelheid bij de gekozen lettertypen/varianten/talen.
• Als geen vette of cursieve varianten zijn ingesloten, maakt de browser waar dat nodig is de vette en cursieve varianten zelf. Deze gegenereerde letters zijn meestal wat minder elegant dan de echte vette en cursieve lettertypen. Het is een afweging tussen snelheid en kwaliteit.
• Waarom de woorden <style> en </style> niet moeten mee gekopiëerd bij methode 3.2.2
  @IMPORT is een stijldeclaratie. De ontwerpers van Google Fonts gaan er echter van uit dat de code in de html wordt geplaatst. Dan moet het in de head geplaats worden tussen de html-tags <style> en </style>. Als de @IMPORT code direct in het stijlblad wordt geplaatst moeten <style> en </style> weggelaten worden.