Share

Typografie: wat is het en hoe zet je lettertypes in voor jouw design?

21 april 2020

Hoe maak je een lettertype, wat komt er allemaal kijken bij het ontwerpen van typografie, wat is een font precies en hoe bedenk je een lettertype voor een bepaald merk of bedrijf? Ruby weet alles over letters, tekst en design en legt het je uitgebreid uit!

Ruby van den Broek
ruby@goldfizh.nl

Ik vind typografie fascinerend. Op de basisschool had ik al door dat comic-sans “not done” was en op middelbare school kon ik urenlang besteden aan de opmaak van mijn werkstuk… (Twee woorden: Word. Art.) En nog steeds vind ik gepriegel met letters heerlijk.

Typografie is niet alleen leuk, maar voor communicatie ook belangrijk. Toch wordt typografie bij het uitwerken van een huisstijl vaak onderschat. Kleur, vorm en fotografie verdelen al snel het erepodium, terwijl er verwacht wordt dat een lettertype “ook wel even wordt uitgekozen”. Toch zijn typografie – de opmaak van tekst en het gebruik van (leesbare) lettertypes – van essentieel belang voor je merkidentiteit. Een merk met een sterke visuele identiteit kun je vaak zelfs herkennen aan enkel het font.

In deze blog zet ik de basis van typografie in de volgende onderwerpen uiteen:

Even een disclaimer vooraf: sommige stukken zijn gefundeerd op feiten en sommige stukken zijn een beetje subjectief. We hebben het immers over een stukje esthetiek. Onthoud de basis en lap vervolgens de regels soms lekker aan je laars. Let’s go!

Betekenis typografie

Wat is typografie? Typografie is alles wat hoort bij het opmaken van teksten. Denk aan: de keuze van lettertypen, regelafstand en witruimte. De keuze van deze aspecten zijn van invloed bij het bereiken van en het zetten van de juiste toon voor een bepaalde doelgroep.

Typefaces: serif, sans-serif (en slab-serif)

Binnen de typografie kennen we verschillende typefaces. Daarin onderscheiden we globaal twee soorten.

Serif typeface

Een serif typeface is een lettertype met een schreef. Dit noemen we ook wel ‘roman’. Bekende serif fonts zijn bijvoorbeeld Times New Roman, Georgia of Garamond. Deze lettertypes hebben door de schreef een klassieke look en zijn over het algemeen meer geschikt voor print.

Sans-serif typeface

En een sans-serif typeface is een lettertype zonder schreef. Dit noemen we ook wel ‘grotesk’. Bekende sans-serif fonts zijn bijvoorbeeld Arial, Roboto of Helvetica en zijn over het algemeen meer geschikt voor digitaal.

Wat is een schreef?

Een schreef is het lijntje dat bij serif fonts dwars op het uiteinde van de letterlijnen van de letters staat. Bij de sans-serif fonts ontbreekt deze dus. Een schreef geeft de letter een klassieke uitstraling, maar heeft ook een belangrijke functie. Een schreef zorgt er namelijk voor dat langere teksten makkelijker leesbaar zijn, omdat 1) de letters beter van elkaar te onderscheiden zijn en 2) je ogen als het ware over de regels worden begeleidt. Niet gek dus dat je in boeken en kranten eigenlijk altijd serif fonts ziet.

Side note: Vroeger, toen de boekdrukkunst nog in de kinderschoenen stond, hadden drukkers slechts een paar lettertypes om uit te kiezen. Tegenwoordig zijn er duizenden fonts beschikbaar op het internet. Logisch dat veel fonts op elkaar lijken. Wil je jezelf hierin trainen of je collega’s/designer-friends op de proef stellen? Daag ze dan eens uit voor een potje Arial vs. Helvetica! Een grappig spelletje waarbij je teksten in Helvetica van Arial moet onderscheiden.

Slab serif typeface

Globaal gezien hebben we dus twee typefaces. Toch wil ik daar graag een derde aan toevoegen: de slab-serif. Oftewel: de Egyptienne. Waarom Egyptienne? Volgens mij iets met Napoleon in Egypte, maakt verder eigenlijk ook niet uit. De slab serif heeft een schreef, maar deze is anders dan bij een normale serif typeface. Bij een slab serif font is de schreef namelijk vaak vierkant en net zo dik als de letterlijnen zelf. Ik moet altijd denken aan chocoladeletters (of dat aan de slab-serif ligt, laten we even in het midden). Daarnaast zie je de slab serif ook veel in kranten. Op dun papier waar de inkt snel uitloopt, blijft de Egyptienne namelijk beter leesbaar. Bovendien een mooi compromis voor twijfelaars die niet kunnen kiezen tussen een roman en een grotesk.

