Typografie in ontwerp

Eerste indrukken zijn belangrijk, zoals elke merkprofessional weet. De meeste gebruikers verlaten een webpagina heel snel als de inhoud niet duidelijk en overtuigend is. Je creatieve team werkt hard om je merkboodschap over te brengen in aansprekende, toegankelijke taal. Nu rekenen ze op jou om goede typografie- en ontwerpbeslissingen te maken voor betere leesbaarheid en merkbetrokkenheid.

Lees verder om meer te leren over:

• Wat typografie is, en waarom het belangrijk is
• 5 meest populaire soorten lettertypen en 6 sleutelelementen van typografie
• Hoe vind en verken je lettertypen en fonts met Figma

Wat is typografie?

Typografie in design houdt in dat je een systeem van lettertypen en fonts creëert of selecteert om het geschreven woord uit te drukken. Deze creatieve kunstvorm kan sterke emoties oproepen door visueel aantrekkelijke letters te gebruiken en typografie zo te rangschikken om de persoonlijkheid van je merk uit te drukken. Goed vormgegeven typografie kan duidelijke communicatie verbeteren, met gemakkelijke leesbaarheid en leesgemak.

Waarom is typografie belangrijk?

Typografie speelt een belangrijke rol bij het creëren van kwaliteitswebsites, apps, e-mails, e-boeken en meer. Goede typografie kan je helpen:

• Trek gebruikers aan met lettertypen en typografische elementen die hun aandacht trekken voordat ze beginnen te lezen.
• Stel visuele hiërarchie in met consistente lettergroottes, diktes, schreef- en/of schreefloos lettertypen, lettertypencombinaties en lettertypecombinaties om gebruikers te begeleiden en de leesbaarheid te verbeteren.
• Bouw merkherkenning op. Wanneer het consistent wordt gebruikt, helpt goede typografie gebruikers jouw merk te herkennen door het lettertype en de stijlen die voor je merkcontent worden gebruikt.
• Ondersteunt inhoudelijke doelen. Consistente letterspatiëring, regellengtes, hoofd- en kleine letters, en andere typografische elementen verhogen de leesbaarheid, terwijl lettertypen die als grafische ontwerpelementen worden gebruikt de toon en betekenis versterken.

Een korte geschiedenis van de typografie

Johannes Gutenberg hielp in de jaren 1400 een Europese evolutie van lettertypen te ontketenen toen hij de eerste metalen drukpers met losse letters uitvond. Gutenberg gebruikte oude stijl lettervormen van kalligrafie (ook bekend als Gotisch) om langere regels tekst te zetten voor manuscripten en religieuze teksten. Drukkers in Italië creëerden al snel een eenvoudiger, compacter lettertype - oorspronkelijk Antiqua genoemd, nu beter bekend als Romeins. Europese drukkers introduceerden vervolgens cursieve lettertypen, waardoor er nog meer woorden per pagina werden gezet.

Versnel naar het eind van de 1700 en het begin van de 1800, toen de eerste moderne schreeflettertypen op de markt kwamen. Schreefloze lettertypen volgden en domineerden de Europese drukwereld tot de 20e eeuw. Dat was toen schonere, beter leesbare lettertypen zoals Times New Roman, Futura, Helvetica en Arial de overhand namen. Tegenwoordig hebben grafische en webdesigners wereldwijd toegang tot grote bibliotheken met lettertypen en fonts.

5 meest populaire soorten lettertypen

Moderne ontwerpers kiezen doorgaans uit vijf populaire soorten lettertypen: serif, sans serif, script, monospace en koppen en titels. Elk lettertype omvat een familie van lettertypen, die de verschillende stijlen van dat lettertype dekken. Bijvoorbeeld, Helvetica is een lettertype, terwijl Helvetica Light en Helvetica Regular lettertypes zijn.

