+31 6 29056176 anithe@websitezzp.nl

Onlangs deed ik de online cursus typografie van Matej Latin van Better Webtype. Heel leerzaam en nuttig. Van nu af aan alleen maar goed leesbare websites van mij ;-). Van de 10 lessen heb ik aantekeningen gemaakt. Hieronder mijn samenvatting. Maar wil  je duidelijke voorbeelden en uitleg, kijk dan op Better Webtype.

Typografie, algemene kennis

  • We lezen woorden, geen letters.
  • Ogen vermoeien eerder bij lange zinnen, te kleine of te grote lijnhoogte, te kleine letters en verkeerde zwaarte/kleuren.
  • Type colour is niet de kleur van de letter, maar de zwaarte: de dikte en het contrast met de achtergrond.

Lijnhoogte (line height) moet afhankelijk zijn van:

  • Regel-lengte (measure / width); hoe langer de regels, hoe meer witruimte eronder nodig om gemakkelijk de volgende regel te vinden.
  • Letter-grootte (line-height); hoe groter de letter, hoe groter de lijnhoogte.
  • Type colour; hoe zwaarder de letter, hoe groter de lijnhoogte.
  • Headings hebben kleinere lijnhoogte nodig dan body tekst.
  • Stem type face (letter-familie met alle kenmerken) af met de inhoud van de tekst.
  • Horizontaal ritme bevordert de leesbaarheid.
  • Verticaal ritme bevordert de hiërarchie / structuur van een tekst.

Typografie handvaten (geen wetten)

Body tekst

  • Lettergrootte (font-size): 18 – 22 px voor desktop schermen, 16px voor mobiele schermen
  • Regel-lengte (measure): 45 – 75 karakters inclusief spaties
  • Lijnhoogte (leading): afhankelijk van regel-lengte, lettergrootte en type colour (zie boven), maar gemiddeld 1,3 – 1,6 em (130% – 160%) van de body text
  • Horizontaal ritme:
    • géén letter spatiëring (letter spacing) bij body tekst, want dat vertraagt het lezen enorm
    • font-kerning: auto; (kerning staat dan alleen aan voor grote letters)
    • gebruik voor web géén uitlijning (justify), want dan vallen er gaten in de tekst en dat is slecht voor de leesbaarheid
  • Verticaal ritme: stel juiste onderkant marges (margin-bottom) in voor alinea’s en lijstjes (p, ul, ol, li)

Headers

  • Lijnhoogte: 1 – 1,2 van lettergrootte
  • Letter spatiëring alleen bij uppercase of small caps
  • Voorkom ‘fake small caps’ door een font te gebruiken dat small caps (sc) ondersteunt.
  • Verticaal ritme: stel juiste onderkant marges (margin-bottom) in voor h1 t/m h6.

Hoe kies je een type face?

  • Wat is het doel van de website? Goed/veel lezen → let extra op leesbaarheid of teksten scannen → koppen mogen uitgesproken zijn
  • Past het lettertype bij de inhoud van de website? Modern, klassiek, degelijk, enz.
  • Welke doelgroep leest de teksten?
  • Kies een font face met meerdere gewichten en stijlen.
  • Wil je absoluut snelle laadtijd van webpagina, kies dan een web safe font (Georgia, Times). Serifs en zware letters hebben meer laadtijd nodig.
  • Meertalige website? Kies voor een type face met language support.

Lettertypes combineren

Vaak zie je dat de body tekst in een ander font staat dan de headers. Maar het hoeft natuurlijk niet. Ga je voor safe, kies dan voor 1 font of een type face met meerdere styles. Je kunt ook lettertypes uit dezelfde overkoepelende familie gebruiken (bijv. Roboto en Roboto slab). Wil je toch graag combineren, let dan op:

  • historie (font uit zelfde tijd of juist ver uit elkaar)
  • x-height gelijk (voor verticaal ritme)
  • gewoon veel proberen en goed kijken met ‘echte’ tekst