Hoe u uw type aantrekkelijker kunt maken op internet
Het is niet ongebruikelijk voor een ontwerper in de wereld van vandaag om weinig aandacht te schenken aan de manier waarop het type is ingedeeld, vooral met de altijd zo handige standaardinstellingen van koerslabels en webveilige lettertypen die universeel op internet te vinden zijn.
Als we als interactieve ontwerpers wat meer tijd kunnen nemen als het gaat om typografie, dan zouden de resultaten een uniek, goed doordacht ontwerp laten zien dat zich verzet tegen een 'alledaagse' creatie.
De kans is groot dat de meeste ontwerpers en ontwerpen die u bewondert goede voorbeelden van typografie presenteren.
Ik laat je een paar stappen zien die ik in het tweaken van het settype neem om aantrekkelijker te zijn dan die standaardscenario's van 24px H1-tags samen met 13px ingesteld in Times New Roman.
Neem geen genoegen met de standaardinstellingen, iedereen doet het.
Hier hebben we het immer zo gebruikelijke uiterlijk van een kop, samen met een stuk lichaamsexemplaar om te volgen. Dit trekt je niet precies in of onderscheidt zich van alle andere voorbeelden, precies zoals het, toch? Dus om het tekstvoorbeeld visueel aantrekkelijker te maken, gaan we eerst een paar wijzigingen aanbrengen met onze lettertypeselectie.
Kies een lettertype dat meer visueel gewicht zal hebben met uw kop
Hoewel lettertypeselectie niet echt 'typografie' is, is het in feite een essentieel onderdeel om het type op een pagina te helpen onderscheiden van andere elementen. Met het begin van @ font-face zijn enorme hoeveelheden keuzes overal beschikbaar voor ontwerpers.
Hier heb ik een Extra Condensed Gothic Style-lettertype gebruikt dat eenvoudig te vinden is op een gratis fontsite zoals FontSquirrel.com. Als we stoppen en erover nadenken, zou de naam "Gecondenseerd" iets moeten betekenen, omdat het in feite meer dicht is dan het normale familielid in boekstijl, wat precies is wat we uit een kop willen:, iets dat de gebruiker trekt en onderscheidt zich echt van de body-kopie. Het slaagt er zeker in je aandacht beter te vangen dan het origineel, maar er zijn een paar dingen die we zouden kunnen doen om de tekst verder te verbeteren.
Maak het aantrekkelijker met twee regels CSS
De onmiddellijke verandering zit in de letters; ze zijn allemaal hoofdletter nu, maar ze hebben nu ook een negatieve spatiëring tussen elk van de letters (een techniek overgenomen uit krantendesign).
Beide kenmerken kunnen eenvoudig worden bereikt door middel van CSS, { text-transform: hoofdletters; en letterspatiëring: -Xpx; }. Door deze twee lijnen coderingswijzigingen te maken, resulteert dit in een aanzienlijke verbetering van het visuele gewicht, vooral ten opzichte van het origineel.
Werk eventuele kleine aanpassingen uit
In de volgende stap is het lettertype dat in de hoofdtekst is gebruikt, feitelijk veranderd in een schonere schreef zonder schreef, wat beter overeenkomt met de koptekst. We komen dichter bij een veel visueel aantrekkelijker ontwerp, maar er zijn enkele wijzigingen die we kunnen aanbrengen om het nog meer op te schonen.
Zoals de groene indicatoren laten zien, zijn er ongelijke marges en wat typografen graag een 'wees' noemen. Dit is een enkel woord dat in de laatste regel van de alinea valt. Het creëert visueel een ongelijk gewicht in vergelijking met de rest van de tekst, en dit probleem kan eenvoudig worden opgelost door de tekst enigszins te herformuleren.
Als het gaat om marges, is er geen regel dat alles gelijk moet zijn. Als u echter een jonge webontwerpcarrière begint, is het een goede gewoonte om overal dezelfde marges te hebben totdat u technieken leert en leert waarmee u de richtlijnen van het zetwerk kunt overschrijden en toch uw doel visueel kunt bereiken.
Nadat je een meer gebalanceerd visueel canvas hebt gemaakt door de wees te verwijderen en de marges aan te passen, kun je het eindresultaat zien, een voorbeeld van een goed ingesteld type dat comfortabel is waar het ligt.
Wat zijn je beste tips voor webtypografie? Laat het ons weten in de reacties!