Menu

Typografie voor websites

Leo 11 december 2008

Typografie houdt zich bezig met tekstuele vormgeving en wordt in de meeste gevallen toegepast om het doel en de inhoud van een tekst te ondersteunen. Een tekst moet bijvoorbeeld prettig leesbaar zijn. Vandaar dat in print-producten vaak een lettertype met schreef gezet. Terwijl voor het beeldscherm juist schreefloze lettertypes worden gebruikt.

Niet alleen de keuze voor het lettertype is belangrijk voor een website. Kleur, grootte, hiërarchische indeling en de ruimte rondom tekst zijn 4 belangrijk onderdelen. Ik zal kort per onder bespreken waarom deze zo belangrijk zijn.

Contrast

Het is verstandig om een duidelijk contrast te hanteren tussen tekst en achtergrond. Wanneer een kleurenblind iemand een website bezoekt, moet deze wel de tekst kunnen onderscheiden. Gebruik daarom nooit een voor- en achtergrondkleur van dezelfde tint. Ook het W3C heeft zelfs een algoritme opgesteld om de waarden voor contrast goed op een juiste manier te gebruiken.

Grootte

Tekst moet goed leesbaar zijn, wil een bezoeker moeite doen om de tekst überhaupt te lezen. Met de komst van de ‘Web 2.0’-trend, werden er eerst hele kleine lettertypes gebruikt op websites. Met als resultaat dat deze slecht leesbaar werden. Sommige ontwikkelaars gebruikten de kleine lettertypes vanwege hun minimalistische opzet, terwijl anderen niet door hadden dat het lettertype te klein was voor de gemiddelde bezoeker.

Laat de ‘body’-tekst niet kleiner worden dan 10 á 12 pixels. Als het even kan zelfs nog wat groter. Je kunt de opmaak van tekst in de CSS zelfs met percentages specificeren, zodat men deze eventueel zelf kan aanpassen in zijn/haar browser.

Hiërarchie

Verschil in lettergrootte is één van de beste oplossingen om onderscheid te maken in teksten. Kleuren en mooie vakjes kunnen helpen, maar verschillende letter groten, consequent gebruikt, zal de bezoeker snel en duidelijk een beeld geven van belangrijkste inhoud.

Als voorbeeld, Wij gebruiken op onze website voor titels het lettertype “Myriad Pro” in een oranje kleur met een lettergrootte van 250% van de standaard instellingen. De kopjes, zijn donkergrijs en 200% van de standaard grootte. Terwijl de ‘body’-tekst 80% van de standaard grootte is. Overal worden deze instellingen gebruikt, wat de website zeer overzichtelijk houdt.

Ruimte

Laat je tekst ‘ademen’. Geef het de ruimte, want tekst bevat de grootste boodschap van een website. Een goede vuistregel is de lijnhoogte die tenminste 140% van het lettertype is. Goede lettertypeontwerpers besteden heel veel tijd aan de micro-witruimte welke in het lettertype zit. Zij besteden talloze uren om een evenwicht te krijgen tussen het zwart en de witruimte.

Altijd op de hoogte blijven?