Typografie

Webfuncties: font-size rem em unit line-height overflow-wrap text-wrap text-wrap: balance text-wrap: pretty min(), max() en clamp() Viewport-eenheden

Algemene best practices

  • Gebruik getallen zonder eenheid voor line-height (bijv. 1.5) om relatieve schaling te garanderen tijdens overname van de lettergrootte.
  • Gebruik overflow-wrap: break-word (of anywhere) om lange URL's te bevatten.
  • Gebruik GEEN px voor de lettergrootte. Gebruik bij voorkeur rem om de voorkeuren voor de lettergrootte van de browser van de gebruiker (root-lettergrootte) te respecteren, of em/percentages voor contextuele grootte.

Leesbaarheid

  • Vermijd lange tekstregels: Beperk alineablokken tot een maximale breedte van 80 tekens.
  • Vermijd rivieren van witruimte: Vermijd text-align: justify, omdat dit de tekst moeilijker leesbaar kan maken. Als u het toch moet gebruiken, combineert u het met hyphens: auto om overmatige witruimte tussen woorden te voorkomen.
  • Gebruik geen sierlijke lettertypen: Gebruik geen cursieve lettertypen voor de hoofdtekst.
  • Gebruik geen hoofdletters om iets te benadrukken: Gebruik liever vetgedrukte tekst voor visuele nadruk en gebruik <em>/<strong> als de nadruk semantisch is.
  • Beperk de nadruk over het algemeen: Nadruk verliest betekenis als deze overal wordt gebruikt. Pas deze alleen toe als de manier waarop de content moet worden gelezen, verandert.
  • Ondersteun de zoomvoorkeuren van gebruikers: Sta gebruikers toe het formaat van tekst aan te passen tot 200% zonder verlies van content of functionaliteit.
body {
  line-height: 1.5;
  text-align: start; /* Supports LTR and RTL */
}
article {
  max-width: 80ch; /* Caps line length to ~80 characters for readability */
}

Tekstomloop

  • Gebruik text-wrap: balance voor evenwichtige koppen en content die op een kop lijkt (bijv. <th>)
  • Gebruik text-wrap: pretty voor lange hoofdtekst (alinea's, blokcitaten, enzovoort).
  • Gebruik text-wrap: balance of text-wrap: pretty bewust, pas het NIET toe op * omdat dit prestatiekosten met zich meebrengt.
  • Vermijd text-wrap: balance voor elementen met een zichtbaar vak (achtergronden, randen, schaduwen, enzovoort), omdat dit de breedte van de container niet wijzigt. Het heeft alleen invloed op hoe tekstomloop binnen die breedte. Hierdoor kan er aan het einde van de container lege ruimte overblijven, wat meestal ongewenst is.

Responsieve typografie

  • Combineer viewport-relatieve en lettertype-relatieve eenheden in clamp() voor lettergrootten die worden geschaald met de viewport-grootte, terwijl ze binnen een gewenst bereik blijven. Bijvoorbeeld clamp(2rem, 1rem + 5vw, 4rem). Pas de verhouding van viewport-relatieve en lettertype-relatieve eenheden aan om te bepalen hoe snel de lettergrootte verandert.
  • Gebruik NIET alleen vw voor de lettergrootte zonder clamp(), omdat de tekst dan te klein of te groot kan worden geschaald op extreme schermen.