6 Praktische tips voor de opmaak van je webteksten

Blogheader opmaak tekst

Fijn! Je webteksten zijn af.

Nu moeten ze nog op de website.

Maar daar is meer voor nodig dan copy-paste.

Goede webteksten zijn niet alleen prettig geschreven, ze worden ook mooi gepresenteerd. Die presentatie is belangrijker dan je denkt.

Want als jouw teksten slecht leesbaar zijn door een onhandige opmaak, slaan lezers ze over en kan het zelfs nadelig werken voor je SEO.

Daarom deel ik hieronder de 6 belangrijkste zaken om op te letten voor goede én mooie webteksten.

 

Welk lettertype kies je?

Je lettertype doet ertoe.

Kijk maar:

Lettertype voorbeeld

Elk lettertype heeft andere associaties. Zou je de middelste verwachten op een zakelijke website? Vast niet, maar wel op ’n webshop voor kinderspeelgoed. Of bij een sieradenwinkeltje.

Nu zul je die bovenste twee niet snel gebruiken voor je gewone teksten. De meest gangbare lettertypes lijken redelijk veel op elkaar.

Toch maakt je keuze wel verschil. Zo vinden we bepaalde lettertypes elegant en mooi en anderen juist informeel en innovatief. We denken zelfs dat iets meer kost als de tekst moeilijker leesbaar is.

Vroeger werd vooral Times New Roman gebruikt. Die (her)ken je wel. Hij is wel erg saai, dus geen ideale keuze voor je website. Andere lettertypes die je misschien kent die je wél kunt overwegen zijn bijvoorbeeld Verdana, Georgia en Arial.

Maar er zijn veel meer mogelijkheden. Zoals:

  • Open Sans
  • Lato
  • Roboto
  • PT Sans
  • Proxima Nova
  • Merriweather Sans
  • Ubuntu
  • Helvetica

Dit zijn allemaal zogenaamde sans-serif lettertypes: die zijn strak en modern, zonder sierlijke details. Deze worden het meest gebruikt voor body tekst, dus je normale webteksten. Vaak gebruik je voor titels en (tussen)kopjes juist een serif lettertype, die wat eleganter is. Het contrast tussen de twee lettertypes maakt het mooi.

Mooie serif lettertypes zijn bijvoorbeeld:

  • Merriweather
  • PT Serif
  • Josefin Slab
  • Georgia
  • Bodoni
  • Garamond
  • Neuton

Andersom kan uiteraard ook, sans-serif voor je kopjes en serif voor je gewone tekst. Bekijk gewoon wat jij mooi vindt.

Alle bovenstaande lettertypes kun je terugvinden op Google Fonts. Dat betekent ook dat ze makkelijk te gebruiken zijn op elke website, en dat elke bezoeker het juiste lettertype te zien krijgt.

Als je niet weet hoe je dat aan moet passen staan er online veel tutorials, en anders kan je webdesigner ’t voor je doen.

 

Hoe groot moet je tekst zijn?

Het formaat van je tekst. Moet je daar echt over nadenken?

Ja. Dat moet.

Je tekst is waarschijnlijk te klein. Bij veel websites staat het letterformaat standaard op 12 of zelfs 10 pixels ingesteld. Voor je beeldvorming:

Dat is dit.
Of dit.

Het is leesbaar, maar niet makkelijk. En weinig bezoekers zullen extra moeite doen om je teksten te lezen. Bovendien hebben sommige mensen een klein scherm of slechte ogen.

Uit onderzoeken blijkt ook telkens dat een groter letterformaat beter is. (Hier. En hier. En hier nog eentje.)

Hoe groot dan? Minimaal 14 pixels. Maar 16 is beter en 18 is nog beter. (Ik heb ‘m op 18 pixels.) En niet eigenwijs denken “Ja maar ik kan het toch prima lezen?” Dat zal wel, maar je wil het je bezoekers zo makkelijk mogelijk maken. Toch? Groter, dus.

 

Hoe lang maak je je tekstregels?

Heb je ooit nagedacht over de lengte van je tekstregels?

Vermoedelijk niet, maar doe toch eens even.

Soms is die namelijk écht te lang. Voorbeeldje:

Regellengte voorbeeld

 

Dit leest niet fijn. Je raakt snel de draad kwijt in zo’n woordenbrij.

Het ziet er ook niet mooi uit. Door de lange regels lijkt het een enorm blok tekst. Met kortere regels maak je webteksten makkelijk leesbaar.