• Serif-lettertypen: Dit formele, meer traditionele lettertype heeft korte lijnen of omlijning die uitsteken aan de boven- en onderkant van lettervormen. Gerenommeerde merken zoals New York Times, Sony en J.P. Morgan kiezen voor een serif-lettertype. Voorbeelden zijn Times New Roman en Garamond.
• Schreefloze lettertypen: Deze eenvoudige, moderne lettertypen bevatten niet de versieringen die je in een schreeflettertype vindt. Het is een populaire keuze voor jeugdige merken en tech start-ups (denk aan Target, Airbnb en Doordash). Voorbeelden van schreefloze lettertypen zijn Helvetica, Arial en Calibri.
• Script lettertypen: Dit vloeiende, cursieve lettertype kan variëren van elegante kalligrafie tot speelse handschriftstijlen. Niet ideaal voor doorlopende tekst, werkt een scriptlettertype het beste voor citaten, handtekeningen en korte kopjes. Voorbeelden zijn Snell Roundhand, Pacifico en Scriptina.
• Monospace lettertypen: Dit retro, typemachine-stijl lettertype bevat letters en spaties van vaste breedte, zodat elk karakter dezelfde breedte heeft. Gebruikt in broncode voor betere leesbaarheid, verschijnt het monospace lettertype ook op talrijke websites en in grafische ontwerpen. Voorbeelden zijn Courier, Bergen Mono en Source Code Pro.
• Display lettertypes: Ook wel decoratief genoemd, deze opvallende letterstijl kan wat flair en originaliteit toevoegen aan logo's, banners en koppen. Voorbeelden van lettertypes voor koppen en titels zijn Clearview, Johnston en Skywalker.

Belangrijke elementen van typografie

Je kunt de uitstraling, de leesbaarheid en de sfeer van een woord, regel tekst of product aanpassen door een of meer typografische elementen aan te passen.

Uitlijning

Om balans te bereiken en gebruikers gemakkelijk langs een pagina te laten bewegen, lijn ontwerpelementen uit, zoals je logo, een afbeelding, kop en hoofdtekst. Verdeel elk ontwerpelement gelijkmatig en gebruik marges en tussenruimte consistent. Links-, rechts-, volledig- of middenuitlijnen van je tekst op basis van de behoeften van je project. Ontwerpers kunnen bijvoorbeeld een kop of korte zin centreren, maar lange kopij links uitlijnen.

Kleur

Kies een kleurenpalet dat consistent is met je merk en duidelijk je boodschap overbrengt. Pas de ondoorzichtigheid van de tekst aan en gebruik complementaire kleuren die goed contrasteren met elkaar om leesbaarheid en toegankelijkheid te waarborgen. Je kunt een kleurenwielgenerator gebruiken om een goed gebalanceerd kleurenpalet te creëren. Professionele tip: Bekijk de Web Content toegankelijkheid Guidelines voor ideale contrastverhoudingen. Vettere, fellere kleuren kunnen beter werken voor koppen en subkoppen, terwijl neutrale kleuren geschikt zijn voor grote lappen tekst.

Hiërarchie

Het ontwikkelen van hiërarchie in je typografie helpt prioriteiten te stellen en belangrijke informatie naar voren te halen, zodat deze gemakkelijk te scannen en te begrijpen is. Maak koppen groter dan subkoppen en subkoppen groter dan lopende tekst. Website lopende tekst is bijvoorbeeld meestal 16px, met H1-koppen ingesteld op 48px. Speel met witruimte, tekstuitlijning, kleur en verschillende lettertypen om visuele hiërarchie te versterken.

Spatiëring

Pas de hoeveelheid ruimte aan tussen individuele letters, zodat de afstand consistent lijkt. Juist kerning helpt om de visuele aantrekkingskracht van je tekst te vergroten en de leesbaarheid te verbeteren.

Interlinie

Leading verwijst naar de regelhoogte, de afstand tussen de basislijn van een regel tekst en de basislijn van de tekstregel erboven. Over het algemeen resulteert een regelhoogte die 1.125 tot 1.200 keer de lettertypegrootte is (112.5%–120.0%) in een betere leesbaarheid. Elk lettertype vereist dus een fijne afstemming, inclusief zorgvuldige regelafstand.

Tracking

