9 tips voor een betere typografische hiërarchie
Elk project vereist een systeem en hiërarchie voor tekstelementen. Denk maar aan alle kleine stukjes tekst die in een ontwerp worden gebruikt - koppen, hoofdtekst, navigatie-elementen, juridische informatie, bijschriften enzovoort.
Maar hoe creëer je die hiërarchie zodat elk tekstelement soepel naar het volgende stroomt? Vandaag zullen we u stap voor stap begeleiden bij het bouwen van een systeem van typografiehiërarchie dat voor bijna elk ontwerpproject kan worden gebruikt. (En we combineren de tips met prachtige voorbeelden van geweldige typografie om je te helpen een beetje inspiratie op te doen.)
Verken Envato Elements
1. Begin met een comfortabele Body Copy
Hoewel je misschien wilt beginnen met een coole kopbehandeling, is de plaats om te beginnen eigenlijk in het midden. Stel eerst een comfortabel lettertype, grootte en spatiëring in voor de hoofdtekst.
Dit zou logisch moeten zijn, omdat dit het grootste deel van de tekst in het ontwerp is. Of u nu een website of brochure bouwt, dit concept is hetzelfde. Ideale leesbaarheid voor body copy is ergens tussen de 50 en 60 tekens per regel (of kolom), volgens het Baymard Institute. Deze richtlijn helpt u bij het instellen van een schaalbare tekst die leesbaar is en die rekening houdt met verschillende soorten lettertypen (zoals normaal versus gecomprimeerd versus plaat).
2. Bouw een schaal
Als u eenmaal weet hoe de body-kopie eruit zal zien, kunt u er een schaal omheen instellen voor alle andere tekstelementen in het ontwerp. Het kan gemakkelijk zijn om bepaalde tekstblokken over het hoofd te zien; maak een lijst van elk verschillend gebruik voor tekst in uw project.
- Body kopie
- Krantenkoppen
- Onderverdelingen
- Bijschriften
- Blok citaten
- Navigatie-elementen
- Voettekstinformatie
- Wettelijke kopie of disclaimers
Maak nu een schaal die het lettertype, het groottebereik en het gebruik voor elk van deze elementen dicteert. (En bouw het in uw CSS in voor websites of stijlbestanden voor werkdocumenten.) Er zijn een aantal manieren om de schaal te maken, maar een percentage kan een goed startpunt zijn. U kunt ook een schaal vaststellen op basis van de wiskunde achter een basislijnraster of visueel.
Hier is een eenvoudige schaal om te beginnen:
- Grootte van hoofdtekst
- Koppen zijn kopij-omvang maal 220%
- Onderkopjes zijn body-kopie-grootte maal 150%
- Navigatie-elementen zijn 80% van het totale aantal kopieën
- Voettekst / legale kopie is 80 x 80%
3. Denk van groot naar klein, van boven naar beneden
Deze regel is vrij eenvoudig: de grootste en belangrijkste tekst moet bovenaan staan en de afmetingen moeten kleiner worden naarmate u de pagina of het scherm leest.
Dat wil niet zeggen dat je deze regel niet zo nu en dan kunt doorbreken met wat ontwerpfinesse, maar het moet altijd het startpunt zijn voor het ontwikkelen van typografische hiërarchie. (Wie gaat er echt scrollen naar het einde van een webpagina voor de kop en dan terug naar de top om te beginnen met lezen?)
4. Stel regels voor de ruimte vast
Net zo belangrijk als de grootte van de letters is de ruimte ertussen en eromheen. Factoren voor het bepalen van de ruimte zijn onder meer voorloop (of lijnhoogte), inspringingen (of niet), omslagen en dakgoten en uitlijning.
Overweeg afstandsverhoudingen die de schaal weerspiegelen die wordt gebruikt voor het aanpassen van de tekst. De grootte van het canvas is ook hier behoorlijk belangrijk. Grotere doeken zijn leesbaar met een kleinere tussenruimte dan kleine doeken. (Daarom hebben veel projecten veel lossere afstandsspecificaties voor apparaten zoals mobiele telefoons en strengere regels voor desktops.)
Net als bij lettergroottes, moeten voor het hele ontwerpraamwerk vooraf afstandsregels worden ingesteld. Consistente, schone afstand is een van de kleine dingen die een ontwerp kunnen maken of breken.
5. Stel regels in voor vet en cursief
Hoewel vet en cursief geen verschillende type-elementen of formaten zijn, is het gebruik belangrijk. (Stel je voor hoe het ontwerp eruit zal zien als elk ander woord vet is.)
Dit maakt richtlijnen voor vet en cursief bijzonder belangrijk. In plaats van naar grootte of ruimte te kijken, is de overweging veel meer contextueel. Gebruiksspecificaties kunnen aangeven dat slechts zoveel woorden of woordgroepen (of specifieke woorden of woordgroepen) deze behandeling kunnen ondergaan. Het is een veelgemaakte fout om vet en cursief te gebruiken; gebruik het niet als het twijfelt.
6. Maak een "Z"
Het algemene leespatroon heeft de vorm van een Z. Of u nu ontwerpt voor een taal die van links naar rechts of van rechts naar links leest (de Z omdraaien), gebruikers lezen vanaf een hoek over de lijn tot het einde en vervolgens terug naar de starthoek en over de lijn in een herhalend patroon.
Gebruik deze natuurlijke stroom bij het plaatsen van tekstelementen op het scherm. Deze Z-vorm is de reden waarom de meeste merken hun logo in de linkerbovenhoek plaatsen. Het is de eerste plek waar het oog terechtkomt tijdens het lezen.
7. Overweeg het visuele gewicht
Grootte is niet de enige factor als het gaat om hoe groot een tekstelement eruit ziet op het scherm. Het visuele gewicht is net zo belangrijk en kan van invloed zijn op de manier waarop u een typografische schaal maakt.
Lettertypen zien er groter uit als:
- Ze bevatten dikke slaggewichten
- Ze omvatten bloeit of versieringen
- Ze zijn breed
- Het zijn nieuwe basislettertypen
- Ze hebben grotere x-hoogtes
- Ze worden gebruikt als alle caps
Lettertypen zien er kleiner uit als:
- Ze zijn gecondenseerd
- Ze omvatten lichte of dunne slagbreedtes
- Er is weinig contrast met de achtergrond
- Ze worden gebruikt met kleine letters
8. Creëer accenten
Er zijn bepaalde woorden die u wilt benadrukken en die een beetje buiten de normale typografische schaal vallen. Door een accent aan belettering toe te voegen, kan het opvallen zonder de werkelijke grootte of het lettertype aan te passen.
Veel voorkomende accenten zijn:
- Kleur
- Onderstrepen
- Markeer
- Tekst in een knop of vorm
- Eenvoudige animatie
- Verander in geval van ander type van dezelfde grootte
Het leuke van elk accent binnen een typehiërarchie is dat het meteen de aandacht trekt. Deze elementen moeten spaarzaam worden gebruikt voor de meeste impact en voor de belangrijkste elementen in het ontwerp.
9. Gebruik de "Oogtest"
Ten slotte heeft elke regel een uitzondering (of twee). Dat is waar de 'oogtest' binnenkomt. Kijk maar naar de schaal op het scherm. Hoe ziet en voelt de tekst voor jou? Is er een logische stroom? Is het makkelijk te lezen?
Als het op een of andere manier niet goed voelt, overweeg dan om de schaal aan te passen. Afhankelijk van het lettertype dat u gebruikt en andere elementen in het ontwerp - van afbeeldingen tot kleur tot contrast - moet de schaal van uw kant worden aangepast. Het is slechts een startpunt als u niet zeker weet wat u wilt doen.
En vraag ook om andere ogen. Maak een of twee versies met verschillende hiërarchieën om te zien welke versie het beste reageert. Design is een visuele kunst, waardoor de "oogtest" een onnauwkeurige maar redelijk betrouwbare optie is.
Gevolgtrekking
Zodra u een typografische hiërarchie voor een project heeft ingesteld, kunt u dit het beste documenteren. Bepaal de schaal met CSS voor websites of maak stijlbestanden wanneer u aan afgedrukte projecten werkt.
Voor ontwerpen op grotere schaal of branding, zet u de schaal en specificaties op schrift in een stijlgids. Het maken van een typehiërarchie vereist wat werk aan de achterkant, maar maakt de voltooiing van het project sneller, gemakkelijker en niet te vergeten consistenter, naarmate u verder gaat met volgende projecten.