Font pairing: zo kies je fonts die bij elkaar passen

Font pairing, oftewel: het combineren van lettertypes, is mijn favoriete onderdeel bij het ontwerpen van een huisstijl. Soms is één font voldoende om een sterke identiteit neer te zetten, maar vaak heb je meer dan één lettertype nodig. Zeker als je een social- of campagnestijl meeneemt in het voorstel van je huisstijl. Een extra lettertype kan net wat meer ruimte geven om te spelen. Maar hoe weet je welke fonts goed bij elkaar passen? Ik volg dan het onderstaande stappenplan.

Stap 1: Een sterke basis

Voordat je font gaat combineren, ga je terug naar de basis: de identiteit van jouw opdrachtgever. Je stelt jezelf vragen. Wie is de doelgroep? Wat zijn de kernwaarden van dit bedrijf? Wat wil dit merk uitstralen? Op basis daarvan kies je een lettertype dat dient als basis voor de huisstijl.

Stap 2: Contrast of geen contrast

Je hebt nu een lettertype als basis. Eentje die je bijvoorbeeld gebruikt voor langere teksten. Nu wil je een extra font voor koppen. Dit kan natuurlijk ook andersom. Dan vraag je jezelf het volgende: moet dit extra font een contrast vormen met het basisfont – of juist niet? Met de juiste combinatie kun je balans aanbrengen in je huisstijl.

Bijvoorbeeld: heb je een klassiek font met schreef voor langere teksten en heb je het gevoel dat het te ouderwets wordt? Dan kan je daar juist een modern lettertype tegenover zetten om de balans te herstellen. Je creëert dan contrast. Als je een lettertype nodig hebt dat juist een beetje lijkt op je basisfont, kies je een ‘matching font’. Dan heb je juist weinig contrast.

Side note: vraag je dan wel af of je dat extra font echt nodig? Kan ik niet beter één hetzelfde font gebruiken? Ik maak daarin altijd een keuze. Als je in het midden blijft hangen, wordt het hem namelijk nét niet en dat is zonde.

Stap 3: Kiezen!

Als je start met het combineren van je fonts, contrast of niet, let ik op een aantal aspecten: de breedte van de letters, de hoogte van de letters, wel of geen schreef en de vorm van de schreef. Ga je voor contrast? Combineer dan bijvoorbeeld een lekker breed font met een heel smal, condensed font, een handgeschreven font met een sans serif font of een klassieke roman met een strakke grotesk. Wat ik wel altijd “match”, is de afronding van de hoeken. Daarmee zorg je dat de fonts mooi aansluiten. Hieronder een aantal voorbeelden.

Hieronder zie je een paar voorbeelden van hoe het wel én niet moet:

Zoek bij font pairing vooral naar balans. Zo kun je de perfecte uitstraling neerzetten voor jouw opdrachtgever.

Basisregels typografie

Bij het ontwerpen van een leesbare tekst zijn een aantal dingen belangrijk: fontgrootte, interlinie, kerning en uitlijning. Er zijn een aantal basisregels die je kunt gebruiken, maar het gebeurt ook vaak genoeg dat je hier vanaf wijkt.

Fontgrootte: de size van het lettertype

Font size spreekt voor zich: de grootte van je lettertype. Hoe groot je de tekst maakt, hangt erg af van het gekozen font en van het middel waarop je tekst verschijnt. Maak je een boek of een brochure op? Dan gebruik ik vaak 9pt of 10pt. Bij 12pt tot 14pt ga je echt richting kinderboeken. Ontwerp je digitale uitingen, zoals een website of een app? Dan mag je tekst een stuk groter! Denk hierbij aan 15pt tot 20pt. De tekst die je nu leest op onze Goldfizh website is 16pt.

Interlinie: de afstand tussen de regels