Je kunt de leesbaarheid verbeteren met tracking (ook wel afstand tussen tekens genoemd), die betrekking heeft op de algehele ruimte tussen de letters in een woord of regel tekst. Vergroot tracken om ruimte toe te voegen en verklein tracken om deze te verminderen. Woorden of zinnen die in hoofdletters worden weergegeven, zijn soms gemakkelijker te lezen met verhoogde tracking.

Hoe kies je het juiste lettertype

Het proces voor het kiezen van een lettertype bestaat uit de volgende belangrijke stappen:

• Bekijk je projectomvang, vereisten en doelen. Stel je team belangrijke inhoudsvragen: Hoe leveren we content aan (via app, website, e-mail of gedrukte materialen)? Wie is ons publiek en wat zijn hun behoeften? Welke lettertypen en fonts gebruiken onze concurrenten? Houd er rekening mee dat sommige lettertypen beter werken voor kopteksten dan voor menuteksten. Anderen hebben grote lettertypefamilies met internationale schriften, glyphs en andere speciale tekens.
• Creëer een moodboard om een visuele toon te ontwikkelen, gebaseerd op gebruikers- en concurrentieonderzoek. Om te beginnen, gebruik FigJam’s moodboard-sjabloon. Pro-tip: Het bekijken van vergelijkbare oplossingen kan helpen bij het identificeren van bruikbare patronen en normen.
• Verken lettertype-opties op je computer of op sites zoals Google-lettertypen. Zoek naar een lettertype met visuele aanwijzingen die weergeven wat je met je product of merk wilt overbrengen. Als bijvoorbeeld de toon van je merk professioneel in plaats van luchtig is, kies dan een serieus lettertype met weinig versieringen. Welke van deze Figma Design-voorbeelden lijkt je professioneler? Als je het module aan de linkerkant hebt gekozen, ben je op de goede weg. Dat module maakt gebruik van Roboto, een strak en goed leesbaar schreefloos lettertype. De module aan de rechterkant bevat Almendra, een op kalligrafie gebaseerd lettertype dat vaak wordt gebruikt in kinderboeken.

• Kies lettertypen die passend bij het merk en opvallend zijn om je projectdoelen te ondersteunen. Overweeg de algehele constructie van de letters (bijv. x-hoogtes, kaphoogten, openingen, oplopende en aflopende lijnen), het vermogen om te schalen, leesbaarheid, persoonlijkheid en versiering. Deze elementen beïnvloeden het algehele uiterlijk en gevoel van een lettertype.
• Probeer je lettertypen uit met echte, relevante inhoud. Dit is de beste manier om een lettertype te kiezen dat je gebruikers aanspreekt. Probeer het lettertype in een paar verschillende maten om ervoor te zorgen dat het werkt voor zowel grote als kleine tekst.
• Test je merk kleuren op je lettertype. Begin methet plaatsen van zwarte tekst op een witte achtergrond en witte tekst op een zwarte achtergrond. Breng vervolgens je primaire merkkleur aan op de tekst, en kijk hoe het lettertype werkt tegen zowel witte als zwarte achtergronden. Draai de kleuren om te zien hoe witte en zwarte tekst eruitziet op een achtergrond in je primaire merkkleur.

Gewicht en stijl

In een lettertype, bijvoorbeeld Montserrat van Julieta Ulanovsky en studio, zijn er meerdere stijlen en diktes, zoals normaal, vet, cursief, dun, zwart, enzovoort, en elk heeft een font. Een lettertype is een bestand voor het installeren en gebruiken van een set lettertypen in een bepaald lettertypedikte en tekststijl. Een lettertype met meerdere diktes heeft een lettertype voor elk gewicht, samen staan ze bekend als een lettertypefamilie.

Het lettertype Montserrat heeft een lettertypefamilie van 18 lettertypen: dun, dun Italic, Extra-Light, Extra-Light Italic, Light, Light Italic, Regular, Regular Italic, Medium, Medium Italic, Semi-Bold, Semi-Bold Italic, Bold, Bold Italic, Extra-Bold, Extra-Bold Italic, zwart, en zwart Italic.

