Share
En av de viktigaste teknikerna för att effektivt kommunicera (eller "hedra") innehåll är användningen av typografisk hierarki. Typografisk hierarki är ett system för organiseringstyp som etablerar en order av betydelse inom data, så att läsaren enkelt kan hitta vad de letar efter och navigera i innehållet. Det hjälper till att leda läsarens öga till var en sektion börjar och slutar, samtidigt som användaren kan isolera viss information baserad på konsekvent användning av stil i hela en texttext.
"Typografi finns för att hedra innehåll." - Robert Bringhurst: Elementen av typografisk stil
Låt oss titta på ett exempel på innehåll med och utan en designad hierarki.
Bilden nedan är en lista över konserter som spelar på utomhusplatsen nerför gatan från mitt hus. För det här exemplets skull, låt oss säga att jag har helgen i augusti 15-17 gratis, och jag vill se om det finns en konsert som jag skulle vilja delta i den tiden. I scenariot nedan är det här en uppgift som är mycket svårare än det borde vara. Utan någon typ av hierarki måste man sikta igenom mycket av data för att hitta datum för konserterna. Tänk dig att du försöker titta igenom en lista med 50 konserter.
Ok, så kanske jag är dramatisk i exemplet, men vi kan göra det mycket enklare.
Som du kan se i nästa exempel är titeln, datumet och beskrivningarna utformade unikt, konsekvent och isolerat med hjälp av styckenavstånd. Detta gör det möjligt för oss att enkelt isolera datum (eller bandnamn för den delen) baserat på styling, plus vi kan få den information vi behöver. Det verkar som om vi kommer till Avett Brothers showen!
Det bör påpekas att när man planerar för webben finns det ett annat lager att ta hänsyn till. En webbsida har en hierarki som inte bara läses men innehåller interaktion. Sidan som helhet måste utformas på ett sätt som tydligt kommunicerar med användaren vilka åtgärder som finns tillgängliga och hur man lätt kan få tillgång till den information de söker, hur man köper en vara, etc..
I den här artikeln pratar vi dock helt om hierarkin som det gäller typ. Lyckligtvis för oss har vi vår egen praktiska HTML-tagg som låter oss semantiskt skapa typografisk hierarki på de webbplatser vi bygger. Rubrikkoder (H-taggar) tillåter oss att ange en order av betydelse i vårt innehåll: H1 till H6, H1 är viktigast, H6 är minst. Sökmotorer använder denna data för att tolka prioritet av innehåll på en webbsida.
Men hur utformar vi effektivt de H-taggarna på sätt som är meningsfullt med vårt innehåll? Glad att du frågade!
Det finns några grundläggande metoder för att skapa en visuell typografisk hierarki:
Vanligtvis används dessa metoder i kombination med varandra. I konsertlistan som visades tidigare användes alla storlekar, färg, mellanslag och typkontrast. Kombinationerna är bokstavligen oändliga.
Det här är den enklaste och vanligaste metoden för att skapa hierarki.
Att bara använda en djupare vikt av ett teckensnitt kan hjälpa till att isolera.
Färg spelar en stor roll i vad vårt öga ser som primär och sekundär. Generellt; varma färger pop, svalare färger återkallas.
Där delar av information placeras i förhållande till varandra kan det upprättas en hierarki.
Ett bra sätt att uppnå hierarkin är att använda kontrasterande teckensnitt.
Som tidigare nämnts kan dessa metoder vara mest effektiva när de används i kombination med varandra. Det här är den roliga delen - bestämmer vilken kombination som passar ditt innehåll och layout!
Ett av de viktigaste begreppen i typdesign är avstånd. Det är ett av de svåraste begreppen att förstå för nybörjare, men det är också ett av de mest visuellt uppenbara. Korrekt typografiskt avstånd är kritiskt för att upprätta hierarki; det kan göra skillnaden mellan förvirring och klarhet. Den används i de flesta hierarkiska system, och den är närvarande i alla exemplen i den här artikeln.
Regeln av anslutning I design anges i allmänhet att relaterade objekt ska visas närmare varandra än objekt som inte är relaterade. Emellertid innebär korrekt avstånd mer än bara en hård avkastning mellan sektioner av typ. I allmänhet skapar en hård avkastning för mycket utrymme mellan innehåll i samband med en paragraf. Avsnittsavstånd - antingen före eller efter - ska användas. Jag brukar använda punktavstånd som är lika med hälften av linjehöjden (eller ledande). Detta gör det vanligtvis möjligt för gruppen av innehåll att hålla ihop samtidigt som de tillhandahåller en adekvat delning av innehållet inom den.
Det är viktigt att innebörden av ett visst innehåll beaktas när man tänker på hierarkin. Vad är innehållet i innehållet? Vad försöker det att kommunicera? Om du inte vet, läs det innan du fattar beslut om hierarki och stil.
I vissa scenarier kan du ha friheten att använda någon av ovanstående hierarkimetoder, men i andra fall kan du vara begränsad till ett visst vertikalt eller horisontellt utrymme eller vara upptagen med tillräcklig kontrast av typ på en bakgrund. Utvärdera vilka metoder som fungerar för situationen och använd de som är meningsfulla. Den gamla "enklare är bättre" mantra gäller vanligtvis här. Kom ihåg att målet är att presentera innehållet på ett organiserat sätt.
Nu ska du skapa lite hierarkisk vackerhet. Om du är intresserad, har jag lagt fram några intressanta resurser relaterade till typ, hierarki och webben:
Accentsconagua