Aantal tekens op een regel typografie tekst karakters

Wat is het beste aantal tekens of karakters op een regel voor de beste responsive vloeibare typografie en tekst op verschillende apparaten en WordPress website?

Logo cursus traing wordpress

Aantal tekens op een regel typografie tekst karakters

Minimaal 45 en maximaal 75 tekens op een regel

Eén van mijn favoriete typografen heeft hier onderzoek naar gedaan en je vindt hier zijn bevindingen die je hieronder vind je de vertaling.
https://www.inkwell.ie/typography/bringhurst.html

“Een regel van 45 tot 75 tekens wordt algemeen beschouwd als een goede lengte voor een pagina met één in een schreeflettertype en een tekstgrootte. De regel van 66 tekens (letters en spaties meegerekend) wordt algemeen als ideaal beschouwd. Voor meerkolomswerk is een beter gemiddelde 40 tot 50 karakters”.

Voorbeeld teveel tekens en letters op 1 regel

Ik kom vrijwel dagelijks sites tegen waar teveel tekens en letters op een regel staan. Als je 5 minuten rondsurft op het neemt kom je vele voorbeelden tegen. Tijd om er eens een artikel over te schrijven. Het is overigens bijna altijd het geval als er geen aanstaat. Al met al is het 1 van de meest gemaakte fouten in WordPress en webdesign.

Voorbeeld teveel tekens op een regel

Op de site van Strato, een miljoenenbedrijf kwam ik dit tegen:
https://www.strato.nl/hosting/wordpress-hosting/wordpress-installatie/
Hieronder vind je een screendump:

Er staan maar liefst 138 tekens op een regel wat de leesbaarheid niet ten goede komt. Ik heb het gearceerd met blauw. Je kan dit overigens hier berekenen:

Aantal tekens op een regels voor WordPress website berekenen

Als je uitgaat van maximaal 75 tekens op een regel zou alles na het woordje geen op een volgende regel moeten komen. Zoals hieronder:


Aantal tekens op regel instellen website

De maatstaf is het aantal karakters in een enkele regel van een tekstkolom. HTML heeft niet per se een van kolommen, in plaats daarvan wordt tekst in vakken gehouden. In CSS wordt de breedte van een box ingesteld met de width eigenschap met een willekeurige lengte-eenheid, bijvoorbeeld:

#col1 {
  width: 500px;
}

#col2 {
  width: 50%;
}

#col3 {
  width:33em;
}


Wanneer typografen de afmetingen en tekstgrootte voor gedrukte media bepalen, zijn deze afmetingen vast en onveranderlijk in hun fysieke verschijningsvorm. In dit opzicht is het Web zoals het op het scherm wordt bekeken fundamenteel verschillend van gedrukte media, omdat het medium veel meer onder de controle van uw lezers staat. In het bijzonder, als uw lezer de tekstgrootte of de afmetingen van de “pagina” wenst te veranderen, kan hij dat doen.

Vaste breedte

In het bovenstaande voorbeeld heeft kolom 1 een vaste breedte: hij is ingesteld op 400 px breed. Met een tekstweergave van 12 px zou dit resulteren in een van ongeveer 66 tekens per regel. Vergroot uw lezer de tekst tot 16 px, dan vermindert de maat tot 50 tekens per regel. Dus als de tekstgrootte wordt veranderd, verandert ook de afmeting.

Vloeibare breedte

Kolom 2 heeft een vloeibare breedte: deze is ingesteld op 50% breed. Ervan uitgaande dat uw lezer bladert met een venster van 1000 px breed, zou de box worden weergegeven als 500 px breed, wat resulteert in een afmeting van ongeveer 83 tekens per regel. Een afmeting van 83 kan een beetje te breed zijn voor uw lezer, maar omdat de box vloeibaar is, kan uw lezer zijn venster verkleinen tot 800 px, waardoor de box wordt verkleind tot 400 px en een comfortabelere afmeting van 66 tekens per regel wordt verkregen.

Elastische responsive vloeiende breedte

Kolom 3 heeft een elastische breedte: deze is ingesteld op 33 em breed. Gemiddeld neemt een karakter 0,5 em in beslag, zodat deze box een afmeting heeft van 66 karakters per regel. Als uw lezer de tekst groter maakt, zal de breedte van het evenredig toenemen en dus blijft de maat 66, ongeacht de tekstgrootte.

De beste methode voor aantal tekens op een regel

Vanuit typografisch oogpunt is de laatste methode meest geschikte methode om de breedte van het kader in ems (elastische opmaak) in te stellen. Dit garandeert dat de afmeting altijd volgens de specificatie van de typograaf wordt ingesteld. Het instellen van de boxbreedte als percentage (vloeibare opmaak) geeft de web-designer bij benadering controle over de afmetingen, maar stelt ook de lezer in staat de opmaak aan te passen aan zijn comfort. Het leest prettiger. Deze website is ontworpen met vloeibare opmaak om de lezers deze controle te geven.
Dit is een tip en concept dat moet worden erkend en omarmd, en vanaf het begin moet worden ingebouwd in website-ontwerpen. Helaas schat ik in dat dit op 99% van de websites fout gaat, dus doe er je voordeel mee.

Andere manier voor aantal tekens op een regel met ch in CSS

Een andere goede methode voor het aantal tekens op een regel is het aangeven van het aantal karakters. Je kan dit zo doen met CSS door ch in te voeren.
ch staat voor character in CSS.
Bijvoorbeeld:

p {
  max-width: 70ch;
}

Let op: ik kwam er de eerste keer achter, alweer zo'n 10 jaar geleden, dat de spaties niet worden meegerekend. Je moet dus iets meer, ongeveer 15-20% meer ch ingeven dan je wilt om de spaties mee te tellen als je het onderzoek van Robert Bringhurst in acht wilt nemen.

Uitlijning juiste tekens op een regel

Je zal zien dat de uitlijning bij de bovenstaande methode nog wel eens niet goed kan gaan. Lees eventueel de uitlijning van vloeibare tekst:

Meer over leesbaarheid en typografie

Meer over en leesbaarheid

Training of cursus ontwerp en vormgeving

WordPress design en vormgeving

Leer hoe je je WordPress website of webshop beter en kan ontwerpen en vormgeven in de speciale designcursus:
Design en ontwerpcursus voor WordPress

WordPress Bootcamp

Leer hoe je je website mooier kan maken en vormgeven in de WordPress Bootcamp spoedopleiding:
Design en ontwerp in WordPress Bootcamp

Info over Aantal tekens op een regel typografie tekst karakters

Neem vrijblijvend contact op met Arthur als je nog vragen hebt over ontwerp, Aantal tekens op een regel typografie tekst karakters en WordPress webdesign.

WordPress designer

Arthur Wentzel, web-designer

06 20 83 05 83

Scroll naar boven