Interlinie is de ruimte tussen de regels van je tekst, ook wel ‘leading’ genoemd. Een goede interlinie zorgt ervoor dat je tekst goed leesbaar blijft. Ook kan het echt invloed hebben op je design. Een tekst met een te kleine interlinie ziet er propperig uit, terwijl een tekst met een grote interlinie een beetje uit elkaar kan vallen. Belangrijk om hierop te letten dus.

Ook hierin zie je veel verschil tussen print en web. Op school heb ik ooit geleerd: interlinie = font size + 4. Meestal komt dit wel uit, maar als je tekst groter wordt, vervalt deze regel. Een tekst van 50pt zou dan een interlinie krijgen van 54pt. Ziet er niet mooi uit, vind ik. Daarom gebruik ik altijd: interlinie = font size x 1,35. Dan blijft de boel wat meer in verhouding. Voor web maak ik mijn interlinie vaak iets ruimer. Een andere uitzondering op de regel geldt voor teksten in all caps (alleen hoofdletters). Daar wil je de interlinie juist kleiner.

Kerning: de ruimte tussen de letters

Bij het maken van een font, zorgt de ontwerper dat de letters over het algemeen netjes achter elkaar staan. Maar sommige letters wijken zo af, dat er te veel of te weinig ruimte tussen lijkt te zitten. Kijk maar eens naar de afbeelding en deze A en een V. Door de letters te “kernen”, zorg je ervoor dat deze mooi op elkaar aansluiten. Bij lopende teksten is dat meestal niet zo relevant (en bovendien véél te veel werk), maar bij het maken van een logo des te meer. De enige manier om dit goed onder de knie te krijgen, is door het veel te oefenen. Dit kerning-spelletje is daar perfect voor!

De uitlijning van je tekst

Linkslijnend, gecentreerd of rechtslijnend. En vul je je tekst uit of niet? Over het algemeen geldt: linkslijnend leest het lekkerst. Toch je tekst wil centreren? Op een poster of een flyer is dat prima. Let dan op de andere teksten in je document en probeer hier een beetje consistent in te zijn.

Extra tip: ga voor langer lopende teksten voor max. 10 woorden op een regel. Dat leest het lekkerst.

Typografie voorbeelden, inspiratie en trends

In mijn zoektocht naar inspiratie kan ik soms verdwalen in de wondere wereld van het internet. Ik sla alles op wat ik interessant vind op mijn Pinterest typografie-board, zodat ik het later nog een keer kan terugkijken. Nu zien we daarin een aantal dingen vaker terugkomen. Trend alert! Deze trends moet je echt in de gaten houden.

Trend 1: Geen hoofdletters

Logo aan het ontwerpen? Alle tekst in kleine letters. Dat lijkt een ‘must’ te zijn als je in het rijtje van hippe bedrijven wil thuishoren. Airbnb, Asos, de Dutch Design week: ze hebben allemaal een logo waar geen hoofdletter aan te pas komt.

Trend 2: Fluid Type

Fluid type betekent: vloeibare typografie. Een tikje artistiek, maar wel heel erg vet. Bij Fluid type lijkt het alsof je letters bijna wegsmelten in je designs. We zien dit terug bij o.a. Down the Rabbit Hole.

Trend 3: Serif type for web

Oké oké, niet heel nieuw meer, maar wel interessant omdat het tegen het principe ingaat dat serif typefaces alleen geschikt zijn voor print. Niet dus! De Google library staat vol met serif web fonts die juist online goed werken. MailChimp heeft dit helemaal eigen gemaakt, net als platform Medium en kledingmerk & Other Stories. Ook opvallend: veel koppen met schreef!

Trend 4: Contrast in typografie

Wat je nu ook heel veel ziet, is contrast in typografie. En dan vooral in de breedte van de letters. Super wide vs. super narrow, het liefst gecombineerd in dezelfde regel of zelfs hetzelfde woord. Go bold! Go wild! I like it.

Hulp nodig met typografie?

Mocht je nou behoefte hebben aan een kritische blik op jouw huisstijl, denk je dat jouw typografie wel een opfrisser kan gebruiken of wil je gewoon eens kletsen? Neem dan even contact met mij op via ruby@goldfizh.nl.

Meer weten over deze story?

Ruby vertelt je graag meer over dit onderwerp.

Mail naar ruby@goldfizh.nl
Ruby van den Broek
Senior UX-/UI-designer