De tekst hierboven heeft zo’n 190 tekens per regel (letters, leestekens en spaties zijn allemaal één teken). Dat moet veel minder zijn. Hoeveel minder? Daar verschillen de meningen over. Meestal wordt gezegd: tussen de 50 en 75 tekens per regel. Op dit blog hanteer ik 75. Maar onderzoek suggereert dat tot 100 tekens nog prima is.

Wil je dit snel testen? Typ het alfabet en kijk hoe vaak dat op één regel past. Ideaal is tussen de twee en vier. In de tekst hierboven is dat 7 alfabetten. Dat is echt te lang.

 

Hoeveel contrast heeft je tekst nodig?

Je tekst heeft voldoende contrast nodig om goed leesbaar te zijn. Klinkt logisch, toch?

Toch gaat dit vaak fout. Dan is de tekst lichtgrijs op een witte achtergrond. Ziet er mooi uit, maar het leest niet zo fijn.

Net als bij het letterformaat geldt hier ook: maak het je lezers makkelijk. Kies voor meer contrast.

Je kunt eenvoudig testen of jouw tekst voldoende contrast heeft, op deze website. Je wil een ‘pass’ bij de AAA-score.

Maximaal contrast hoeft dan weer niet, dus zwarte tekst op ’n witte achtergrond is niet nodig. Een donkere grijstint is prima. Op een lichtgrijze achtergrond kan je beter wél voor zwart kiezen, anders is het contrast snel te klein.

 

Hoe laat je links opvallen?

Op je website staan linkjes naar andere sites (externe links) of andere pagina’s op jouw site (interne links). Die linkjes moeten opvallen. Ze moeten tegen de lezer zeggen: “Hé, ik ben een link, klik hier.”

Vroeger waren links blauw en onderstreept. Dan had je dit. Dat wordt nog steeds veel gebruikt, en uit een test van Google kwam blauw als meest herkenbare kleur voor links.

Moet je linkjes dan blauw maken? Nee hoor. Blauwe links krijgen iets meer clicks, maar het scheelt weinig. Bovendien leidt blauw wél meer af van de rest van de tekst.

Kies wel een kleur die contrasteert met je gewone tekst. Dus geen donkerblauwe links in een zwarte tekst. En andersom, gebruik je link-kleur niet voor allerlei andere stukjes tekst. Dat is verwarrend.

Het liefst gebruik je ook een hover-effect: dat betekent dat de kleur verandert als je met je muis-aanwijzer op de link ‘hangt’. Dan is extra duidelijk dat erop geklikt kan worden. Klinkt misschien ingewikkeld, maar is heel simpel.

Daarnaast maak je links extra opvallend door ze bijvoorbeeld dikgedrukt of onderstreept te maken. Daarmee springen ze in het oog én help je kleurenblinde lezers (700,000 Nederlanders!). Zelf koos ik in mijn blog voor onderstreept nadat ik dit artikel las.

Weten of jouw linkjes oké zijn? Maak je blik een beetje wazig en ‘scan’ dan je tekst. Vallen de links nog steeds op? Dan zijn ze goed.

 

Hoe benut je titels en tussenkopjes?

Een langere webtekst deel je op in alinea’s. Vaak gebruik je daarvoor ook een titel, bovenaan de pagina, en tussenkopjes boven de verschillende onderdelen. Op deze manier:

Voorbeeld headers

Die titels en tussenkopjes maken je tekst niet alleen overzichtelijk, ze helpen ook bij je zoekmachineoptimalisatie (SEO). Maar dat werkt alleen als ze op de juiste manier in de tekst zijn gezet.

Je zou je tekst gewoon groter en dikgedrukt kunnen maken. Dat heeft voor de kijker hetzelfde effect. Maar zoekmachines ‘zien’ dat als gewone tekst. Door je titels en kopjes tussen H-tags te zetten, of header-tags, laat je Google weten: deze tekst is extra belangrijk. Voor de titel gebruik je H1 (eentje per pagina), voor je tussenkopjes H2 of soms H3.

Wil je hier meer over weten, lees dan even mijn blog over header-tags.

 

 

Dat waren ze!

Nu weet je hoe je jouw teksten slim op je website kunt zetten. Het is een beetje extra werk, maar  je hoeft ’t maar één keer in te stellen, daarna gaat het automatisch goed.

En je doet het niet voor de sier: mooi gepresenteerde webteksten leveren jou meer geld op.

2018-05-02T11:39:17+00:00