2.2 Typografie: Hoe herken je een lettertype?

Een lettertype omschrijven

Overzicht fonts waarin de vorm, dikte, hoogte, contrast is beschreven
Voorbeeld met informatie over lettertypes

De beste manier om een lettertype (in CSS font-family) te bestuderen is het in detail te omschrijven. Dat kun je doen te kijken naar de classificatie, vorm, dikte, breedte, stijl, beeld, hoogte, spatiëring, plaatsing en leesbaarheid. In deze les leer je wat er wordt bedoeld met die termen.

Classificatie

Een lettertype behoort tot één van de volgende categorieën:

  • schreefloos (sans) • de letter heeft geen schreef of vlaggetje aan de uiteinden.
  • schreefletter (serif) • de letter heeft aan de uiteinde een schreef of vlaggetje. Bij de letter en de schreef kunnen er grote verschillen zijn in dikte. Dat geeft de letter soms iets sierlijks
  • slab • de letter heeft aan de uiteinde een schreef of vlaggetje. De schreef en de letter is nagenoeg overal even dik. Dat maakt de letter robuust.
  • script • een script letter is afgeleid van kalligrafie. De letter heeft verschillen in dikte. Dat maakt de letter sierlijk.
  • handgeschreven • de letter lijkt handgeschreven. De letters zijn vaak overal even dik.
  • fantasie • in deze categorie vallen alle letters die niet behoren tot één van bovenstaande categorieën.
voorbeeld van een schreefloos, schreef-, script, handgeshreven en fantasieletter

Lettervorm

Voorbeeld lettertypes met verschillende vormen en hoeken: vierkant, rond, geometrisch of organisch

De vorm van de letter is sfeerbepalend. Een letter kan o.a. een ronde, vierkant, geometrisch of organische vorm hebben. Daarbij is het belangrijk om ook te letten op de hoeken en uiteinden van de letters. Heeft deze een ronde, vierkante, puntige of organische hoek? Of is een stok van de letter diagonaal afgesneden?

Letterdikte

Letterdikte van een letter kan op twee manieren uitgelegd worden:

  1. Letterdikte kan verwijzen naar het verschil tussen dikke en dunne delen van de letter. De dikte van de letter kan overal hetzelfde zijn, maar het kan ook zijn dat delen van de letter wisselend van dikte zijn.
  2. Letterdikte kan ook verwijzen dat de letter normaal – of vet gedrukt zijn. Een lettertype bestaat vaak uit een familie met meerdere varianten, zoals thin, light, regular, medium, semibold, bold, extrabold, black of ultrablack.
    In CSS is wordt deze letterdikte letter-weight genoemd.
    Opties: normal of bold, of een getal als 100, 200, 300, 400, 500, 600, 700, 800.
Het woord 'Dikte' in verschillende lettertypes om het verschil te laten zien

Letterbreedte

voorbeeld van een letter met verschillende letterbreedtes

De letterbreedte verwijst naar de breedte van de gehele letter. Een letter kan smal (compressed of condensed), normaal of breed (extended) zijn.

In CSS is wordt letterbreedte font-stretch genoemd.
Opties: normal, condensed of expanded.

Verschil tussen letterdikte en letterbreedte

Letterdikte gaat over de dikte van lijn van de letter.
Letterbreedte gaat over de breedte van de gehele letter.

voorbeeld van de letter e die verschilt in dikte.
voorbeeld van de letter e die verschilt in breedte.

Letterstijl

Normaal, cursief, omlijnd (outlined), schaduw zijn woorden om een letterstijl te omschrijven.
Cursief – ookwel italic of oblique genoemd – wordt gebruikt voor letters die schuin zijn geplaatst.

In CSS is wordt letterstijl letter-style genoemd.
Opties: normal, italic of oblique.

Voorbeeld van een cursieve letter, een omlijnde letter en een letter met schaduw

Letterbeeld

kleine letters

a b c d e f g h i j k l m n o p q r s t u v w x y z

HOOFDLETTERS

a b c d e f g h i j k l m n o p q r s t u v w x y z

Bij letterbeeld verdelen we de letters in volgende categorieën:

  • hoofdletters – ookwel kapitaal, majuskel of bovenkast (in het Engels uppercase) genoemd.
    In de tijd dat letters nog door een drukker met de hand werden gezet, stonden deze letters ze boven in de kast.
  • kleine kapitalen.
  • kleine letters – ookwel minuskel of onderkast (in het Engels lowercase) genoemd.

