of het nu op onze telefoons, in boeken of op websites staat, we verteren voortdurend geschreven woorden. Van instructieboekjes tot winkelfronten, type is overal om ons heen. We denken vaak na over de kracht van het geschreven woord, maar zelden beschouwen we de rol van de ontwerper in het nabootsen van de toon van het woord of de zin.
Achter de schermen heeft een ontwerper de tijd genomen om na te denken over de relatie tussen het uiterlijk van de tekst en wat de tekst zegt. In werkelijkheid kunnen verschillende stemmingen, atmosferen en emoties eenvoudig worden uitgedrukt door middel van de typekeuze. Maar wat is typografie eigenlijk—en waarom is het zo belangrijk?
in dit artikel, zullen we het deksel op alles wat je moet weten over typografie. We beginnen met de definitie van typografie, inclusief een korte geschiedenis van zijn oorsprong. We zullen dan ingaan op de voordelen van een goede typografie en de impact die het kan hebben op uw gebruikers. Tot slot zullen we kijken naar de verschillende elementen die typografie bevatten, en wat ze allemaal betekenen.
Dit is wat we zullen behandelen:
- Wat is typografie?
- Waarom is typografie belangrijk?
- de verschillende typografische elementen
- Hoe kiest u het juiste lettertype voor uw website
- conclusie
klaar? Laten we erin duiken!
Wat is typografie?
laten we beginnen met de basis: wat is typografie eigenlijk? In essentie is typografie de kunst van het ordenen van letters en tekst op een manier die de kopie leesbaar, duidelijk en visueel aantrekkelijk maakt voor de lezer. Typografie omvat lettertypestijl, uiterlijk en structuur, die tot doel heeft om bepaalde emoties op te wekken en specifieke berichten over te brengen. Kortom, typografie is wat de tekst tot leven brengt.
in de video hieronder, careerfoundry UI design mentor Olga tilt de deksel op waarom typografie belangrijk is—en wat het verschil maakt voor uw gebruikers.
typografie kan worden gedateerd uit de 11e eeuw, tijdens de innovatie van het verplaatsbare type. Voor het digitale tijdperk, typografie was een gespecialiseerd ambacht geassocieerd met boeken en tijdschriften, en uiteindelijk openbare werken. Het eerste voorbeeld van typografie is te zien in de Gutenberg bijbel, die de aanzet gaf tot een typografische revolutie in het westen. Fun fact: de stijl van het type gebruikt in de Gutenberg Bijbel is nu bekend als Textura, en je vindt het in het lettertype drop down menu op de belangrijkste desktop applicaties vandaag!
snel door naar de moderne tijd, waar typografie meestal wordt geassocieerd met zowel de digitale wereld als de gedrukte wereld. Met de geboorte van het internet kwam een creatieve explosie van de kunst van de typografie. Plotseling, webdesigners hadden een overvloed aan lettertypen en type opties tot hun beschikking, waardoor typografie meer visueel divers dan ooit tevoren.
Waarom is typografie belangrijk?
Typografie is zoveel meer dan alleen het kiezen van mooie lettertypen: Het is een essentieel onderdeel van het ontwerp van de gebruikersinterface. Goede typografie zal een sterke visuele hiërarchie vast te stellen, zorgen voor een grafische balans aan de website, en zet het product de algemene toon. Typografie moet uw gebruikers begeleiden en Informeren, de leesbaarheid en toegankelijkheid optimaliseren en zorgen voor een uitstekende gebruikerservaring.
laten we wat dieper ingaan op waarom typografie zo belangrijk is.
typografie bouwt merkherkenning
niet alleen zal een goede typografie de persoonlijkheid van de website verbeteren, maar uw gebruikers zullen subliminaal beginnen het lettertype op uw site te associëren met uw merk. Unieke, consistente typografie zal u helpen een sterke gebruiker volgen, vertrouwen opbouwen met uw gebruikers, en helpen om uw merk vooruit te dragen.
typografie beïnvloedt de besluitvorming
typografie heeft een diepgaand effect op de manier waarop gebruikers de informatie die door de tekst wordt overgebracht, verwerken en waarnemen. Opvallend type is veel overtuigender dan zwakke lettertypen die de boodschap van de tekst niet versterken.
typografie houdt de aandacht van de lezers
goede typografie kan het verschil zijn tussen iemand die een minuut of een half uur op uw website blijft. Het is belangrijk dat uw website visueel stimulerend en memorabel is, en typografie speelt een grote rol in dit proces.
de verschillende typografische elementen
om met typografie te beginnen, moet u eerst de acht essentiële typografische ontwerpelementen onder de loep nemen.
lettertypen en lettertypen
Er is enige verwarring over het verschil tussen lettertypen en lettertypen, waarbij velen de twee als synoniem behandelen. Een lettertype is een ontwerpstijl die een groot aantal tekens van verschillende grootte en gewicht omvat, terwijl een lettertype een grafische weergave is van tekstkarakter. Simpel gezegd, een lettertype is een familie van verwante lettertypen, terwijl lettertypen verwijzen naar de gewichten, breedtes en stijlen die een lettertype vormen.
Er zijn drie soorten lettertype: serif, Sans-serif en decoratief. Om de interface overzichtelijk en gestroomlijnd te houden, zal een goede ontwerper nooit meer dan drie lettertypen gebruiken-en decoratieve lettertypen tot een minimum beperken. De meeste UI ontwerpers zullen serif lettertypen koppelen aan sans-serif lettertypen, zoals het plaatsen van hoofdtekst in een serif lettertype en het zetten van uw titel in een Sans-serif lettertype, of vice versa.
Contrast
net als hiërarchie, helpt contrast om over te brengen welke ideeën of boodschap u wilt benadrukken aan uw lezers. Wat tijd doorbrengen op contrast maakt uw tekst interessant, zinvol, en aandachttrekkend. De meeste ontwerpers maken contrast door te spelen met verschillende lettertypen, kleuren, stijlen en maten om impact te creëren en de pagina te breken.
consistentie
het consistent houden van uw lettertypen is de sleutel om een verwarrende en rommelige interface te vermijden. Bij het overbrengen van informatie, is het essentieel om vast te houden aan dezelfde lettertype stijl, zodat uw lezers direct begrijpen wat ze lezen, en beginnen te merken een patroon. Hoewel het ok is om te spelen met niveaus van hiërarchie tot op zekere hoogte, is het een goede gewoonte om een consistente hiërarchie van lettertypen (een consistent lettertype voor headers, een ander voor subrubrieken) en vasthouden aan het vast te stellen.
witruimte
vaak aangeduid als ‘negatieve ruimte,’ witruimte is de ruimte rond tekst of afbeeldingen. Het wordt vaak over het hoofd gezien en de neiging om onopgemerkt door de gebruiker te gaan, maar goed gebruik van witruimte zorgt ervoor dat de interface is overzichtelijk en de tekst is leesbaar. Witruimte kan zelfs de aandacht vestigen op de tekst en biedt een algehele esthetische ervaring. Witruimte neemt vaak de vorm aan van marges, opvulling of gewoon gebieden zonder tekst of afbeeldingen.
uitlijning
uitlijning is het proces van het verenigen en samenstellen van tekst, afbeeldingen en afbeeldingen om ervoor te zorgen dat er gelijke ruimte, grootte en afstanden tussen elk element zijn. Veel UI ontwerpers maken marges om ervoor te zorgen dat hun logo, koptekst, en het lichaam van de tekst zijn uitgelijnd met elkaar. Bij het uitlijnen van uw gebruikersinterface, is het een goede praktijk om aandacht te besteden aan industriestandaarden. Bijvoorbeeld, het uitlijnen van uw tekst naar rechts zal contra-intuïtief lijken voor lezers die van links naar rechts lezen.
kleur
kleur is een van de meest opwindende elementen van typografie. Dit is waar ontwerpers echt creatief kunnen worden en de interface naar een nieuw niveau kunnen tillen. Tekstkleur is echter niet lichtvaardig te nemen: nailing uw lettertype kleur kan de tekst opvallen en de toon van het bericht overbrengen —maar het verkeerd krijgen kan resulteren in een rommelige interface en tekst die botst met de site kleuren.
kleur heeft drie belangrijke componenten: waarde, tint en verzadiging. Een goede ontwerper zal weten hoe deze drie componenten in balans te brengen om de tekst zowel opvallend als duidelijk leesbaar te maken, zelfs voor mensen met visuele beperkingen. Vaak zullen ontwerpers dit testen door de tekst in grijswaarden (zonder kleur) te bekijken en tweaks te maken als de tekst te donker of te licht is tegen de achtergrondkleur.
hiërarchie
het vaststellen van hiërarchie is een van de belangrijkste principes van typografie. Typografische hiërarchie is bedoeld om een duidelijk onderscheid te maken tussen prominente stukken van kopie die eerst moeten worden opgemerkt en gelezen, en standaard tekst kopie. In een tijdperk van korte aandachtsspanne veroorzaakt door sociale media, ontwerpers worden aangespoord om beknopt te zijn en lettertypen die gebruikers in staat stellen om de nodige informatie te consumeren in korte hoeveelheden van de tijd te creëren.
hiërarchie kan worden gemaakt met behulp van grootte, kleur, contrast en uitlijning. Bijvoorbeeld, als je een lijn van de kopie met een uitroepteken pictogram aan het begin dat is in het rood en groter dan de vorige kopie, dit is een visuele aanwijzing voor de lezers dat het een oproep tot actie. Het meest typische voorbeeld van typografische hiërarchie is de grootte: kopjes moeten altijd groter zijn dan subrubrieken en standaardtekst.
hoe kiest u het juiste lettertype voor uw website?
nu we vertrouwd zijn met de verschillende typografische elementen, laten we het hebben over het proces van het kiezen van lettertypen voor uw interface. Met zoveel verschillende lettertypen en lettertypen om uit te kiezen, is het gemakkelijk om overweldigd te voelen. Het maken van de juiste keuze hangt af van zoveel meer dan alleen maar zien wat er mooi uitziet. Hier zijn een paar belangrijke overwegingen:
denk na over persoonlijkheid
hoe wilt u dat uw gebruikers zich voelen wanneer ze voor het eerst uw website betreden. Wil je een vriendelijke sfeer nadoen? Wil je dat de site zich high-end, gastvrij, speels of Serieus voelt? Het is noodzakelijk dat de typografie de persoonlijkheid van het merk of product weerspiegelt. Een goed uitgangspunt wanneer geconfronteerd met deze uitdaging is om de kerneigenschappen van uw merk te definiëren, en beginnen met het verzamelen van lettertypen die deze eigenschappen weerspiegelen. Vanaf daar kun je een trend beginnen op te merken.
reflecteer op Toon
Het is even belangrijk om te overwegen hoe het lettertype harmonieert met de toon van het bericht. Als u bijvoorbeeld ernstige of belangrijke informatie wilt overbrengen, kiest u een minder gestileerd of decoratief lettertype dat duidelijk leesbaar is en afleiding beperkt.
niet beknibbelen op functie
functie is net zo belangrijk als vorm: er is niets erger dan een website die er mooi uitziet maar volledig onleesbaar is, waardoor u op de verkeerde knop klikt of een verkeerde afslag neemt omdat de instructies onduidelijk waren. Bij de beslissing welke lettertypen op te nemen in uw interface, Zet de stijl, esthetische, en stem opzij en nadenken over de vraag of het lettertype is leesbaar, leesbaar en toegankelijk. Kan de tekst leesbaar zijn zonder spanning? Zijn de personages duidelijk genoeg?
beschouw prestaties
een ding dat veel ontwerpers vaak over het hoofd zien is het kiezen van lettertypen die webbrowservriendelijk zijn. Veelgebruikte lettertypebibliotheken zoals Google fonts bieden webgebaseerde lettertypebestanden die zonder problemen perfect in een browser kunnen worden weergegeven. Tip voor experts: als u weblettertypen downloadt, download dan nooit meer tekensets dan nodig is. Zo vermijd je overgewicht!
laat u inspireren
Als u niet zeker weet waar u moet beginnen, neem dan de tijd om te zien wat anderen aan het doen zijn. Open je ogen voor de typografie die je om je heen ziet. Kun je vergelijkbare patronen opmerken? Zie je goede en slechte voorbeelden van typografie? Zelfs na typografie hashtags op sociale media of op zoek naar typografie op Pinterest zal je een aantal goede ideeën van wat er is. Je kunt ook kijken naar deze acht typografietrends voor verdere inspiratie.
neem de tijd om
te testen de beste manier om te ontcijferen welk lettertype te gebruiken voor uw interface? Test, test, en test! Door het verzamelen van nuttige feedback van echte gebruikers, krijg je een duidelijker inzicht in wat werkt, wat niet, wat is leesbaar en wat voelt contra-intuïtief of onhandig.
conclusie
typografie wordt vaak over het hoofd gezien, maar het is een cruciaal onderdeel van het ontwerp van de gebruikersinterface. Mastering typografie ziet u goed op weg naar steeds een fantastische UI ontwerper! Als je niet zeker weet waar te beginnen, waarom niet het hoofd naar uw favoriete websites en beginnen met het maken van een notitie van welke lettertypen ze zijn gegaan voor.
wilt u meer weten over UI design? Bekijk deze gerelateerde blogberichten:
- 10 voorbeelden van mooie blogs die hun UI-ontwerp hebben genageld
- 32 elementen van de gebruikersinterface voor UI-ontwerpers: uw ultieme Woordenlijst
- Hier kunt u een pictogram vanaf het begin ontwerpen: een stap-voor-stap handleiding