Websites met stijl

Naslag: lettertypen

Op dit naslag-blad

Soorten

Er zijn verschillende soorten lettertypen:

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

font-family: lettertypen;

Voorbeelden

body {font-family: 'Times New Roman', Times, serif; } h1 {font-family: 'Open Sans'; } h2 {font-family: Verdana, Calibri, Arial, sans-serif; }

Font-size

font-family: grootte;

Voorbeelden:

body { font-size: 18px; } body { font-size: 80%; } body { font-size: 1.2em; }

Opmerkingen:

Font-weight

font-weight: gewicht;

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

Voorbeelden

h1 { font-weight: bold; } h2 { font-weight: 600; }

Font-style

font-style: stijl;

Mogelijke waarden:

Voorbeeld

h3 { font-style: italic; }

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: