Typografie in WordPress: De puntjes op de i

Arial of Verdana? Typografie in WordPress is meer dan dat!

In mijn contact met mijn klanten ontdek ik vaak, dat er nogal wat onduidelijkheid bestaat over de keuze van het ‘juiste’ lettertype. Natuurlijk bestaat het ‘juiste’ lettertype net zo min als de ideale partner, maar net zo goed als partnerkeuzes af en toe fout lijken te gaan, gaat het ook nogal eens mis met de keuze van het font.

Richtlijnen voor een verzorgde typografie

Nu enkele regels om de typografie van je pagina er ‘Goed’ uit te laten zien:

In de opmaak van de content je pagina gebruik je in principe niet meer dan twee font families: Eén voor de kopteksten (headings) en één voor de ‘broodtekst’.

Soms kan een webpagina er heel carnavalesk uitzien, door het groot aantal fonts wat is gebruikt. Wanneer het echter geen site van een carnavalsvereniging is, is het beter dit aantal te beperken tot 2 fonts. Hierdoor is het ook direct duidelijk aan de lezer wat de functie van de tekst is.

Zorg voor makkelijk leesbare fonts voor de ‘broodtekst’.

Dit lijkt misschien een overbodig advies, maar over ‘makkelijk leesbaar’ kunnen de definities nog al eens verschillen. Om het heel eenvoudig te stellen: We zijn er aan gewend, dat bepaalde letters een bepaalde vorm hebben. Voor sommige letters bestaan alternatieve vormen (zoals bijvoorbeeld voor de ‘g’ en de ‘a’), maar de meeste letters hebben een vaste, vertrouwde vorm. Wanneer in een font hier van af wordt geweken (zoals nogal eens in zogenaamde ‘script’ fonts gebeurd, fonts die het handschrift na proberen te bootsen), moeten we bewust of onbewust meer van onze hersenen vergen om de tekst te kunnen lezen. Dat is acceptabel voor headings, maar compleet onacceptabel voor de broodtekst. Toch kom ik regelmatig nog websites tegen, waar ‘script’ fonts worden gebruikt voor de inhoud.

Ook de lettergrootte is een belangrijke factor voor de leesbaarheid van de tekst. Ooit, toen we nog allemaal met de monitor van onze desktop computer naar webpagina’s keken, gold de regel, dat de tekst het liefst zonder de scrollen direct helemaal gelezen kon worden. Sommige webdesigners dachten dat dit dus betekende, dat je een klein lettertype moest gebruiken, dan paste er immers meer op de pagina.

Punten en pixels

Bovendien was er nog de gigantische spraakverwarring tussen ontwerpers die gewend waren primair voor drukwerk, en ontwerpers die gewend waren primair digitaal te werken. Een punt (eenheid voor lettergrootte in druk) en een pixel (een beeldpunt op het beeldscherm) mogen dan in benaming hetzelfde klinken: 12 punten is veel groter dan 12 pixels op een moderne monitor. Door deze Babylonische spraakverwarring zijn eind jaren negentig en begin deze eeuw heel wat internetpagina’s voorzien van een veel kleiner font, dan ooit bedoeld was.

Met de komst van laptops, tablets en telefoons is een tekst die op één pagina past een illusie geworden en het is weer toegestaan een groter, leesbaar font te gebruiken.

Wissel Serif en Sans Serif af!

‘Serif’ is de typografische benaming voor de ‘schreef’, ofwel het (dwars)streepje wat je in veel lettertypen aan de uiteinden van de letters ziet staan. Sans is Frans voor ‘zonder’ en sans-serif betekent dan ook ‘zonder schreef’ of ‘schreefloos’. Voorbeelden van serif zijn Georgia en Times New Roman, voorbeelden van sans-serif zijn Arial en Verdana.

Gebruik geen twee fonts van eenzelfde type, maar verschillende breedte door elkaar!

Arial is smal, Verdana is breed. Het gebruik van beide lettertypen in één tekst zal al snel een onrustige indruk geven. Hetzelfde bereik je met Times New Roman en Georgia. Let hierop bij het kiezen van je fonts.

Houdt een logische structuur van headings aan.

Een heading, de koptekst, verdeelt je tekst in een aantal ‘delen’. Veel mensen denken, dat je ‘heading’ iets te maken heeft met de grootte van je tekst: Fout! Het is een functie in de tekst: Je tekst heeft één titel, in Koptekst 1, kan onderverdeeld zijn in een aantal secties, voorzien van een kopje in koptekst 2, iedere sectie kan weer een aparte onderverdeling hebben in koptekst 3. En zo voort. De grootte van zo’n heading wordt in principe bepaald door de bouwer van het thema. Of als jij de site via WordPress XPress laat bouwen, door jou!

Zorg voor voldoende ‘lucht’ in de tekst.

Papier leest makkelijker dan beeldscherm. Om de lezer van je website tegemoet te komen, zorg je ervoor, dat jouw pagina makkelijk te lezen is. Korte paragrafen, duidelijke regelafstand, veel witruimte en af en toe een afbeelding om het ’tekstbeeld’ te doorbreken.

Zorg dat de tekst makkelijk scanbaar is.

Hier ga ik zelf ook nog al eens in de fout. Niet iedereen wil ieder woord van je pagina lezen. Zorg dus dat door voldoende tussenkopjes en uitgelichte passages (vet of cursief weergegeven) de lezers eerst kan ‘koppensnellen’ voor hij besluit de pagina wel of niet te willen lezen.

Samenvattend

Typografie is een vorm van kunst. Het is de kunst om door het juist plaatsen van de juiste lettertypen de bezoeker het gevoel te geven, dat hij de tekst graag wil lezen. Kunstenaars op dit gebied zullen jij en ik misschien niet worden. Maar zoals bij iedere kunst, begint de beheersing ervan met een stuk vakmanschap. Voor je kunstenaar kunt worden, moet je het vak verstaan. Dit -en komende- artikelen over webtypografie zullen ons beiden helpen, voortaan prettiger leesbare pagina’s voor onze bezoekers te maken.

Een nieuwe website?

Wanneer je kiest voor een standaard WordPress thema ben je vaak beperkt in de mogelijkheden met betrekking tot de keuzen van de fonts, de grootte van de headings en andere zaken die jouw pagina net dat eigen karakter kunnen geven. Wanneer je jouw website door middel van WordPress XPress laat bouwen, heb je het allemaal zelf in de hand: Een website op maat in één dag! Heb je al een website, maar ben je niet tevreden over de gebruikte lettertypes en geeft jouw thema geen mogelijkheden deze aan te passen, dan zijn er vaak nog andere mogelijkheden om heel wat aan het tekstbeeld te verbeteren. En met behulp van de supportstrippenkaart zijn dit soort aanpassingen nog betaalbaar ok!