Share
Alles leren over de ins en outs van de technische kant van typografie is goed. Het geeft je een stevige basis bij het zoeken naar lettertypen of lettertypen en helpt je een beetje meer te begrijpen over de kunst van het typografie zelf. Je zult snel beseffen hoeveel moeite het kost om op elk moment het juiste type te krijgen, niet alleen op het web.
Een van de belangrijkste aspecten van typografie op het web is verticaal ritme - en dit kan ook een van de moeilijkere om het goed te krijgen, omdat het vaak veel tijd en experimenten kost. Er zijn veel manieren om een goed verticaal ritme op een pagina te bereiken, hoewel sommige kunnen neerkomen op gewoon wat voelt en goed uitziet op het scherm..
Ritme is ...
een sterk, regelmatig, herhaald patroon van beweging of geluid
en hoe meer consistent en vertrouwd een ritme is, hoe beter en sterker het wordt.
We kunnen dit op het internet toepassen met de term 'verticaal ritme' - in de westerse cultuur, terwijl we van links naar rechts en van boven naar beneden lezen, willen we proberen een consistent visueel ritme te behouden voor de inhoud op onze pagina. Door ons verticale ritme consistent te houden, kunnen we een visueel meer ontspannen ervaring creëren, een gevoel van bekendheid bij onze gebruikers oproepen, visuele barrières wegnemen en de inhoud veel leesbaarder maken.
Het creëren van een goed verticaal ritme op een website-ontwerp kan moeilijk zijn. Het doel is om een harmonieuze relatie te creëren tussen alle inhoud (inclusief afbeeldingen) en tekst) op uw website.
Hoe ziet bijvoorbeeld de spatiëring tussen de alinea's eruit (is deze te groot of te klein?), Hoe gemakkelijk vindt u het zelf te lezen? Er zijn veel vragen te stellen en het grootste deel komt voort uit hoe gemakkelijk het is om de inhoud van uw website te lezen (en zelfs snel te scannen). Zelfs de kleinste veranderingen die zorgen voor een betere leeservaring op uw website zullen een groot verschil maken voor uw gebruikers.
Dus nu weten we wat verticaal ritme is, we moeten een beetje meer leren over wat een goed verticaal ritme maakt. De sleutel hier is leesbaarheid.
Wanneer u werkt met typografie op internet, zijn de lettertypegroottes en regelhoogten de twee belangrijkste dingen waaraan u aandacht wilt besteden. Hoewel er zoveel andere dingen zijn die met deze twee dingen samenhangen, zijn dit uw twee belangrijkste componenten voor het creëren van een beter verticaal ritme op uw paginaontwerp. Als uw lettergroottes niet goed op elkaar passen - door bijvoorbeeld enorme kopgroottes en belachelijk kleine alinea-tekstgroottes te hebben, dan zal dit de inhoud maken die veel moeilijker te lezen of snel door te scannen is. Evenzo, als uw inhoud een regelhoogte heeft die tekst onhandig maakt om te lezen - hetzij door te dicht bij elkaar te staan of te ver uit elkaar te staan - dan worden uw gebruikers uitgeschakeld, als u ermee aan de slag wilt gaan.
Het creëren van een goed verticaal ritme in je ontwerpen komt met veel oefening, maar ook veel theorie, en soms ook wiskunde.
Eerst moet je beginnen te kijken naar een basislijn (ook bekend als een basislijnraster). Een baseline is de standaardlijnhoogte waarop u uw verticale ritme baseert - en vanaf daar kunt u deze basislijn gebruiken om u te helpen in lijnhoogten voor alle andere lettertypen en inhoud in uw ontwerp.
De website van Trent Walton is een schitterend voorbeeld van een goed verticaal ritme in design. Wanneer u met een basislijn werkt, is het een goed idee om bij uw ontwerp rekening te houden met de lijnhoogte van de meest gebruikte of primaire lettertypegrootte. Het eenvoudigste voorbeeld dat ik kan bedenken is om te denken aan je hoofdletter-lettergrootte van 100% (wat overeenkomt met 16px in de meeste browsers). Als je een regelhoogte van 1 hebt, is je lijnhoogte ook 16 px. Lijnhoogtes zitten echter meestal het beste tussen 1,4-1,6 keer de grootte van je lettertype (visueel lijkt dit gewoon te werken met de meeste lettertypen - hoewel je dat in de regel niet doet, speel er gewoon mee). Als we dan kijken naar een lijnhoogte precies daar tussenin, van 1,5, dan is onze lijnhoogte 24px - en dat is ons basislijnnummer. Vanaf nu willen we ervoor zorgen dat alle inhoud en typografische elementen in ons ontwerp overeenkomen met of samenvallen met dit 24px-cijfer.
Een ander belangrijk ding om te meten, zijn onze marges. Een heel gemakkelijke manier om ons ritme onder controle te houden is om dit magische getal (24px) te gebruiken voor onze marges.
Ik ben een grote fan van marges in één richting sinds Harry Roberts dit in een artikel suggereerde medio 2012, waar de marges die we toepassen op alle elementen op blokniveau in één richting worden geplaatst (dwz: aan de onderkant van elementen ). Hetzelfde kan gezegd worden als we ook ontwerpen, dus omdat 24px ons "magische getal" is - en het aantal dat alles veelvouden zou moeten zijn, of op zijn minst betrekking hebben op - kunnen we een ondermarge toevoegen aan al onze blokniveau's elementen van 24px (of 1.5rem, als je dat wilt - hoe je deze code ook wilt toevoegen in je CSS is prima!). Dit helpt ons om ons verticale ritme mooi te houden en zorgt ervoor dat al onze elementen in overeenstemming blijven met de basislijn die we hebben gemaakt.
Een klein tipje dat ik vind wanneer ik met afbeeldingen in mijn ontwerp werk en ervoor zorg dat ze ons baseline en verticale ritme niet volledig uit de weg gaan, is om ervoor te zorgen dat de beeldhoogten overeenkomen met een veelvoud van ons magische nummer. Een afbeelding kan bijvoorbeeld een hoogte hebben van 240 px (10 x 24 px, ons magische getal) met een ondermarge van 24 px. Of we zouden zelfs een hoogte van 252px kunnen hebben met een ondermarge van 12px - zolang het allemaal overeenkomt met dat veelvoud van 24px, zouden we goed moeten zijn.
Hoewel het belangrijk is om je magische nummer te onthouden, kun je er altijd nog een beetje van afbreken - als iets niet helemaal goed aanvoelt op de 1,5-regelige hoogte die je hebt ingesteld, probeer dan iets anders - zolang je de andere kunt uitlijnen waarden zodat deze terugvalt in de basislijn en zo uw verticale ritme onder controle houdt.
Als je er bijvoorbeeld voor kiest om in plaats daarvan te gaan met een iets hogere regelhoogte van 26 pixels (wat ongeveer 1,625 keer zo goed is als de oorspronkelijke lettergrootte die we hadden van 16px), zolang je marges dit dan weerspiegelen, is je verticale ritme het komt goed. Omdat we een extra twee pixels hebben toegevoegd aan de lijnhoogte, moeten we die twee pixels uit de onderste marge van dat element halen. Uiteraard, als je kunt, probeer patronen te zoeken in je ontwerp waar dit kan gebeuren en je CSS te ontwerpen op een manier die dit patroon weerspiegelt - dus een modulaire CSS-klasse maken voor elementen met dat ontwerppatroon, zoals je bij elk project zou doen je bent aan het ontwikkelen.
Het kan moeilijk zijn om een goed verticaal ritme te creëren, maar gelukkig zijn er, net als bij de meeste ontwerp- en ontwikkelingstechnieken, enkele goede hulpmiddelen om ons te helpen. Ik vind deze hulpmiddelen met name geweldig voor het oefenen en visueel begrijpen van typografie op een pagina.
Typecast is een geweldig hulpmiddel voor ontwerpers - niet alleen stelt het u in staat om met duizenden verschillende lettertypen of lettertype-combinaties te spelen, maar het helpt ons ook bij het zetten van een zet en het vormen van een juiste basislijn. Ik merk dat ik hier altijd voor duik anders in als ik typografie in mijn ontwerp ga bekijken.
De modulaire schaal is een andere kleine techniek die kan worden benut of gebruikt bij het ontwerpen met typografie - zoals beschreven op A List Apart
een modulaire schaal is een reeks getallen die op een zinvolle manier op elkaar betrekking hebben.
Tim Brown
Die getallen kunnen worden gebruikt (door veel te experimenteren en om te wisselen) in je ontwerpen, als je dat wilt. Het is op zijn minst de moeite waard om te kijken en te spelen - en kan je helpen beter geïnformeerde beslissingen te nemen over zaken als de breedte van containers en hoe deze andere nummers ook een rol kunnen spelen in je verticale ritme.
Als je fan bent van ontwerpen in de browser, of gewoon wilt zorgen dat de basislijnen die je elders hebt ontworpen, doorgaan wanneer je begint met coderen - dan zal het gebruik van een van deze twee JavaScript-plug-ins je helpen om te controleren hoe je basislijn is uitvoeren in uw code. De eerste (Basehold.it), door Dan Eden en Michael Wright, biedt u een JavaScript-overlay op uw webpagina, terwijl Baseline.js door Dan Eden u een manier biedt om afbeeldingen op uw pagina te beheren, als ze nodig zijn.
Voor deze opdracht wil ik dat je simpelweg speelt met een basislijnraster - of dit nu via een proef in Typecast is, met een van de bovengenoemde JavaScript-plug-ins of gewoon door een basislijnrasteroverzicht te maken in Photoshop of een andere grafische app is helemaal aan jou u. Zodra je een basislijnraster klaar hebt, begin je de principes van dit artikel erin te plaatsen; plaats een deel van uw inhoud op zijn plaats en begin met het berekenen van de schalen en lettergroottes die u wilt gebruiken.
Zodra u die op zijn plaats hebt, begint u te kijken naar hoe deze allemaal samenhangen met uw basislijnraster. Als je dit nog nooit eerder hebt gedaan, kan het nogal wat werk zijn om je kop te geven - maar het is de moeite waard om de tijd te nemen om te begrijpen hoe ze precies werken. Daarna kunt u veel gemakkelijker beginnen met het integreren van een goed verticaal ritme in uw websiteontwerpen - en uw gebruikers zullen u bedanken!
Accentsconagua