Typografie

WCAG stelt regels van maximaal 80 tekens voor en een regelafstand van minstens 1.5 binnen alinea's. Met twee CSS-eigenschappen regel je beide.

Lettertypen kiezen

font-family accepteert een lijst lettertypen, gescheiden door komma's. De browser gebruikt het eerste dat beschikbaar is op het apparaat van de lezer en gaat verder in de lijst als het ontbreekt. Eindig de lijst altijd met een generieke familie, serif, sans-serif, monospace of system-ui, zodat er iets geschikts verschijnt ongeacht wat er geïnstalleerd is. Lettertypenamen met spaties staan tussen aanhalingstekens, zoals "Noto Sans KR". Met system-ui gebruik je het interfacelettertype van het besturingssysteem, dat goed ontworpen is, al op het apparaat staat en veel schriftsystemen ondersteunt.

body {
  font-family: system-ui, sans-serif;
  font-size: 1rem;          /* 16px unless the reader changed it */
  line-height: 1.6;         /* unitless: 1.6 times the font size */
  color: #222;
}
h1 { font-size: 2rem; font-weight: 700; line-height: 1.2; }
p  { max-width: 65ch; }     /* keeps lines a readable length */
.label { text-transform: uppercase; letter-spacing: 0.08em; }

Je kunt ook een lettertypebestand van je eigen server laden met een @font-face-regel, of via een lettertypedienst. Weblettertypen geven een pagina een eigen karakter, maar elk bestand is een download die de tekst vertraagt. Koreaanse, Chinese en Japanse lettertypen kunnen meerdere megabytes groot zijn doordat ze duizenden tekens bevatten. Laad alleen de gewichten die je nodig hebt en houd een goed alternatief in de lijst.

Grootte, gewicht en regelhoogte

font-size stelt de grootte in; zoals je bij kleur en eenheden hebt geleerd, houdt rem tekst in de pas met de instellingen van de lezer. font-weight loopt van 100 (dun) tot 900 (zeer zwaar), met 400 als normaal en 700 als vet; de sleutelwoorden normal en bold betekenen 400 en 700. Een lettertype heeft alleen de gewichten die de ontwerper maakte. Vraag je dus om 300 bij een lettertype met alleen 400 en 700, dan krijg je het dichtstbijzijnde gewicht.

line-height stelt de afstand tussen regels in. Geef een gewoon getal zonder eenheid, zoals 1.6: dat betekent dan 1.6 maal de lettergrootte van elk element, zodat koppen en kleine tekst elk een passende afstand krijgen. Een waarde met een eenheid, zoals 24px, wordt eenmaal berekend en als vaste lengte overgeërfd, wat te krap is voor grote koppen. Lopende tekst leest meestal goed tussen 1.4 en 1.7; WCAG-succescriterium 1.4.8 stelt minstens 1.5 binnen alinea's voor. Grote koppen zien er beter uit met minder afstand, rond 1.1 tot 1.3.

Regellengte en uitlijning

Heel lange regels zijn vermoeiend: het oog raakt zijn plaats kwijt wanneer het teruggaat naar het begin van de volgende regel. WCAG 1.4.8 stelt maximaal 80 tekens per regel voor (40 voor Chinees, Japans en Koreaans). Een eenvoudige manier om dit af te dwingen is max-width in ch-eenheden op alinea's, bijvoorbeeld max-width: 65ch. text-align stelt de uitlijning in: left (of start) leest het gemakkelijkst voor lange tekst in talen die van links naar rechts lopen, center past bij korte koppen en justify kan ongelijke openingen tussen woorden veroorzaken.

Kleine afwerkingen

text-transform: uppercase toont tekst in hoofdletters zonder de HTML te veranderen, zodat de bron zijn normale spelling behoudt en de stijl later op één plek kan worden veranderd. MDN merkt op dat lange stukken hoofdletters voor sommige mensen moeilijker leesbaar zijn, onder wie mensen met dyslexie. Bewaar dit dus voor korte labels en voeg wat letter-spacing toe, zoals 0.08em. Met text-decoration teken je lijnen: underline, line-through of none om de onderstreping van een link te verwijderen (behoud een ander teken dat het een link is). Lezers die meer ruimte nodig hebben, kunnen je afstanden overschrijven. WCAG 1.4.12 vraagt dat pagina's blijven werken bij regelhoogte 1.5, letterafstand 0.12em, woordafstand 0.16em en alinea-afstand 2em. Vermijd dus blokken met een vaste hoogte die tekst zouden afsnijden.