Gewicht verwijst naar de dikte van een letteromlijning. Een lettertype kan in diktes variëren van haarlijn tot ultrazwart en vele lettertypen daartussenin hebben, terwijl sommige lettertypes slechts in één gewicht verkrijgbaar zijn. Deze diktes hebben ook een nummeraanduiding, wat handig is om te weten bij het programmeren of samenwerken met een ontwikkelaar. Diktes corresponderen meestal met een nummer op een schaal van 100 tot 900, met intervallen van 100: Normaal 400, Medium 500, Semi-Vet 600, Vet 700, enz.

Lettertype stijl is de aanpassing van de tekens of hoofdletters, zoals cursief en allemaal hoofdletters respectievelijk. Sommige lettertypes hebben geen stijloptie en bieden soms alleen een normale gewicht optie.

Hoofdlettergebruik, ook simpelweg "case" genoemd, is het onderscheid tussen kleinere letters zoals kleine letters en grotere letters zoals hoofdletters of kapitalen. De meeste lettertypesets hebben letters in beide, terwijl lettertypen zoals Bangers alleen in hoofdletters zijn gezet. Lettertypes die alleen in hoofdletters of alleen in kleine letters zijn ingesteld, komen veel minder vaak voor.

In het Engels worden verschillende stijlen anders gebruikt, afhankelijk van de omstandigheden:

• Titel Hoofdletters, is een stijl met gemengde hoofdletters waarbij alle woorden in een zin worden gecapitaliseerd, met uitzondering van lidwoorden, korte voorzetsels en voegwoorden. Deze uitzonderingen zijn enigszins subjectief.
• Hoofdletters aan het begin van de zin is wat we gewend zijn om tekst in te zien, inclusief deze zin.
• ALL CAPS is wanneer alle tekst in hoofdletters is en wordt vaak gebruikt voor koppen, woordmerken, knoptekst of andere soorten labels. Gebruik het voor nadruk, in plaats van voor lange teksten waar het gebrek aan stokletters en staartjes het moeilijk leesbaar kan maken in grote hoeveelheden. All Caps wordt online ook gebruikt om schreeuwen aan te duiden, dus vermijd het gebruik in chat- en conversatie-gebaseerde interfaces.
• Kleine kapitalen zijn vergelijkbaar met hoofdletters, maar zijn even hoog als de x-hoogte van het lettertype. Kleine kapitalen worden gebruikt om onderscheid te maken van de hoofdtekst en kopteksten, hoewel ze niet in veel lettertypen worden aangeboden.
• Alle tekst in kleine letters is een stilistische keuze die in sommige producten en woordmerken wordt gebruikt voor esthetische doeleinden.

Formaat

Het instellen en wijzigen van de lettergrootte kan een moeilijke beslissing zijn. Het zal sterk afhangen van het medium waarop de tekst zal verschijnen, zoals papier, mobiele telefoon of reclamebord, en kan veranderen afhankelijk van het apparaat van de kijker of de responsiviteit van het ontwerp.

Het is belangrijk om hiërarchie in je letterkeuze te bepalen, waarbij grootte een van de elementen van nadruk is.

Bij webontwikkeling moeten enkele belangrijke maten worden gedefinieerd, zoals de kop, subkop, lopende tekst, menu- en voettekst, enz. Veel ontwerpers beginnen met de grootte van de kop, ook bekend als de H1, maar het kan handig zijn om te starten met de grootte van de lopende tekst, omdat front-endontwikkelaars vaak van deze tekst uitgaan bij de implementatie. Wanneer een ontwikkelaar in ems werkt, een eenheid van maat gebaseerd op schaling, is de grootte van de lopende tekst 1em en elke andere grootte van de tekst is een meervoud of fractie daarvan.

Een veel voorkomende grootte van de lopende tekst voor het web is bijvoorbeeld 16px. De H1 kan ingesteld worden op 3em, of drie keer de grootte van de lopende tekst, in dit geval 48px. Aangezien de webpagina ontworpen zal worden voor meerdere schermgroottes, kunnen de ontwerpen die je maakt verschillende lettertypegroottes vereisen, afhankelijk van het apparaat van de klant. De ontwikkelaar kan de grootte van de lopende tekst laten veranderen met de browserdimensies van je klant, en alle andere tekst zal overeenkomstig schalen.

