You may want to put some text here

10 typografieregels voor webdesigners

Voor de meeste beginnende webdesigners zal de term typografie iets zijn waar ze al wel eens van gehoord hebben maar nooit echt aandacht aan besteed hebben. Terwijl typografie één van de krachtigste tools is van een webdesigner. Maak je een prachtige layout en gebruik je een verkeerd lettertype of zelfs een verkeerde groote van letter dan kan dit heel de lay-out verpesten.

In dit artikel zal ik een aantal regels geven waar je je als beginner best probeert aan te houden tijdens het designen van een website. Als je dit doet dan zal je ook meteen zien dat de kwaliteit van je designs er drastisch op vooruit zal gaan.

Om even de kracht te laten zien van de juiste lettertypes en grootes kan je eens kijken naar deze websites. Je moet maar eens letten op het gebruik van verschillende lettertypes en grootes.

Lijn hoogte

In CSS kan je gaan werken met verschillende lijnhoogtes. Dit kan ervoor zorgen dat je tekst beter leesbaar gaat worden, of dat deze juist wat meer in het oog springt dan een andere paragraaf op dezelfde pagina.

line-height

In CSS kan je de lijnhoogte instellen met line-height. Bijvoorbeeld:

p{
line-height: 14px;
}

Regellengte

De lengte van een regel is ook zeer belangrijk. Je wilt niet te lange regels tekst gebruiken omdat het voor een gebruiker dan visueel vrij moeilijk gaat worden om naar de volgende regel te springen. Wat er dus voor zal zorgen dat het heel lastig is om vloeiend de tekst te kunnen lezen.

Je wilt natuurlijk ook niet te korte regels gaan gebruiken, omdat de lezer dan heel veel oogbewegingen gaat moeten maken wat zeer vermoeiend is.

Duidelijke hiërarchie

Een bezoeker moet meteen kunnen zien wat belangrijk is op een pagina en wat minder. Hiervoor zijn de header tags zeer geschikt. De belangrijke dingen op  een website moeten een opvallendere titel krijgen dan bijkomende informatie. Dit kan je doen door te spelen met lettertypes, grootes en kleuren.

Serif of Sans Serif

serif-sans-serifHet verschil tussen Serif en Sans serif fonts is voor veel mensen nog een groot mysterie terwijl het een zeer simpel iets is. Bij Serif lettertypes, ook wel schreef genoemd in het Nederlands heb je op het einde van de letters een klein krolletje of detail wat men de schreef noemt. Bij Sans Serif of in het Nederlands: zonder schreef, zijn de letters op het einde gewoon recht zonder extra detail.

Nu we het veschil weten kan je best gebruik maken van de volgende regel als je een beginnende designer bent.

Voor titels gebruik je best Serif of Sans Serif en voor de inhoud gebruik je Sans Serif lettertypes. Gebruik je toch Serif lettertypes in je inhoud dan loop je de kans dat je inhoud zeer onleesbaar word door de extra details op het einde van de letters. In de meeste gevallen zal dit ook zorgen voor een zeer druk en slordig overkomende tekst.

Ik zeg niet dat het onmogelijk is om Serif lettertypes te gebruiken in de inhoud maar als beginner kun je je beter aan bovenstaande regel houden.

Grebruik hulplijnen

Tijdens het opmaken van je tekst maak je best gebruik van hulplijnen. Zo kan je uniformiteit behouden in je spatiering en kan je verschillende blokken tekst beter uitlijnen naast en boven elkaar.

Een zeer goede plugin om de grid van je website te controleren is Gridfox. Hiermee kan je over je website een grid tekenen om te zien of alles goed is uitgelijnd.

gridfox

Verschillende lettertypes gebruiken

Het is goed om meerdere lettertypes te gebruiken in één design. Let er wel op dat je hier best 2 of 3 lettertypes voor kiest en niet meer. Anders loop je weer kans dat het voor de bezoeker rommelig en onoverzichtelijk gaat overkomen. De beste keuze is meestal 2, dan kan je 1 lettertype voor de hoofdingen gebruiken en 1 voor de inhoud. Hierdoor krijg je weer een beter visuele scheiding tussen wat inhoud en wat hoofdingen zijn.

lettertypes

Consistent gebruik van witruimte

Witruimte is de spatie tussen twee verschillende elementen.  Het is zeer belangrijk dat je consistent bent in het gebruik van witruimte.  Gebruik voldoende witruimte en kleef niet al je teksten tegen elkaar. Door het gebruik van voldoende witruimtes zal je website beter in evenwicht zijn en zal hij juist aanvoelen.

Websafe lettertypes

Naast Arial kan je ook nog andere lettertypes gebruiken op je webpagina. Hieronder vind je een lijst van lettertypes die je kan gebruiken in je websites, omdat deze standaard op zowel Windows als Mac computers geïnstalleerd staan.

Andale Mono

AaBbCcDdEeFfGgHhIiJj

Arial MT

AaBbCcDdEeFfGgHhIiJj

Arial Black

AaBbCcDdEeFfGgHh

Comic Sans MS

AaBbCcDdEeFfGgHhIiJj

Courier New PS MT

AaBbCcDdEeFfGgHhIiJj

Georgia

