Regelafstand en regellengte voor leesbare tekst

Regelafstand is de afstand van de basislijn van de ene regel tekst tot de basislijn van de volgende, en regellengte (door typografen de zetbreedte genoemd) is hoeveel tekens er op één regel staan. Voor lopende tekst is een regelafstand van ongeveer 1,4 tot 1,6 keer de lettergrootte en een regellengte van ongeveer 45 tot 75 tekens het bereik dat in de meeste lettertypen prettig leest. Koppen willen minder regelafstand, vaak 1,05 tot 1,25. Die twee instellingen doen meer voor de leesbaarheid dan bijna elke keuze voor een lettertype.

Deze gids legt uit waarom die waarden werken, hoe de twee instellingen elkaar beïnvloeden en hoe je ze instelt voor webpagina’s, slides en social posts. Hij hoort bij de bredere gids de basis van typografie, naast letterafstand.

Wat regelafstand en regellengte precies bepalen

Lezen is een reeks sprongen. Je oog neemt een paar woorden op, springt verder langs de regel en maakt dan een lange zwaai terug naar links om de volgende regel te vinden. De regellengte bepaalt hoe lang die reis is. De regelafstand bepaalt hoe makkelijk je aan het eind van de zwaai op de juiste regel landt.

Te krap, en regels dringen samen: staarten raken stokken en de zwaai terug landt op de verkeerde regel. Te los, en de alinea valt uiteen in stroken. Bij regels die te lang zijn raakt het oog op de terugweg de weg kwijt, en regels die te kort zijn maken het lezen hakkelig.

Een regelafstand kiezen voor lopende tekst

Begin bij 1,5 en stel op het oog bij. Drie dingen duwen het getal omhoog of omlaag.

• x-hoogte. Lettertypen met een hoge x-hoogte (kleine letters die groot zijn ten opzichte van de hoofdletters) ogen dichter, dus ze hebben meer regelafstand nodig. Lettertypen met een kleine x-hoogte kunnen krapper staan.
• Regellengte. Lange regels hebben meer regelafstand nodig, zodat de zwaai terug een breder doel heeft. Korte regels, zoals in een smalle kolom of op een telefoonscherm, kunnen met iets minder toe.
• Gewicht en kleur. Vette tekst en lichte tekst op een donkere ondergrond ogen allebei zwaarder op de pagina, dus ze hebben baat bij iets meer ruimte tussen de regels.

Richtlijnen voor toegankelijkheid wijzen dezelfde kant op. Het succescriterium voor tekstafstand van het W3C vraagt dat inhoud blijft werken als een lezer de regelafstand verhoogt tot 1,5 keer de lettergrootte, dus elke lay-out die rond 1,5 is gebouwd, haalt dat deel van de test al. Leg de hoogte van een tekstvak nooit zo strak vast dat extra regelafstand de woorden zou afsnijden.

Regelafstand voor koppen en grote letters

Regelafstand is een verhouding, dus de ruimte die hij maakt groeit mee met de lettergrootte. Op 16 px voegt een regelafstand van 1,5 een ruimte van 8 px toe. Op 72 px voegt dezelfde verhouding 36 px toe, veel meer dan een kop nodig heeft. Daarom ogen grote letters los met de instellingen van lopende tekst en moet je ze aanhalen naarmate ze groeien.

Een praktische schaal: lopende tekst op 1,5, tussenkoppen op ongeveer 1,3, koppen op 1,1 tot 1,2 en heel grote displayregels op 1,0 tot 1,05. Controleer de krapste instellingen op botsingen: een staart op regel één (g, y, p) kan een accent of stok op regel twee raken. Gebeurt dat, maak de regelafstand dan iets ruimer in plaats van losse regels te verschuiven.

Hoe lang een regel tekst moet zijn

Het aloude bereik uit de boektypografie is 45 tot 75 tekens per regel, waarbij je letters, spaties en leestekens telt, en iets rond 60 tot 70 voelt het natuurlijkst voor doorlopend lezen. Op een website betekent dat meestal een tekstkolom van ergens tussen ongeveer 560 en 720 px breed bij een lettergrootte van 16 tot 18 px, maar het hangt af van het lettertype, dus meet in tekens in plaats van pixels.

Tel ter controle de tekens in een gewone regel. Regelmatig boven ongeveer 80 betekent dat de kolom te breed is. Onder ongeveer 40 betekent dat hij te smal is, met rafelige randen en gestrande korte woorden.

Te breed: 110 tekens

1100 × 180

Prettig: 65 tekens

650 × 260

Te smal: 30 tekens

300 × 480

Regelafstand en regellengte instellen in CSS

Twee gewoontes dekken het meeste. Schrijf de regelafstand als een getal zonder eenheid, zodat elk element hem uit zijn eigen lettergrootte berekent, en begrens de regellengte met de eenheid ch, die is gebaseerd op de breedte van het cijfer nul in het huidige lettertype. De pagina van MDN over line-height legt uit waarom waarden zonder eenheid veiliger worden overgeërfd dan pixels of ems.

:root {
  --measure: 65ch;
}

body {
  font-size: 1.0625rem; /* 17px */
  line-height: 1.55;
}

.prose {
  max-width: var(--measure);
  margin-inline: auto;
}

.prose p + p {
  margin-block-start: 1em;
}

h1, h2 {
  line-height: 1.12;
  text-wrap: balance;
}

h3 {
  line-height: 1.3;
}

.caption {
  font-size: 0.875rem;
  line-height: 1.45;
  max-width: 55ch;
}

Regelafstand en regellengte op posts en slides

Social posts en slides worden in seconden gelezen, vaak op een telefoon, dus de regels verschuiven. Regels zijn van nature kort en het zijn er weinig. Houd koppen krap, rond 1,05 tot 1,2, en houd een ondersteunende regel op een of twee korte regels met ongeveer 1,3. Heeft een post een alinea met de regelafstand van lopende tekst nodig, dan heeft hij waarschijnlijk minder woorden nodig.

Op een post van 1080 bij 1350 leest een kop van drie tot zes woorden per regel goed op telefoonformaat. Op een slide van 1920 bij 1080 geldt hetzelfde principe vanaf de andere kant van de kamer: korte regels, krappe koppen, royale marges. De gidsen over lettertypen voor social media en achtergronden voor presentaties behandelen de kant van de grootte.

Tekst op een drukke achtergrond heeft van alles een beetje meer nodig: meer regelafstand, een groter formaat en een rustiger vlak erachter. Tekst op een kleurverloop behandelt de volledige methode.

Een korte checklist voor leesbare afstand

1. 1

   Stel eerst de lopende tekst in

   Kies de grootte, een regelafstand rond 1,5 en een zetbreedte van 60 tot 70 tekens. Stem al het andere hierop af.

2. 2

   Maak krapper naarmate de letters groeien

   Laat de regelafstand via tussenkoppen naar koppen afnemen, en controleer de krapste regels op botsingen.

3. 3

   Meet in tekens

   Tel een echte regel. Valt hij buiten 45 tot 75, pas dan de container aan, niet de lettergrootte.

4. 4

   Laat de lezer het aanpassen

   Vermijd tekstvakken met een vaste hoogte, zodat grotere tekst of ruimere afstand je woorden nooit afsnijdt.