Typografie is een van de belangrijkste onderdelen van gebruikersinterfaces (UI) ontwerp op websites. Typografie houdt zich bezig met tekstuele vormgeving en wordt in de meeste gevallen toegepast om het doel en de inhoud van een tekst te ondersteunen.
Tekst is nooit zomaar tekst. Het blijft vaak onopgemerkt in een goed ontwerp, maar een goed letterontwerp kan emotie opwekken, de aandacht sturen en zelfs een typografische identiteit of een visuele eenheid creëren.
Slechte typografie valt daarentegen altijd op. Zelfs voor niet-design-georiënteerde mensen is slechte typografie gemakkelijk op te merken. Het straalt slecht af op het merk en leidt tot een slechte gebruikerservaring, zelfs als gebruikers niet precies weten waarom.
In dit artikel laat ik je zien dat je met een basiskennis van typografie zelf goed kan bepalen welke lettertypes het beste zijn voor modern UI ontwerp en verschillende ontwerpprojecten.
#Wat is User Interface (UI) design?
User interface (UI) design houdt in dat je de visuele en interactieve elementen van een website of app ontwerpt. Dit omvat alles wat een gebruiker ziet en waar ze mee kunnen omgaan, zoals knoppen, menu’s, formulieren en iconen. Ze zijn ontworpen om gebruikers te helpen interactie te hebben met de digitale omgeving en taken uit te voeren.
Een goed UI ontwerp zorgt ervoor dat gebruikers zonder problemen door de website kunnen navigeren, formulieren kunnen invullen en informatie kunnen vinden. Maar UI ontwerp houdt ook rekening met kleuren, afbeeldingen en layout om een consistente, gebruiksvriendelijke en overzichtelijke website te creëren.
Het uiteindelijke doel is om een visueel aantrekkelijke ervaring te bieden die ook functioneel is.
#Het belang van een goede typografie in UI
Zoals al eerder gezegd, typografie speelt een cruciale rol in het user interface (UI) design proces. Het gaat niet alleen om het kiezen van een mooi lettertype, maar ook om het creëren van een leesbare en toegankelijke ervaring voor gebruikers. De juiste typografie in UI zorgt ervoor dat tekstuele informatie duidelijk en gemakkelijk te begrijpen is.
Het gebruik van een uniforme typografische stijl door de hele interface zorgt voor een samenhangende en professionele uitstraling. Maar het draagt ook bij aan de merkidentiteit, omdat specifieke lettertypes en stijlen geassocieerd kunnen worden met een bepaald merk.
Door verschillende typografische technieken, zoals variaties in grootte, dikte en kleur, kunnen ontwerpers de aandacht van gebruikers richten op belangrijke elementen (UI) en informatie. Dit helpt om de inhoud te structureren en maakt het voor gebruikers gemakkelijker om de belangrijkste punten snel te identificeren.
Laten we eens kijken naar de basisprincipes van typografie om je te helpen het beste te halen uit moderne lettertypes voor je gebruikersinterface (UI ontwerp).
#Typografie Richtlijnen (UI)
Als vuistregel geldt dat de basis lettergrootte moet worden gebruikt voor de broodtekst en kleine(re) formaten in navigatie menu’s, terwijl grotere dikgedrukte stijlen moeten worden gereserveerd voor kopteksten (H1-H6).
Basis lettergrootte
Het definiëren van je basis lettergrootte is een belangrijke stap voor responsive web design. De basis lettergrootte verwijst naar de “standaard” of “default” lettergrootte die wordt gebruikt in een website of app. De basis lettergrootte is meestal van toepassing op de meeste paragrafen, labels, inhoudsopgaven en lijsten.
Veel moderne UI’s en websites gebruiken een basis lettergrootte van 16px (1em). Dit is altijd een goede standaard om mee te beginnen, omdat het leesbaar is voor de meeste gebruikers.
Uiteindelijk wil je dat de tekst op je telefoon net zo leesbaar is als de tekst in een goed gedrukt boek (wanneer je hem op een natuurlijke afstand houdt). Op mobiel is de vuistregel om te gaan voor 14px lettergrootte.
Web typografie richtlijnen
Nu we een zeer groot deel van onze dagelijkse informatie niet meer vanaf papier tot ons nemen, maar via beeldschermen van laptops, tablets en smartphones, heeft webtypografie dus ook een grote invloed op de aandacht die we aan tekst verzorging voor die media besteden.
Dit betekent dat je zorgvuldig moet kiezen tussen verschillende lettertypen, groottes en stijlen om ervoor te zorgen dat gebruikers zonder moeite de inhoud kunnen lezen.
In een eerder artikel heb ik een aantal (technische) richtlijnen voor het verbeteren van je web teksten opgeschreven. In dat artikel kun je lezen hoe je met CSS typografische aspecten zoals lettergrootte, regelhoogte, regellengte, uitlijning, letter- en woordspatiëring en regelverloop kunt stylen.
#De juiste lettertypen voor je project kiezen
Om een goede typografische eenheid te implementeren, moet je eerst een geschikt lettertype familie kiezen. Elk jaar komen er duizenden nieuwe lettertypes uit en het kan lastig zijn om de juiste te kiezen voor je project.
Eigenlijk kun je 99% van deze nieuwe lettertypes gewoon negeren. Dit klinkt misschien flink overdreven, maar 99% van de moderne lettertypes zijn van lage kwaliteit en zijn meestal gewoon aangepaste versies van populaire lettertypefamilies in een poging om een beetje geld te verdienen.
Hier zijn een paar trucjes die je kunt gebruiken om meteen hoogwaardige lettertypes uit te zoeken.
Zoek lettertypes met ten minste vier diktes/gewichten
Bij het kiezen van een modern lettertype voor webdesign is het aantal diktes dat het lettertype heeft een goede kwaliteitsindicator. Een goed lettertype heeft er minstens vier – light, regular, semibold/medium en bold (met de cursieve versies van elk) – en dit geeft aan dat het lettertype met wat meer zorg en aandacht voor detail is gemaakt.
Het is ook een goed idee om te controleren of het lettertype alle speciale tekens bevat die je nodig hebt (zoals leestekens), en meertalige ondersteuning (verschillende talen) als je die nodig hebt.
Let op de x-hoogte van je lettertype
De leesbaarheid van je teksten is natuurlijk super belangrijk, zeker als het wordt gebruikt in het ontwerp van de gebruikersinterface. De leesbaarheid van een lettertype wordt bepaald door de x-hoogte van een letterteken.
De x-hoogte is de hoogte van de onderkastletters zonder stok of staart (zie fig.2), zoals de kleine letter x, waarnaar deze hoogte dan ook vernoemd is. De x-hoogte geeft aan hoe hoog de kleine letters van een lettertype zijn in verhouding tot de ‘corps’ (lettergrootte).
Lettertypes met een goede x-hoogte zijn specifiek ontworpen voor leesbaarheid op zeer kleine afmetingen, dit maakt ze uitermate geschikt voor UI ontwerp. De x-hoogte van een lettertype moet 66 tot 75% van de hoogte van de koptekst zijn om optimaal leesbaar te zijn.
Houd het simpel!
Als je net begint, kun je het beste kiezen voor beproefde lettertypes die de tand des tijds hebben doorstaan. Een neutraal sans-serif (schreefloos) lettertype zal je nooit teleurstellen, omdat deze het best leesbaar zijn op beeldschermen. Dit is een goede manier om de juiste lettertypes te kiezen totdat je meer ervaring hebt met het kiezen van het juiste lettertype voor elk ontwerp project.
Het kan verleidelijk zijn om voor elk project andere lettertypes, script lettertypes of andere unieke lettertypes te zoeken. Als je net begint, houd het dan eenvoudig en gebruik de lettertypes die in dit artikel worden aanbevolen.
Leer van de besten
Als het lettertype dat je overweegt populair is en al wordt gebruikt door geweldige ontwerpers of bedrijven die waarde hechten aan goed UI ontwerp, dan is het waarschijnlijk een goed lettertype. Je kunt er zeker van zijn dat ze onderzoek hebben gedaan en een lettertype van hoge kwaliteit hebben gekozen.
“Good artists borrow, great artists steal.”
Pablo Picasso
Minder (lettertypes) is beter
Wanneer je op zoek bent naar de beste lettertypes voor je UI ontwerp, kan het verleidelijk zijn om lettertypes te combineren. Misschien kun je niet kiezen tussen een paar geweldige lettertypes of overweeg je een combinatie van schreef (serif) en schreefloos (sans-serif)?
Welk lettertype(s) je ook kiest, beperk jezelf tot het gebruik van slechts één of twee lettertypes tegelijk. Maar let wel op; meerdere verschillende lettertypes in een ontwerp kunnen er al snel rommelig en onoverzichtelijk uitzien.
Soms kan het gebruik van één lettertype met verschillende diktes net zo effectief zijn als het gebruik van meerdere lettertypes.
#Bonus: 10 gratis lettertypes voor UI design
Je hebt geen enorme verzameling van 100 dure premium lettertypes nodig. Hier zijn enkele gratis lettertypes die uitstekend geschikt zijn voor typografie in de user interface (UI) van je website of app. Deze lettertypes kun je ook supergoed gebruiken voor logo ontwerp.
1. Inter
Inter is een open-source schreefloos lettertype ontworpen door Rasmus Andersson. Het is ontworpen om goed te werken op beeldschermen omdat dit lettertype een grote x-hoogte heeft. Inter is een ongelooflijk nuttig lettertype dat goed werkt als koptekst en als broodtekst.
Dit lettertype is beschikbaar in negen diktes met bijpassende cursieve stijlen, evenals een variabele lettertype versie. Inter is 100% gratis voor persoonlijke projecten en commercieel gebruik.
2. Public Sans
Public Sans is een sterk, neutraal en schreefloos lettertype dat speciaal is ontworpen voor UI ontwerp en webdesign. Dit lettertype werd ontwikkeld door het United States Web Design System en werd in mei 2022 bijgewerkt met een variabel lettertype.
Public Sans is 100% open source en gratis voor persoonlijke projecten en commercieel gebruik.
3. Work Sans
Work Sans is een open-source lettertype ontworpen door de Australische type designer Wei Huang. Het werd in opdracht van Google Fonts uitgebracht in 2015. Work Sans is gratis voor persoonlijke projecten en commercieel gebruik.
4. Open Sans
Open Sans is een open-source, humanistisch schreefloos lettertype ontworpen door Steve Matteson en uitgebracht in 2011. De vijf diktes met bijpassende cursieve stijlen maken Open Sans extreem veelzijdig en nuttig voor een breed scala aan toepassingen.
Open Sans is een alom vertegenwoordigd lettertype op het web. Open Sans is, zoals de naam al doet vermoeden, open-source en gratis voor zowel persoonlijk als commercieel gebruik.
5. Poppins
Poppins is een geometrisch schreefloos lettertype gepubliceerd door Indian Type Foundry in 2014. Het werd vrijgegeven als open-source en is beschikbaar voor persoonlijke projecten en commercieel gebruik.
Hoewel Poppins kritiek krijgt omdat het te veel wordt gebruikt in UI en webdesign, vind ik het toch een geweldige optie als je op zoek bent naar een strak en modern lettertype. Poppins is beschikbaar in negen diktes met bijpassende cursieve stijlen.
6. Source Sans Pro
Ontworpen door Adobe, dit lettertype is functioneel en uitstekend leesbaar, perfect voor gebruik in UI elementen. Source Sans Pro is een schreefloze lettertype familie, ontworpen door Paul D. Hunt in 2012, als onderdeel van het Adobe Originals Program.
Source Sans Pro is verkrijgbaar in 6 gewichten met bijpassende cursieve varianten en is ook beschikbaar als variabel lettertype.
7. Lato
Een humanistisch sans-serif lettertype met een warme en toch professionele uitstraling. Zeer geschikt voor gebruik in UI elementen. Ontworpen door Łukasz Dziedzic. De halfronde details van de letters geven Lato warmte, terwijl de sterke structuur zorgt voor een goede stabiliteit.
Lato is verkrijgbaar in 9 gewichten met de bijpassende cursieve stijlen.
8. Roboto
Roboto is een neo-groteske schreefloze lettertypefamilie ontwikkeld door Google en is volledig intern ontworpen door Christian Robertson. Het Roboto lettertype is het standaard OS lettertype van Android, en sinds 2013 ook op andere Google services zoals Google Play, YouTube, Google Maps en Google Images.
Modern, leesbaar en veelzijdig. Roboto is een van de meest populaire lettertypes voor UI design vanwege zijn strakke en neutrale uiterlijk.
9. Space Grotesk
Space Grotesk is een sans-serif neo-groteske variant ontworpen door Florian Karsten. Met een x-hoogte van 70% is Space Grotesk geweldig voor de leesbaarheid en werkt goed in kleinere en grotere lettergroottes.
Veel ontwerpers kiezen Space Grotesk als lettertype voor projecten met Fintech of andere technische branding vanwege de iconische uitlopende staart en stok, met name de “g” en de “f”. Deze kleine details helpen om dit lettertype zijn technische persoonlijkheid te geven.
10. Nunito Sans
Een evenwichtig, zeer leesbaar schreefloos lettertype dat goed werkt voor zowel broodtekst als kopteksten. Nunito Sans is een favoriet lettertype onder ontwerpers vanwege de kenmerkende stijl. In tegenstelling tot Inter is Nunito Sans langer en minder dik, waardoor de tekens er apart uitzien.
#Gebruik bij twijfel OS lettertypen
Sommige ontwerpers zien de kracht van het gebruik van OS (besturingssysteem) lettertypes in hun ontwerp over het hoofd. Deze lettertypes worden gebruikt op al onze digitale apparaten en zijn juist ontworpen voor een optimale leesbaarheid.
OS lettertypes zijn lettertypes die opgeslagen zijn in het besturingssysteem (zoals Windows, Mac OS, Linux, IOS en Android) van het apparaat waarop jij een website bekijkt. Hierdoor hoeven deze lettertypes niet te worden gedownload van je server. Het gebruik van OS lettertypes voor je UI ontwerp zal je dus een mooie boost geven als het gaat om de laadtijd van je website.
/* System Fonts Rule */
body { font-family: "Segoe UI", "Roboto", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Lucida Grande", sans-serif; }Meestal gebruik ik system fonts als broodtekst, tenzij anders voorgeschreven in het huisstijl handboek. Je kunt dan namelijk alle diktes en stijlen van het OS lettertype gebruiken wat je meer vrijheid geeft als ontwerper.
Bottomline
Ontwerpers vallen maar al te vaak terug op trends in plaats van zorgvuldig na te denken over de beste lettertypes voor creatieve UI projecten. Deels omdat goede typografische vaardigheden moeilijk onder de knie te krijgen zijn.
In combinatie met goede copywriting is inzicht in de basisprincipes van effectieve typografie een krachtige boost die je helpt op te vallen, het perfecte lettertype voor elk project te kiezen en de gebruikerservaring te verbeteren.
Typografie speelt een cruciale rol in user interface (UI) ontwerp door de leesbaarheid te verbeteren, visuele hiërarchie aan te brengen, merkidentiteit te versterken, emoties op te roepen, toegankelijkheid te garanderen en browser-compatibiliteit te behouden.
Deel dit Bericht:
Nog Geen Reacties
Laat een Reactie achter