AaBbCcDdEeFfGgHhIiJj

Impact

AaBbCcDdEeFfGgHhIiJj

Times New Roman

AaBbCcDdEeFfGgHhIiJj

Trebuchet MS

AaBbCcDdEeFfGgHhIiJj

Verdana

AaBbCcDdEeFfGgHhIiJj

Nadruk

Als je nadruk wilt geven aan bepaalde woorden dan wil je de zin niet gaan onderbreken. Het moet voor een lezer een vloeiende zin blijven. Als je een vet woord gebruikt in een zin dan ga je de lezer onderbreken. Het is dus beter om cursieve tekst te gebruiken.

nadruk

Vloeidende tekst lijn

Als je een tekst links uitleind moet je er nog altijd voor zorgen dat de rechterkant van je tekst een vloeiende lijn vormt. Als er teveel versprongen wordt dan gaat dit de lezer afleiden van de tekst zelf.

line-rag

Enkele handige tools

Enkele handige tools die kunnen helpen tijdens het kiezen van de juiste typegrafie voor je webdesign.

Typetester
Verschillende typografie instellingen uittesten.

Typechart
Handige typegrafie CSS snippets.

Pxtoem
Pixels omzetten naar em waardes om deze dan te kunnen gebruiken in je CSS.

Em Calculator
Bereken em waardes afhankelijk van een basis lettertype groote in pixels.

WhatTheFont
Je zult het probleem waarschijnlijk ook al eens tegen het lijf gelopen zijn. Je hebt een prachtig lettertype gevonden in een afbeelding maar je weet niet welke het is. Wel, met deze website upload je de afbeelding en hij zal voor jouw uitzoeken wel lettertype het is.

Tot slot

Natuurlijk zijn de tips die ik hier geef maar het topje van de ijsberg. Typografie krijg je nu eenmaal niet snel onder de knie. Maar als je bij het volgende design dat je maakt al rekening houd met de bovenstaande punten, dan zal je versteld staan van het resultaat.

The Author of this post is Wim Mostmans

Wim Mostmans heeft een eigen webontwikkeling bedrijf Sitebase waar hij voltijds voor werkt. Hij beheert ook nog enkele websites waaronder deze en een Computerforum. Blijf op de hoogte van waar Wim mee bezig is door hem te volgen op Twitter.

8 Responses »

  1. Geachte auteur,

    Per toeval kwam ik terecht bij uw artikel. Best een aardig en nuttig onderwerp, wel met vrij veel open deuren. Soms lijkt een advies ook incompleet. Zo is het bij het definiëren van een vaste regelhoogte van 14px verstandig dat je ook een vaste tekstgrootte (in pixels) definieert. Wat verder o.a. ontbreekt, is dat je beter geen fonts kunt gebruiken waarvan je niet zeker weet dat de lezer ze ook op zijn of haar pc heeft. Design-fonts voor bijvoorbeeld opvallende kopteksten kun je beter verwerken in plaatjes, wat overigens ook weer enkele nadelen heeft.

    Wat een webdesigner naast typografie naar mijn mening ook moet beheersen, is correcte spelling van de Nederlandse taal. Dit artikel bevat opvallend veel storende fouten. Ik noem een paar van de ergste: ‘typografie regels’ (moet één woord zijn), ‘nederlands’ zonder hoofdletter, Jje, layout (moet lay-out zijn), ‘Vloeidende tekst lijn, ‘als je een tekst uitleind’ (twee fouten in één woord!), groote (meermaals fout, dus was het helaas geen tikfout), typegrafie, het niet gebruiken van komma’s waar die wel horen, ‘regel lengte’ (dat moet één woord zijn), arial zonder hoofdletter, ‘dat je al rekening houd’, ‘dat je consisten bent’, curieve tekst’, ‘op het einde’, ‘Hieronder vindt je’ en zo kan ik nog diverse fouten noemen. Zoveel fouten heb ik zelden gezien in een artikel.

    Natuurlijk zijn de tips die ik hier geef maar het topje van de ijsberg. Taalbeheersing krijg je nu eenmaal niet even snel onder de knie. Maar als je bij het volgende artikel al rekening houdt met de bovenstaande punten, dan kom je veel geloofwaardiger over.

    Groeten,
    Walter

  2. Deze opmerkingen zal ik zeker gebruiken tijdens het schrijven van mijn volgende artikels.

  3. Zeer interessant en leuk artikel!
    Verhelderend voor iemand die niet zo heel veel weet van typografie.
    Bedankt.

  4. Een interessant artikel!
    Ik heb er eigenlijk niets op aan te merken;
    prettig te lezen, handige tools en het beschrijft
    op een laagdrempelige manier de basis van typografie
    op het web. Daarom valt mij de zure reactie van Walter
    ook zo op! Open deuren, storende spelfouten,etc. etc. Maar
    dan toch een column er aan wijden! Ook erg vermakelijk hoor!

  5. Bedankt Xiara en Sjako.

  6. Bedankt voor je artikel, zitten interessante dingen tussen.

  7. Comic Sans is geen websafe lettertype.. het is een enorm lelijk lettertype en wordt niet graag gezien bij grafisch ontwerpers.

    just so you know :)

Leave a Comment