In CSS is valt letterbeeld onder text-transform. Opties:

  • uppercase (alle letters in hoofdletters),
  • lowercase (alle letters in kleine letters),
  • capitalize (eerste letter is een hoofdletter, de volgende letters zijn kleine letters).

Letterhoogte

Er zijn letters met stokken: b, d, f, h, k, l
Letters met staarten: g, j, p, q, y
En letters zonder stokken of staarten: a, c, e, m, n, o, r, s, u, v, w, x, z.
Letterhoogte van een lettertype wordt bepaald door
het verschil in hoogte tussen
enerzijds de stokken en staarten,
en anderzijds de hoogte van de letter x.

Uitleg van de stokken en de staarten van letters en van letterhoogte

Letterspatiëring

Tekst 'Is dit leesbaar?' 5 keer waarbij de ruimte tussen de letters aangepast.

Letterspatiëring zegt iets over de ruimte tussen de letters. De letters van een lettertype kunnen dichtbij elkaar staan of juist veruit elkaar. Met een programma als Adobe Indesign kun je dit aanpassen.

In CSS kun je dit instellen met letter-spacing.
Opties: negatief of positief getal met pixels of em.
letter-spacing: -1px; zet de letters dicht bij elkaar.
letter-spacing: 1px; zet de letters uit elkaar.

Plaatsing van de letters op de tekstregel

Bij een lettertype kun je ook kijken naar hoe de letters op de tekstregel staan. Staan alle letters op de tekstregel of verspringen ze? Vooral bij de cijfers zie je verschillen tussen de letterypes. Ze kunnen op – of halverwege de tekstregel staan.
Een tekst of letter kan ook als subscript (beneden de tekstregel) of superscript (zwevend boven de tekstregel) gezet worden.

In CSS kun je de plaatsing van tekst op of onder een tekstregel instellen met vertical-baseline.
Opties: baseline, text-top, text-bottom, sub of super.

Voorbeelden van lettertypes die boven of onder de tekstregel staan.

Leesbaarheid van een lettertype

slecht leesbare tekst. Tekst is cursief, kapitalen, omlijnd, dicht op elkaar en met een schaduw

Slecht leesbaar zijn lettertypes

  • in de categorieën: script, handgeschreven of fantasie.
  • met een organische of geometrische vorm.
  • die of dun of vet zijn.
  • die compressed of extended zijn.
  • in cursief of die omlijnd zijn of een schaduw hebben.
  • die alleen in kapitalen beschikbaar zijn.
  • met korte stokken en korte staarten.
  • waarvan de letters dichtbij – of ver uit elkaar staan.
  • waarvan niet alle letters op de tekstregel staan.

Deze lettertypes gebruik je niet voor een body-tekst.

Oefening 2.2 Font herkennen

Ondanks dat de website Identifont.com oud, gedateerd en in het Engels is, biedt het een goede optie om de verschillen tussen fonts te leren herkennen.

2.2a Welk lettertype is dit?

Open Identifont.com en probeer te achterhalen welke lettertype is afgebeeld.

voorbeeld van een lettertype met alle letters, cijfers en leestekens.
Het lettertype 'bleeding cowboys' ontleed: classificatie is fantasieletter met sierlijke franjes

2.2b Letterypes beschrijven

In deze les staat heb je een uitgebreid overzicht gekregen hoe een lettertype onderverdeeld kan worden. Die indeling kun je gebruiken om de look & feel (vormgeving of uitstraling) van een lettertype te ‘begrijpen’. Bijvoorbeeld als je icoontjes zoekt of wilt ontwerpen die past bij een huiststijlfont. Of als je bij een bestaand logo een passend font zoekt. Bij een huisstijl is het belangrijk dat het logo, huisstijllettertype, icoontjes en stijlelementen dezelfde look & feel hebben.

Neem het blad met de negen lettertypes dat je gemaakt hebt bij de eerste oefening van les 2.1. Kies minimaal 5 fonts uit en schrijf bij elk font een aantal steekwoorden op om het lettertype te beschrijven zoals in het onderstaande voorbeeld.

overzicht lettertypes met opmerkingen over letterdikte, -breedte, -stijl, -vorm en leesbaarheid
Voorbeeld oefening letterypes beschrijven