Webtypografie

helvetica aap

Dit artikel is een verkorte versie en vertaling van
http://ilovetypography.com/2008/02/28/a-guide-to-web-typography/

Typografie gaat niet alleen over het kiezen van een font, of over het onderscheiden van het ene lettertype van het andere. In recente experimenten bleken getrainde apen 9 van de 10 keer in staat om Helvetica te herkennen.

Contrast

Vaal roze op een vaal blauwe  achtergrond, misschien iets voor je t-shirt, maar het is niet goed leesbaar. Tekst is er om gelezen te worden; om dat te bereiken zorg je voor genoeg contrast met de achtergrond. Als je twijfelt over het contrast maak dan een schermopname van je pagina, open die in een beeldbewerkingsprogramma en zet de afbeelding om naar grijswaarden. Je ziet meteen of het contrast hoog genoeg is. Robert Bringhurst, een door de wol geverfde typograaf schrijft, typografie bestaat om de inhoud te verhelderen. Verhelderen we de inhoud als we onze pagina’s zo ontwerpen dat de tekst, de inhoud, slecht te lezen is?

Contrast

Afmeting

is your type big enough?

Maak body tekst niet kleiner dan 12 pixels, en maak hem groter als dat mogelijk is. Wat leesbaar is op je 65 inch high definition plasma monitor, is dat misschien niet op een 15 inch macbook. Bij twijfel maak je de tekst groter.

Hierarchie

Variatie in lettergrootte is een van de beste manieren om inhoud te onderscheiden. Kleur en mooie kadertjes kunnen helpen, maar verschillende lettergroottes, mits consequent toegepast op al je pagina’s, maken heel erg duidelijk aan je lezers wat de belangrijke onderdelen op een pagina zijn. Het zorgt er ook voor dat lezers met weinig tijd snel de belangrijke stukjes vinden, en dat kan er toe leiden dat ze langer blijven en verder lezen.

hierarchy can be achieved in many ways — just remember to be consistent

Hiërarchie kan ook op andere manieren bereikt worden.  Behalve tekst-grootte kunnen we ook verschillende stijlen gebruiken, bijvoorbeeld alles in hoofdletters, of italic voor onderkopjes. Het mengen van schreef en schreefloos is ook een optie.

Ruimte

Laat je tekst ademen. Ben niet bang om delen van je pagina leeg te laten. Deze witruimte zal de tekst meer op laten vallen. En daar gaat het om. Denk ook aan de regelhoogte –line-height in CSS- ; een goede vuistregel is een regelhoogte van tenminste 140% van je tekst grootte (denk eraan, het gaat over webtypografie).

Goede letterontwerpers besteden heel veel aandacht aan de micro witruimte in een letter. Ze besteden ontelbare uren om het evenwicht bereiken tussen het zwart van de letter, en het wit dat erin en ertussen ontstaat. Op dezelfde manier moeten wij de tijd nemen voor de grote witruimte, de ‘leegtes’ die vorm geven aan de tekstblokken.

space, not to be confused with nothingness :)

Het zijn geen regels, maar richtlijnen.