Afbeelding voor Typografie in een notendop

Typografie in een notendop

Tekst is een designer’s droom en nachtmerrie. Want een goed gezette tekst is hemels, terwijl onze tenen gaan krommen van slechte typografie. In dit blog leggen we je dat begrip —typografie— uit. Aan de hand van.. juist, beeld.

In een vorig blog hadden we het er al over: design is 70% content. Of het nu gaat om tekst in kranten of tekst op websites, het moet ‘gezet’ worden. De kunst van het plaatsen van tekst heet typografie en is de basis van vormgeving.

Wat is typografie?

De essentie van typografie is simpel. Met een combinatie van lettertype, grootte, contrast en ruimte, geven we leven aan teksten. Logisch, toch? Zonder typografie is er geen tekst, tenzij je het zelf schrijft.

Wat typografie doet kunnen we wel met dure woorden omschrijven, maar we kunnen beter laten zien. We starten met instellingen die je misschien nog kent van je schooltijd: Times New Roman, grootte 12, dubbele regelafstand. Spoiler alert: in de volwassen wereld blijf je deze instructies tegenkomen, vooral als je richting publicaties (tijdschriften, boeken en wetenschappelijke artikelen) gaat. De tekst die we gebruiken, is de intro van de Wikipediapagina over Nijmegen.

Typografie voorbeeld. Tekst in Times New Roman, 12pt, dubbele regelafstand.

Van die bovenstaande tekst worden we niet heel gelukkig. Tenzij we teksten aan het redigeren zijn, brengt dit een gaap op. Zo’n tekst willen we niet lezen. Wat als we een titel toevoegen, alinea’s laten inspringen en de regelafstand aanpassen?

Typografie voorbeeld. Prettig leesbare tekst.

Dat nodigt al meer uit om te lezen.

Typografie is vorm

Door te spelen met lettergrootte, contrast en ruimte, veranderen we de functie van een tekst. In sneltreinvaart gaan we de door de mogelijkheden heen. Wat dacht je van een krantenknipsel?

Typografie voorbeeld. Tekst als krantenartikel.

Misschien is een krantenknipsel wat traditioneel voor een webbureau. Wat als we dat krantenknipsel online zouden zetten?

Typografie voorbeeld. Tekst als krantenartikel.

Ook al hebben we geen afbeeldingen gebruikt, de tekst is geoptimaliseerd om op een scherm te lezen. De onderlijning van bepaalde woorden verraadt dat het een online artikel is. Daarvoor hebben we geen kleur nodig.

Nu hebben we het over een krantenartikel. Maar kun je van een Wikipedia-artikel ook poëzie maken?

Tekst als poëzie.

De tekst vloeit als een rivier over de regels heen. Door enters te plaatsen op bepaalde plaatsen, kunnen we spelen met de snelheid waarop jij de tekst leest. Zo leggen we nadruk op bepaalde woorden.

Van die rivier kunnen we ook een waterval van maken.

Tekst als waterval, bijvoorbeeld bij een boekomslag.

Een waterval aan tekst is niet bedoeld om te lezen. Dat doen we met opzet. Denk maar aan ellendig lange contracten. Die zouden we mooi kunnen opmaken, maar als we niet willen dat je de kleine letters leest..

Door te spelen met het contrast, kunnen we ervoor zorgen dat je bepaalde dingen wel leest — en bepaalde dingen juist niet.

Typografie is spelen met letters

Laten we ons focussen op Nijmegen. Kunnen we, door te spelen met de typografie, hier een logo van maken?

De tekst als logo geplaatst.

Nog steeds 100% typografie (en 100% Times New Roman), alleen dan slim geplaatst.

Spelen met typografie. Grafisch ontwerpers zijn hier goed in. Want wat zouden we doen als we de Wikipedia-tekst in een magazine zouden plaatsen?

Tekst als weergave in een magazine.

Een goede grafisch ontwerper heeft helemaal geen beeld nodig. Wat dacht je van een poster? Of een patroon voor op bijvoorbeeld een canvas tas?

Tekst als posters.

Het belang van goede typografie

Typografie kun je in drie categorieën indelen: goed, standaard en slecht. Offline zit dat meestal wel snor. Maar online? Oh oh. Vaak is het huilen.

Goede én slechte voorbeelden

Voorbeelden van goede typografie kun je het makkelijkst ontdekken bij nieuwssites. De grotere, serieuzere nieuwssites hebben een goede balans tussen typografie en beeld. Denk aan NRC, New York Times en The Atlantic. Ze zijn bedoeld om te lezen: de tekst staat niet in de weg van andere content.

Screenshot van een artikel op de website van de New York Times.
Door het overbodige weg te laten, kun je op de website van de New York Times daadwerkelijk een artikel lezen zonder afgeleid te worden.

Voor de wat mindere voorbeelden van typografie kom je al snel uit bij populaire blogs. Vooral kookblogs kunnen er wat van.

Een screenshot van een recept op de website van het magazine delicious.
Zó veel stijlen door elkaar op deze receptenpagina van delicious.

We kunnen natuurlijk wel de schoonheidsfoutjes van delicious. benoemen, maar dat brengen we liever in beeld.

Hoe wij de delicious.-pagina zouden aanpakken

Zo kun je je steentje bijdragen

Tekst moet gewoon goed staan, offline en online. De meest efficiënte manier om dat te doen, is om een eerste versie van je teksten aan te leveren wanneer het designproces begint. Zo kunnen designers anticiperen wat er komt te staan. Dit voorkomt het gebruik van lorem ipsum en zorgt tegelijkertijd voor de perfecte balans tussen beeld en tekst. Wat weer zorgt voor beter leesbaarheid. En dat is wat we op het web willen hebben.

Afbeelding voor Ilse

Kom je er niet uit met je typografie? Neem contact op!

Nieuwsbrief sfeerbeeld