Share
Typografie is een enorm veld. Mensen wijden jaren van hun leven aan dit oude ambacht, en toch is er altijd iets nieuws te leren. In dit artikel zal ik de belangrijkste punten bespreken die u zou moeten overwegen bij het selecteren van een lettertype voor een website.
Opnieuw gepubliceerde zelfstudieOm de paar weken bekijken we enkele van onze favoriete lezers uit de geschiedenis van de site. Deze tutorial werd voor het eerst gepubliceerd in oktober 2010.
Wanneer u ontwerpt voor internet, moet u accepteren dat de inhoud verandert. Het is gewoon niet mogelijk om elke titel op een enorme website de tijd te nemen om kern (spaties tussen individuele letters aan te passen) aan te passen. Met andere woorden, je geeft wat controle op.
Waar ik me vandaag op ga focussen, is praktische typografie. Dit betekent voor mij dat ik accepteer dat je nooit volledige controle over het type op je websites hebt. Een lettertype kiezen, een maat bepalen, dit zijn allemaal dingen waar wij als ontwerpers over praten. Praktische typografie betekent leren hoe, en wat nog belangrijker is waarom, om aan te passen waar je controle over hebt. Laten we beginnen.
Wat doe je met typen? Lees het! Dus waarom maken zoveel websites het zo verdomd moeilijk om precies dat te doen? Of het nu gaat om kleine lettergroottes, opgehoogde regelhoogte of gewoon lelijke lettertypen, het lijkt erop dat veel sites vastbesloten zijn om u niet van hun inhoud te laten genieten!
Door je type leesbaar te maken, spring je meteen voor op minimaal de helft van de competitie, wat echt een geluk is, want het is niet zo moeilijk!
Wanneer u beslist welk letterbeeld u op uw website wilt gebruiken, is het belangrijk om te onthouden: denk er niet over na. Ik weet dat veel ontwerpers haat hebben bij het gebruik van Helvetica, omdat het te veel wordt gebruikt. Ik ben het daarmee eens, maar er is één zeer belangrijk stuk informatie dat deze verklaring buiten beschouwing laat: waarom. Mensen gebruiken Helvetica te veel, omdat het gewoon zo is zo verdomd goed. Het past precies bij vrijwel elk denkbaar ontwerp, het werkt goed in kleine, maar ook in enorme maten.
Hoewel het tegen je overtuigingen kan ingaan om je type in zo'n misbruikte gezicht te plaatsen, als het werkt, ga er dan voor.
Uw lichaamsexemplaar is misschien wel het deel van uw ontwerp dat het meest leesbaar moet zijn, dus zorg ervoor dat u een lettertype kiest dat goed werkt in kleine formaten. Wat bedoel ik daarmee? Als je je exemplaar op 10px kunt instellen en je nog steeds kunt zien wat het zegt, dan is dat een goede indicatie dat je een leesbaar lettertype hebt gekozen.
Dat heeft betrekking op body-copy, maar hoe zit het met titels??
De leesbaarheid in grote titels is veel eenvoudiger te achterhalen dan in de body-copy. Als je meteen kunt zien wat het zegt, dan is het leesbaar genoeg.
Wat goed is aan lettertypen, is dat als je eenmaal aan voldoende projecten hebt gewerkt, je een goed idee hebt van wat werkt en wat niet. Vanaf daar bent u beter in staat om kritische keuzes te maken over lettertypen.
Er is geen formule om de juiste lettertypen voor uw website te kiezen. Vaak is de beste manier om erover te beslissen elk lettertype dat volgens u zou kunnen werken uit te proberen en vervolgens te vergelijken. Het kiezen van lettertypen is echt een buikdrift, maar het is belangrijk om te onthouden dat 90% van de tijd een gebruiker niet zal nadenken over welk lettertype wordt gebruikt, dus als het leesbaar is, dan is dat vaak goed genoeg.
Er is zelden (of ooit) een situatie waarin eentje maar lettertype is geschikt voor gebruik op een site. De gemiddelde website heeft veel tekst. Het is onmogelijk dat een lettertype voor iedereen werkt! De overgrote meerderheid van goed ontworpen websites gebruikt twee lettertypen: één voor body-copy en één voor headlines.
Bij het kiezen van een paar lettertypen, is het belangrijkste om te overwegen hoe ze samenwerken. "Zijn ze vergelijkbaar genoeg?" "Te vergelijkbaar?" "Niet anders genoeg?" Dit zijn allemaal vragen die u zichzelf zou moeten stellen. Ik vind dat de beste manier om een paar lettertypen te kiezen die werken, is door er veel naast elkaar te zetten en de beste te kiezen. Er is geen manier om te weten welke de beste is, totdat je ze allemaal hebt geprobeerd.
Soms zou het meest geschikte ding twee schreefloze letters zijn, terwijl je andere keren een sans zonder kop wilt hebben en een serif voor body-copy. Het maakt niet uit of ze er hetzelfde uitzien, het gaat erom of ze dat wel doen gelijk handelen. Dit is natuurlijk afhankelijk van de rest van je ontwerp. Welke lettertypen u ook kiest om uw boodschap duidelijk over te brengen, en als dat betekent dat u contrasterende lettertypen hebt, ga er dan voor.
Simon Collison gebruikt lettertype-koppeling uitstekend op zijn site, kiest voor een sterk schreefloos lettertype voor hoofdtitels en een eenvoudige Serif voor de andere, kleinere koppen en ook voor kopiëren. Dit partnerschap geeft op deskundige wijze het bericht weer dat de website probeert te zeggen, op een manier die elk lettertype afzonderlijk niet kan uiten.
Over het algemeen stellen ontwerpers hun lichaamsexemplaar op zijn minst op 12px in. De meesten kozen echter voor een groter formaat zoals 14 px, wat nog beter is voor de leesbaarheid. Lettertype-dimensionering is eigenlijk vrij eenvoudig om te beslissen voor body-copy, maar het zijn de titels die gecompliceerd beginnen te worden.
Hoe groot moeten jouw titels zijn? Het hangt er van af. Bij mijn observatie en het maken van websites ben ik tot de conclusie gekomen dat een titel maar zo groot moet zijn als nodig is. Dit betekent dat je verschillende formaten moet uitproberen totdat je er een vindt die net groot genoeg is om de aandacht te trekken die je wilt, maar niet groter, tenzij je een enorme tekst gebruikt, ga in dat geval gewoon door.
De aard van een titel is groot. Het is een belangrijk item op de pagina, dus het zou natuurlijk groter moeten zijn, toch? Ja en nee. Ja, titels zijn over het algemeen groter dan andere elementen, maar nee, dit is niet de enige manier om de aandacht erop te vestigen. Kleur, gewicht en plaatsing zijn allemaal even belangrijk om een duidelijk beeld te krijgen visuele hiërarchie naar uw pagina's.
Het belangrijkste punt om te onthouden over visuele hiërarchie is dat het allemaal relatief is. Tekst op uw site hoeft alleen maar op te vallen in vergelijking met de andere tekst op uw site. Neem de site van Wilson Miner bijvoorbeeld. Zijn titels zijn vrij klein voor hoe belangrijk ze zijn, en zijn verrassend dicht in omvang. Zijn kleurgebruik onderscheidt echter de belangrijkste titel en geeft ze meer betekenis.
Het gebruik van het type is een zeer belangrijk hulpmiddel bij het bepalen van de visuele hiërarchie, ongeacht de grootte, kleur, het gewicht of zelfs plaatsing.
Het leiden, of de ruimte tussen tekstregels, is een waardevol hulpmiddel voor leesbare tekst. Slechte leading kan een anders zo stellair stukje kopie verpesten, en een goede leiding kan zelfs het ergste type er leesbaar doen uitzien. Gelukkig is het niet zo ingewikkeld om te implementeren.
De CSS gebruiken lijnhoogte eigenschap, kunt u eenvoudig ruimte tussen uw regels kopiëren. Over het algemeen is voor grote tekstblokken 1,5 keer de grootte van de tekst goed. Kleinere tekst moet strakkere tekst hebben en grote tekst moet veel bevatten. Het is echt niet zo gecompliceerd.
Tracking is de ruimte tussen tekens in tekst. Ik geef toe, deze is een beetje een grijs gebied als het gaat om 'praktische typografie', omdat CSS ons er geen enorme controle over geeft. Meestal hoeft u zich hier geen zorgen over te maken voor kleine tekst, het is alleen voor titels dat het een probleem wordt. Over het algemeen, toevoegen letter-spacing: 1px; of letter-spacing: 2px; naar uw CSS moet er voldoende ruimte tussen de letters zijn.
Een andere plaats waar het nuttig zou zijn om tracking toe te voegen is small-caps. Hier wordt het over het algemeen als een goede gewoonte beschouwd om een extra pixel of twee tussen de tekens toe te voegen, omdat deze van nature groter lijken.
Hoewel het geen strikt typografische typografie is, is kleur een zeer belangrijk onderdeel van het type van elke website. Ik heb het niet over kleurenschema's, maar eerder over het contrast dat nodig is om de leesbaarheid op uw site te verzekeren. Zwarte tekst op een witte achtergrond (of lichte achtergrond) wordt algemeen beschouwd als de meest leesbare kleur voor tekst.
Ik zeg niet dat je moet gaan en alles in zwart-wit moet zetten, alleen dat je tijdens het ontwerpen rekening moet houden met het contrast van je tekst. Het kan terug komen om je te bijten als je niet voorzichtig bent.
Naar mijn mening is het gebruik van het raster het belangrijkste idee voor praktische typografie op het web. Je kunt geweldige lettertypen, spatiëring en kleuren gebruiken, maar als je geen goede lay-out hebt, kun je net zo goed komisch gebruiken.
Als u een raster gebruikt bij het ontwerpen met type, biedt dit een duidelijk evenwicht en een geometrische structuur voor uw ontwerp. Het is niet de magische oplossing voor een slecht ontwerp, maar als u vanaf het begin met een raster ontwerpt, kunt u er zeker van zijn dat uw lay-out op zijn minst solide zal zijn.
Wat heeft een raster te maken met typografie? Simpel gezegd: alles. Het raster belichaamt alle fundamentele idealen van typografie. Het is geometrisch, consistent, bruikbaar en vooral: mooi.
Het instellen van uw tekst met een raster is een belangrijke manier om visuele hiërarchie vast te stellen, en het is een goede indicator voor hoe groot (of klein) uw tekst moet zijn.
Zoals ik al eerder zei, als typografie leesbaar is, ben je al 50% van de concurrentie voor, dus hoe zit het met de andere helft? Als je zover bent gekomen, laten we samen de duidelijke, consistente regels van leesbaarheid en gaan we de duistere en mysterieuze wereld van uniek zijn binnen.
Wilt u dat uw website opvalt? Stap 1. Gebruik een unieke typografie. Vermoedelijk betekent dit voor u dat u enkele unieke lettertypen gebruikt. Maar wat maakt een uniek lettertype? Voor mij is het niet iemand die niet vaak wordt gebruikt, maar iemand die een boodschap heeft of zich niet bij andere gezichten voelt.
Het kiezen van een uniek lettertype gaat echt over het gevoel. Doet dit lettertype voelen anders? Of ziet het er anders uit? Bij het kiezen van lettertypen voor projecten, moet u altijd rekening houden met het gevoel van het ontwerp. Omdat dit helemaal een persoonlijke mening is, kan ik je niet helpen een uniek lettertype te vinden. Wat ik kan doen is een voorbeeld van unieke lettertypen laten zien.
De Design Cubicle heeft een zeer uniek logo en ontwerp. Het is sterk en toch stijlvol, opvallend en toch subtiel. Als ik naar het ontwerp kijk, druipt het klassengevoel gewoon uit de site. Er staat: "Ik weet wat ik aan het doen ben."
Hoeveel websites ken je waarvan het logo zo groot is als de inhoud? Hoe zit het met een ultradunne titel? In tegenstelling tot mijn laatste punt, is het onorthodox zijn om te zien wat anderen doen en vervolgens het tegenovergestelde te doen.
De mensen bij Savvy Belfast zijn slim. Ze merkten dat de meeste websites krap uitzagen en besloten om al dat nietszeggende exemplaar te vervangen door één verklaring.
Zelfs als u hun site slechts een moment bezoekt, kunt u niet anders dan hun naam onthouden.
Typografie is niet zijn eigen ding. Het is net als elk ander onderdeel van webdesign. Type is belangrijk, ja, maar je moet niet vergeten dat dit slechts een deel is van wat een webontwerp geweldig maakt. U moet uw type ontwerpen met de rest van uw ontwerp in gedachten.
Als je een zeer uitgebreide achtergrondtextuur gebruikt, dan is een mooie schreef misschien goed voor je titels.
Mijn punt is hier eenvoudig: Vergeet het context. Design is een enorm veld en vandaag heb ik het slechts over een deel ervan. Voor een succesvol websiteontwerp moeten alle onderdelen succesvol met elkaar in verband worden gebracht. Dat is het doel: om de ervaring te creëren die iemand op uw website zal hebben. Je kunt dat niet doen typ gewoon, of gewoon kleur, of zelfs gewoon inhoud!
Zoveel van een ervaring wordt bepaald door hoe je je voelt: blij, verdrietig, geamuseerd, boos, blabla. Mensen hebben een breed scala aan emoties en als ontwerpers is het onze taak om deze emoties op te roepen in onze ontwerpen.
Van alle dingen waar ik het vandaag over heb gehad, dit is verreweg het meest abstract en het is een beetje moeilijk uit te leggen. In plaats van je dit uit te leggen, laat ik het je zien.
Toen ik Solid Solid voor het eerst bezocht, glimlachte ik. Ik glimlachte de volgende keer dat ik het zag, en zelfs de volgende keer. Meteen voelde ik een verwantschap met het ontwerp. Die grote, donzige "G" is gewoon te schattig om te vergeten!
Eerlijk gezegd denk ik dat het geniaal is.
Er is geen manier om emotioneel ontwerp te leren, het is iets dat je moet ervaren, en dan spelen in je eigen ontwerpen.
Nou, je hebt het einde van de post bereikt. Ik hoop dat je op zijn minst iets hebt geleerd, maar zo niet, dan is dat ook goed. Als iemand denkt dat ik je wil verlaten na het lezen van dit, dan is dat vooral: leesbaar zijn. De rest zal volgen.
Wat is volgens jou het belangrijkste onderdeel van typografie op het web? Laat uw mening achter in de comments!
Accentsconagua