4. Vormgeving - Typografie en Leesbaarheid

• Marketing
• MBO
• Studiejaar 1

Vormgeving

Typografie en Leesbaarheid

Hoe haal je deze module?

Tijdens de lessen werk je aan verschillende opdrachten. Om deze module te behalen moet je alle opdrachten gemaakt hebben en tijdens de toetsweek een eindopdracht inleveren.

Je bent geslaagd als je een 5.5 behaald. 

Aan het einde van de les...

... weet je hoe typografie een ontwerp beïnvloedt

... ken je de basisprincipes van lettertypes, lettergrootte en regelafstand

... kan je verschillende categorieën van lettertypes benoemen

... weet je waar je op moet letten voor de leesbaarheid

... weet je wat web safe-fonts zijn en wat de voor- en nadelen zijn

... kan je typografie effectief inzetten in een displayadvertentie

Wat is typografie?

Typografie gaat over het vormgeven van tekst, zodat deze niet alleen leesbaar, maar ook visueel aantrekkelijk en functioneel is.

Goede typografie helpt om een boodschap duidelijk en professioneel over te brengen.

Lettertypes en categorieën

Er zijn ontelbaar veel lettertypes (ook wel typeface genoemd). Dagelijks worden er nieuwe lettertypes gecreëerd. Grofweg kun je al deze lettertypes onderverdelen in 4 categorieën, namelijk:

• Serif
• Sans-serif
• Monospace 
• Display/Decoratief

Serif

Serif lettertype of schreeflettertypen hebben kleine streepjes (schreef) aan het einde van de langere streepjes. Dit type komt uit het oude Romeinse rijk en werd op grote schaal gebruikt met de komst van de drukpers.

Geschikt voor print, maar minder leesbaar op schermen voor stukken tekst, zoals een alinea.

Georgia

Times New Roman

Palatino

Sans-Serif

Sans-Serif lettertype of schreefloos lettertypen hebben geen kleine streepjes (schreef) aan het einde van de langere streepjes.

Sans-Serif lettertypen zijn  modern en door hun eenvoud goed leesbaar voor digitale media.

Arial

Open Sans

Roboto

Verdana

Monospace

Bij een monospace lettertype heeft elk karakter (teken) en spaties een gelijke breedte.

Dit lettertype wordt vaak gebruikt voor het weergeven van code en technische toepassingen

Courier

Display/Decoratief

De display lettertypes zijn het meest gevarieerd. Van uitzinnig fantasievol tot expressief, eigenlijk vallen hier alle ‘afwijkende’ lettertypes onder.

De meeste logo’s zijn opgebouwd uit deze familie letters. Meestal zijn ze ontstaan uit getekende logo’s uit het begin van vorige eeuw. Coca Cola is hier een mooi voorbeeld van.

Pangolin

Luxe merken

Tech merken

Speelse merken

Typografie en branding

Wat valt op?

Hiërarchie en typografie

Je kunt typografie ook inzetten om een duidelijke informatiestructuur te creëren.

Kopjes kunnen bijvoorbeeld een ander lettertype hebben dan overige tekst.

Maar let op: Gebruik niet meer dan twee verschillende lettertypen in één ontwerp.

Gebruik een tool als fontjoy.com om combinaties uit te proberen.

Andere tips:

• Grotere en vetgedrukte tekst voor de belangrijkste boodschap.
• Ondersteunende tekst in een kleinere of lichtere stijl

Leesbaarheid en schermgebruik

Bij het kiezen van een lettertype is het belangrijk om rekening te houden met de leesbaarheid. Weet je nog?         Vorm volgt functie.

Enkele (UX) tips:

• Grotere lettergrootte voor mobiele schermen (minimaal 16px).
• Contrast is cruciaal: Donkere tekst op lichte achtergrond werkt beter dan omgekeerd, vooral bij dunne lettertypes.
• Voldoende regelafstand (minimaal 1,5x de lettergrootte).
• Uitlijning: Links uitlijnen werkt beter dan gecentreerde of uitgevulde tekst voor leesbaarheid.
• Alinea breedte: Houdt regels met tekst tussen 50-60 karakters

Web safe fonts

Web safe fonts zijn standaard lettertypes die op alle MacOS en Windows computers geïnstalleerd zijn en die iedereen zowel online als offline kan gebruiken. Enkele voorbeelden zijn Arial, Verdana en Times New Roman.

Voordeel
Deze lettertypes hoeven niet eerst geladen te worden. Ze zien er altijd goed uit.

Nadeel

Beperkte keuze om je te onderscheiden en niet beschikbaar op Android bijvoorbeeld.

Embed fonts en Google fonts

Embed fonts:

Tegenwoordig kun je lettertypen insluiten (embedden) op je website.

Voordeel    Je kan helemaal je eigen lettertypen gebruiken.

Nadeel        Langere laadtijd en je hebt een (vaak dure) licentie nodig

Google fonts:

Een alternatief is Google Fonts. Hier heb je een ruime keuze uit allerlei lettertypen.

Voordeel     Geen licentie nodig, veel gebruik waardoor mogelijk al gecached.

Nadeel         Niet uniek/exclusief

Opdracht 1/3:

Analyse op lettertypes

Bekijk een website of social media post van een groot merk.

Beantwoord de vragen:

1. Welke lettertypes worden gebruikt?
2. Hoe draagt dit bij aan de merkidentiteit?
3. Is de tekst goed leesbaar? Waarom wel/niet?

Opdracht 2/3:

Experimenteer met typografie

• Open Canva, Figma of Photoshop.
• Kies een korte advertentietekst (bijv. "50% Korting! Alleen vandaag").
• Maak 3 versies:
           1.  Eén met een serif-lettertype
           2. Eén met een sans-serif-lettertype
           3. Eén met een decoratief lettertype.

• Vergelijk: Welke versie is het meest effectief en waarom?

Opdracht 3/3:

Display advertentie met focus op tekst

• Ontwerp een online advertentie van 300x250px voor een fictief merk.
• Gebruik typografie om een duidelijke hiërarchie te creëren:
           1.  Hoofdtekst (groot en opvallend)
           2. Subtekst (kleiner en ondersteunend)
           3. Call-to-action (duidelijke en uitnodigende knop).
• Kies een kleurencombinatie die voldoende contrast biedt.
• Gebruik maximaal twee lettertypen
• Zorg dat de advertentie op desktop én mobiel goed leesbaar is.

Zijn er nog vragen?