Details

Veel van typografie zit in de kleine details en nuances.

Een voorbeeld: bij het opmaken van tekst is een van de aspecten die moeten worden onderzocht de uitvulling. De uitvulling is de oneffen rand van links- en rechts-uitgelijnde tekst. Het kan worden gemanipuleerd door de breedte van een tekstvak te vergroten en te verkleinen of de letterspatiëring van de hele tekst te wijzigen.

Wanneer één of twee woorden aan het einde van een alinea eindigen, wordt dit typisch een 'Weduwe' genoemd. Of aan het begin van de volgende kolom, een 'Wees'.

Echter, zoals May-Li Khoe opmerkt:

Noem ze in plaats daarvan "danglies".

Terwijl tekstvakken worden aangepast om bungeltjes te voorkomen, wordt de regellengte aangepast. Voor doorlopende tekst in het Engels, is het ideaal voor toegankelijkheid en leesbaarheid om de regellengte te beperken tot ongeveer 40 tot 60 tekens, inclusief spaties en interpunctie. Als de regellengtes langer moeten zijn dan 60 tekens, verhoog dan de regelhoogte voor een betere leesbaarheid.

Een van de eenvoudigste manieren om een document of interface er goed ontworpen uit te laten zien en aan te laten voelen, is consistentie in waar objecten zich in de ruimte bevinden.

Stel dat het scherm van je app een titel heeft en dat deze 100px van de bovenkant van het frame of scherm is. Je wilt dat alle andere app-schermen met soortgelijke titels die titels op dezelfde plaats hebben.

Gidsen en metingen zijn hier je vrienden – gewoon klikken en slepen vanuit een liniaal in Figma om een gids te maken, en houd de Alt-toets ingedrukt wanneer een object is geselecteerd om de afstand tot de objecten eromheen te zien.

Overweeg de linkerkant of de linker verticale marge van een website, poster, app-scherm, infographic, enz., met een logo, een afbeelding, een koptekst en wat lopende tekst. Het uitlijnen van deze elementen maakt het makkelijker voor het oog om de pagina te volgen, maar zorgt er ook voor dat de lay-out van deze inhoud doordacht en intentioneel lijkt.

Uitlijning is een concept van uitlijning specifiek voor blokken of tekstregels.

• Links uitgelijnd is wanneer het begin van elke regel tekst op dezelfde x-waarde langs een linkermarge begint. Dit staat ook bekend als links uitgelijnd en creëert een hobbel aan de rechterkant.
• Recht uitgelijnd betekent dat het einde van elke regel tekst gelijk ligt met een rechter marge. Dit wordt ook wel rechts uitgelijnd genoemd en het creëert een rafelrand aan de linkerkant.
• Volledig uitgevuld is wanneer zowel de linker- als de rechterkant van regels tekst gelijk zijn met beide zijden van het tekstvak. Letterspatiëring en woordspatiëring worden aangepast om elke regel tekst op een consistente breedte in te stellen. Er is geen rafelrand bij volledige uitlijning.
• Gecentreerde tekst is de afwezigheid van uitlijning.

Begin je typografie-verkenningen met Figma

Figma biedt professionele ontwerphulpbronnen om je op weg te helpen, waaronder Figma’s ontwerptool en voorbeelden van lettertypeverkenning. Je kunt ook een merk-stemmingsbord maken met de FigJam’s stemmingsbordmaker.

Voor meer professionele tips, zie Figma's artikel over hoe typografiesystemen in Figma te bouwen en implementeren.

Inspiratie nodig? Bekijk de uitgebreide bibliotheek van typografie sjablonen, voorbeelden en stijlhandleidingen die door de Figma-gemeenschap worden gedeeld.

Klaar om een lettertype te vinden dat je merk naar een hoger niveau tilt?