IN DEZE HANDLEIDING:
- 1 Leesbaarheid tekst letters website verbeteren webdesign
- 2 Een beeldscherm is geen boek
- 3 Lettertypes houdt het simpel en leesbaar
- 4 Alles in hoofdletters en kapitalen
- 5 Paragraafgrootte en te lange teksten
- 6 Teveel tekst op een regel en te lange regels
- 7 Contrast
- 8 Voorbeeld verbeteren leesbaarheid teksten website
- 9 Meer handleidingen over leesbaarheid
Leesbaarheid tekst letters website verbeteren webdesign
Leesbaarheid is een vaak onderschat onderdeel bij het bouwen van een website of winkel. In deze handleiding delen we 7 tips om een website of winkel leesbaarder te maken.
Hoe belangrijk is het immers? Zolang het er maar goed uitziet, toch? Fout! Eigenlijk is leesbaarheid een van de belangrijkste aspecten. Het kan immers het verschil maken tussen een blogartikel dat al dan niet wordt gelezen, geconverteerd of niet. In deze blog delen we vijf tips voor een beter leesbare pagina. Waar moet je op letten?
Een beeldscherm is geen boek
Een beeldscherm is geen boek en leest daarom anders dan een boek. Lange tijd werd bij het ontwerpen van een webpagina niet bewust rekening gehouden met dit aspect. Maar het zou wel moeten!
De afstand tot het scherm is anders dan bij een boek. Schermen moeten ook omgaan met variabele helderheid en contrast. Er moet ook rekening worden gehouden met de breedte van de regels en het aantal tekens dat ze bevatten.
Lettertypes houdt het simpel en leesbaar
Er zijn tienduizenden gratis lettertypes, zogenaamde webfonts, te downloaden op het internet, sommige interessanter dan andere. Maar hoe leesbaar is dat spannende lettertype? Leesbaarheid en gemoedsrust moeten altijd voorop staan. Niemand wil 4 of 5 verschillende lettertypes op een pagina die niet prettig leesbaar zijn.
Variabele fonts lettertype verschillend gewicht dikte
7 Beste favoriete Adobe fonts betaalde lettertypes betaald
Beste en mooiste lettertypes van Adobe De kwaliteit van de Adobe Fonts collectie is de…
Grootte lettertypes fonts website mobiel tablet desktop
Top 100 beste lettertypes meest gebruikte fonts
Custom fonts toevoegen WordPress truetype opentype adobe
Easy Google Fonts plug-in lettertypes voor WordPress
Beperk aantal lettertypes
Er zijn verschillende factoren waarmee rekening moet worden gehouden bij het kiezen van een lettertype. Zo is het raadzaam om het aantal lettertypes waar mogelijk te beperken tot 1.
Vaak beginnen blogs en artikelen met een vetgedrukte alinea om de inleiding aan te geven. Dit is veel moeilijker te lezen dan “normale” tekst. Concentratie is moeilijker en bovendien zijn vetgedrukte woorden bedoeld om te benadrukken: belangrijkere woorden.
Ideale lengte aantal woorden wordpress teksten webpagina
Alles in hoofdletters en kapitalen
Het is ook af te raden alles in hoofdletters te schrijven of met Caps Lock op maximaal. Dit wekt niet alleen de indruk agressief te zijn, maar maakt de zin ook minder leesbaar. Tot 25% langzamer!
Omdat we het tegenwoordig allemaal ongelooflijk druk hebben, neemt niemand daar de tijd voor. Resultaat: je verliest veel bezoekers!
Paragraafgrootte en te lange teksten
Niemand wil grote stukken tekst. Vooral niet op het “efemere web”. Het is niet uitnodigend. Houd rekening met de lengte van je alinea’s en probeer lange stukken op te breken met bijvoorbeeld een citaat of een afbeelding. Op desktop is de ideale lengte van een paragraaf 5 regels. Op mobiel zijn 3-4 regels echter meer dan genoeg, afhankelijk van de lengte van je zinnen.
Ideale lengte aantal woorden wordpress teksten webpagina
Teveel tekst op een regel en te lange regels
Teveel tekst op een regel en te lange regels
Voorbeeld te lange tekstregels en koppen
Beste breedte voor kolom layout pixels
Wat is de beste breedte voor je kolommen voor tekst en beeld? Wat is de…
Aantal tekens op een regel typografie tekst karakters
Contrast
Uiteraard wilt u uw website zoveel mogelijk onderdompelen in de kleuren van uw huisstijl. Hetzelfde geldt voor de tekst. Maar niet alle kleurencombinaties zijn daarvoor geschikt. Ook hier is de leesbaarheid van cruciaal belang.
Er moet voldoende contrast zijn om de ene kleur van de andere te onderscheiden. Dit klinkt eenvoudig, maar blijkt in de praktijk moeilijker dan verwacht.
Tools kleurcontrast checken analyse kleuren webpagina
Contrast toegankelijkheid scherm media accessibility
8 tips kleurenblindheid kleurenblinden webdesign sites
Kleurcontrast richtlijnen kleur licht donker contrast
Voorbeeld verbeteren leesbaarheid teksten website
Voorbeeld verbeteren leesbaarheid teksten website
Een voorbeeld van WordPress website en leesbaarheid
- veel te lange koppen
- te lange teksten
- te klein lettertype op desktop
- te weinig regelafstand
Oplossing
- Lettertype vergroot: 20px op desktop
- Regelafstand vergroot zodat het goed leesbaar is. Ook volgens de regels van toegankelijkheid
Meer handleidingen over leesbaarheid
Schrijf makkelijk te lezen content berichten pagina’s
Schrijf gemakkelijk te lezen teksten, berichten en artikelen Uw WP-website moet gemakkelijk en prettig leesbaar…