typografie op het web

Typografie op het web

Van analoog naar digitaal

Typografie is de aloude kunst en techniek van het vormgeven, opmaken, zetten en drukken van tekst. Althans in de analoge wereld. Typografie in de digitale wereld is een jong vak, waar technologie de hoofdrol speelt. Dat vraagt om een andere benadering.

Typografie is nodig om een geschreven taal inzichtelijk, leesbaar en prettig over te laten komen. Zodat de tekst die je communiceert, optimaal een boodschap vertelt. Hoe gebruiken we typografie zo goed mogelijk om deze boodschap te vertellen? Hoe verschilt analoge typografie van digitale en waar moet je rekening mee houden?

Van drukpers tot digitaal

Typografie bestaat al sinds de uitvinding van het schrift. Al eeuwenlang is nagedacht over de evenwicht van de typografie ten opzicht van de bladspiegel* en hoe het overkwam op de lezer. Toen in de 15e eeuw Johannes Gutenberg de drukpers introduceerde, kwam de moderne typografie tot leven. Voor het eerst in de geschiedenis was het mogelijk om snel en eenvoudig teksten te reproduceren en kennis te delen met grote groepen mensen. Qua vormgeving stonden Gutenbergs boeken bekend om de evenwichtige bladspiegel, de zorgvuldig gekozen ligaturen**, witruimtes en afkortingen in zijn ontwerp.

Sinds die tijd is er veel gebeurd, de drukpers is geëvolueerd en gemoderniseerd. Maar inmiddels is het eigenlijk de norm om content dagelijks via een monitor te zien te krijgen. Hoewel in 1975 de eerste pc aan de consumentenmarkt werd opgeleverd en we het internet pas kennen sinds 1989. We leven nog helemaal niet zo lang in het digitale tijdperk, typografie op het web staat dus nog in de kinderschoenen.

De bladspiegel/het grid

Zoals elk boek een bladspiegel kent, kent typografie op het web een grid. Een grid is een systeem om zowel verticale als horizontale lijnen te gebruiken om content op uit te lijnen. In essentie is het dus een manier om content (afbeeldingen, video en tekst) gestructureerd te presenteren op een gebruiksvriendelijke en beheersbare manier.

Door het gebruik van een gridsysteem creëer je consistentie en uniformiteit op je website. Het is een solide basis waarop je je content plaatst en uitbreidt. Dit is essentieel als je een website wilt ontwerpen die goed te navigeren, lezen en te begrijpen is. Een goede gebruikerservaring bereik je namelijk door de gebruiker te begeleiden en een gevoel van herkenbaarheid tussen alle onderliggende elementen vorm te geven.

Welk lettertype je gebruikt hangt volledig af van het project. Welke sfeer of toon wil je neerzetten? Zo geeft een serif een meer klassieke uitstraling dan de meeste sans-seriflettertypes. De keuze valt of staat echter niet bij één van deze twee. Er zijn verschillende categorieën binnen de typografie en elk heeft zijn eigen doel.

Serif
Een serif (ook wel: schreefletter) is een lettertype (of font) met uitstekende delen aan de "pootjes" van de letters. Hierdoor zijn onderlinge letters meer onderscheidend van elkaar en dus sneller herkenbaar. Een lettertype geschikt voor langere teksten, omdat het minder snel zorgt voor leesvermoeidheid.

Sans serif
Sans-serif (ook wel: schreefloze letter) is een lettertype dat relatief vaker gebruikt wordt op digitale schermen. Het geeft meestal een rustiger beeld dan serif op een digitale scherm. Op kleinere resoluties kunnen schreven namelijk wegvallen, vandaar dat schreefloos zich goed leent voor kleinere digitale schermen.  

Display
Wil je de aandacht van de gebruiker direct pakken en naar je toe trekken? Gebruik een displaylettertype. Deze zijn speciaal ontworpen om in titels en kreten de aandacht van de gebruiker te vangen.

Handwritten
Alsof het “echt” geschreven is. Vaak wordt dit soort lettertype gebruikt (ook wel: scriptletter) om het analoge gevoel terug te brengen in de tekst. Let hier wel op dat de meeste lettertypes slechts één variant voor een letter hebben. Gebruik je dit in lange teksten, dan valt de analoge illusie snel door de mand.

Monospaced
Een monospaced lettertype maakt gebruikt van een standaard horizontale ruimte. Hierdoor is het beter om niet te gebruiken bij lange teksten. Gebruik dit type font alleen als je er een specifiek doel mee wilt bereiken, zoals bijvoorbeeld het visualiseren van ‘code’.

Maar ook binnen de categorieën is er een groot verschil. Vergelijk maar eens de overbekende Arial met de meer elegante en geometrische Futura, beide sans-serif. Arial is speciaal ontworpen voor het beeldscherm én om goed leesbaar te zijn op klein formaat. De Futura is gemaakt voor een elegante en conceptuele visualisatie van de content.

Gebruik van je lettertype

De keuze van de lettertype in je project is belangrijk, maar nog belangrijker is hoe je deze gebruikt.

Gebruik van typografie

Hiërarchie
Een titel behoort meer waarde te hebben op een pagina dan een paragraaf. Een subtitel trekt direct de aandacht van een paragraaf, terwijl een citaat er juist uit moet knallen. Bepaal een goede hiërarchie tussen je H1-H6***, je paragrafen en alle andere soorten content. Geef deze verschillende soorten een ranking en maak dit visueel ook duidelijk. Dit kan door bijvoorbeeld door kleur, grootte, gewicht, vlakken en andere creatieve manieren.

Ritme
Witruimte in typografie is een van de belangrijkste gebruiken wanneer je werkt met typografie. Het gaat om een consistent gebruik van witruimte tussen regels, paragrafen, titels en beeldmateriaal. Het verschil kan soms subtiel zijn, maar omdat mensen van nature gewend zijn om patronen te zien heeft witruimte veel invloed op de leesbaarheid van de tekst.  

Flexibiliteit
Digitale typografie is niet vaststaand, zoals in een boek. Hoogstwaarschijnlijk zit er een CMS achter waarin tekst gewijzigd kan worden. Content wordt gelezen op diverse schermen, van telefoon tot televisie. Hoe ga je dan om met typografie als de titel langer wordt dan verwacht? Typografie binnen een website is een flexibel systeem. Het moet kunnen veranderen, maar altijd passend en intact blijven op verschillende schermen.

Conclusie

Het web is nog jong, de technologie om typografie goed te gebruiken bestaat nog pas kort en is constant in ontwikkeling. Maak hiervan gebruik: speel, experimenteer en probeer uit. Bedenk goede redenen waarom je op welke manier typografie gebruikt en maak dit visueel duidelijk. Houd in je achterhoofd dat het web flexibel is, content niet voor eeuwig vaststaat en inwisselbaar is. Je ontwerpt vaak systemen voor inwisselbare content, en geen vaste structuren voor vaste resoluties. En dáár zit nu juist de kracht van goede typografie voor het web.

*Bladspiegel: het formaat van de pagina met zijn indeling in teksten en witruimtes.

**Ligatuur: een teken gevormd door twee of meer lettervormen in één vorm te schrijven of te drukken. In het algemeen twee tekens die anders in elkaar zouden grijpen, bijvoorbeeld een overhangende f gevolgd door een stokletter: b, f, l, k, h.

***H1-H6: zijn heading tags of HTML header tags, waarin H1 de belangrijkste en H6 de minst belangrijke is.