
Geschreven op 08.06.2010 om 08:32 door Niels de Vries.
| Typografie is zoveel meer dan alleen lettertypes. Een goede typografie bepaald eigenlijk al zo'n 80% van de uitstraling van een website. Het is dan dus ook belangrijk om voor een goed lettertype te kiezen. En wanneer het lettertype is gekozen, zijn er nog erg veel manieren om dit lettertype op te maken. Ik licht enkele punten uit die belangrijk zijn voor een goede typografie.
1. Fontkeuze (lettertype) Zorg bij het uitzoeken van een lettertype er in ieder geval voor dat deze rechtenvrij is. Probeer daarnaast een uitgebreide familie (font-family) te zoeken in plaats van maar een lettertype. In deze familie zouden in ieder geval bold, medium, light en condensed moeten zitten (figuur 1). Kijk ook naar de speciale tekens (special characters, figuur 2). Bij sommige families zijn deze niet standaard inbegrepen, of maar ik kleine getale. Het zou zonde zijn als je een mooi lettertype hebt gevonden, maar daarbij een zwak vraagteken of apenstaartje.
Figuur 1
Figuur 2 2. Leesbaarheid (readability) Wanneer je een goed lettertype hebt gekozen, moet het natuurlijk ook goed leesbaar zijn. De tekst en de achtergrond moeten in contrast staan (figuur 3) en het lettertype moet niet te klein zijn (zorg dat de body tekst op een website niet kleiner is dan 10px).
Figuur 3 Wanneer je gekozen hebt voor een lettertype die niet standaard is, zorg er dan voor dat er een goede balans is tussen de vorm en de leesbaarheid. De vorm kan nog zo mooi zijn, maar als deze niet te lezen is, heb je er vrij weinig aan. 3. Ruimte (space, whitespaces en leading/linespacing) Letters hebben de ruimte nodig, dus geef deze ook de ruimte. Witruimte om de letters heen bevorderd de leesbaarheid en het oogt een stuk rustiger. Gebruik twee of drie maal de witruimte tussen woorden aan de zijkant van te tekst (figuur 4). Doe je dit niet, dan verwachten de lezers dat er nog meer tekst komt, maar die is er dus niet.
Figuur 4 Ook genoeg de ruimte tussen regels (leading) bevorderd de leesbaarheid van de tekst. Wanneer deze te dicht op elkaar staan, zal de tekst moeilijk leesbaar zijn (figuur 5). Je merkt dat de tekst links veel rustiger oogt en bovendien prettiger te lezen is.
Figuur 5 4. Titels (headings) Wanneer je een tekst aantrekkelijk wilt maken, kun je het beste met titels (of koppen) en subtitels werken (figuur 6). Dit maakt een tekst aantrekkelijk en de haastige lezer kan de belangrijkste informatie uit de koppen halen en de, voor hem of haar interessante stukken lezen.
Figuur 6 5. Uitlijnen (align) Het uitlijnen van de tekst is erg belangrijk. Afhankelijk van de locatie van de tekst kun je er voor kiezen om de tekst links, rechts of gecentreerd uit te lijnen. 6. Niet te doen (dont's) Gebruik nooit serif (schreef) en sans-serif (schreefloos) in dezelfde compositie. Dit staat erg rommelig (figuur 7). Uitzondering hierop is het gebruik van een kop en een subkop (zie punt 4).
Figuur 7 Ook het gebruik van meer dan twee verschillende lettertypes binnen een compositie wordt sterk afgeraden. Net als meerdere uitlijningen gebruiken. Mensen lezen een tekst op een bepaalde manier. Als het eerste gedeelte links is uitgelijnd, verwachten ze dat van het tweede gedeelte ook. Daar komt bij dat het rommelig uit gaat zien wanneer de ene helft links is uitgelijnd en de andere helft gecentreerd. Typografie is vaak nog een ondergeschoven kind op gebied van (web)design, terwijl je hebt gemerkt hoe belangrijk dit is voor de uitstraling van een website / flyer / poster, etc. Ik zie typografie nu als een belangrijk onderdeel van webdesign. Inspiratie: De tien meest voorkomende misverstanden van typografie Video, vijf dingen over typografie De (basis)gids voor web typografie Reacties Thomas Offinga
08.06.10 om 17:40 Website Tof artikel, Niels! Ben het helemaal eens met je opmerking over de leading. 160-180% is meestal wat nodig is. Iets wat ook zeer belangrijk is, is regellengte. Volgens mij was dit rond de 65-70 karakters per regel. Niels
08.06.10 om 23:44 Dankjewel! Dat punt heb ik er inderdaad niet bijgedaan, maar is ook een belangrijk onderdeel en klopt het wel ongeveer wat je zegt! Thnx! Peter W
11.06.10 om 13:13 Goed Niels! Zal studenten naar je site verwijzen, scheelt mij weer een college en een paar consults :)) Schrijf een reactie
* verplichte velden, emailadres wordt niet getoond. |