En av de viktigaste elementen för att människor tittar på allt du designar är typen. Det måste vara tydligt och läsligt och det ska leda användarna genom en design, från viktigaste element till minst.
Och det, i ett nötskal, förklarar typografi hierarki. Men för att verkligen behärska konsten av typ, måste du förstå hur man lagar typ genom en design för att uppnå maximal effekt. Läs vidare för att lära dig att behärska typografi hierarki och skapa effektiv typ i varje projekt.
Vad är typografisk hierarki?
Typografisk hierarki är en annan form av visuell hierarki, en sub-hierarki per se i ett övergripande designprojekt. Typografisk hierarki presenterar bokstäver så att de viktigaste orden visas med största inverkan så att användarna kan skanna text för nyckelinformation.
Utan typografisk hierarki skulle varje bokstav, varje ord och varje mening i en design se ut på samma sätt. Kan du tänka dig att läsa något där allt är samma typsnitt och storlek och färg? Var börjar du? Hur vet du vad som är viktigast?
Typografisk hierarki skapar kontrast mellan element. Designers uppnå detta genom att använda typsnitt, storlek, vikt, huvudstorlek och små bokstäver, fet eller kursiv, orientering och färg. Kombinationer av dessa designverktyg används för att skapa typ som faller i olika lager.
Primär nivå
Den primära nivån av typografi är all den stora typen. Det är rubriker och däck - även känd som? Möbler? - som drar läsarna in i designen. Detta är den största typen i designen (om du inte använder typografisk konst).
Sekundär nivå
Den sekundära nivån av typografi är nuggets av skannbar information som hjälper läsarna att stanna med designen. Detta inkluderar element som underrubriker, bildtexter, dra citationstecken, infographics och andra små textblock som lägger till information till den primära textnivån. Utformningen av dessa textblock är på den stora sidan, men typiskt mycket mindre än bokstäver på den primära nivån av typografi.
Tertiär nivå
Den tertiära nivån på typografi är huvudtexten i din design. Det är ofta en av de minsta typen i designen, men den måste vara tillräckligt stor för att kunna läsas av alla potentiella användare. Tecknet ska vara enkelt och konsekvent i design, avstånd och övergripande användning.
Andra nivåer
De andra nivåerna av typografi inkluderar effekter som tillämpas för att skriva i tertiär nivå för små områden av påverkan. Effekter som fetstil, kursiv, understrykning och färg kan uppmärksamma specifika delar av huvudtexten. Dessa effekter fungerar bäst när de tillämpas på text av samma storlek och typsnitt som används på tertiär nivå. Effekter används sparsamt och för endast några ord i följd. Exempel på andra nivåer är länkar som understrykas, djärva ord för påverkan eller kursiv eller färg för betoning.
Hierarki i utskriftsprojekt
Visuell hierarki i utskriftsprojekt är strikt visuell. Att använda storlek, färg och andra effekter för att få vissa bitar av typ verkar stora och viktigare och skalar i enlighet med detta är allt du verkligen behöver göra för att få en bra start.
Om du tittar på steg-för-steg-exemplet ovan kan du tydligt se olika nivåer av typografisk hierarki och hur det gör konstruktionen både lättare att läsa och mer tilltalande visuellt. Du kan tillämpa samma teknik på något designprojekt genom att lägga vikt på viktiga områden.
Skapa det
Det finns en mängd olika sätt att skapa en känsla av hierarki. Här är några av de vanligaste teknikerna:
- Typfältval: Mer intressanta teckensnitt kan se ut större och dra ögat snabbare än de med mindre visuell intrig. När du använder nyhet, ska skript eller utarbetade tecken vara medvetna om läsbarhetsproblem och se till att typen är mycket stor.
- Storlek: Det säger nästan självklart, men desto större typ, desto snabbare blir ögat draget. Typstorleken borde korrelera med ordningen av betydelse vid läsning av texten.
- Vikt: Bokstjocklek kan göra texten större (fet, tjock slag) eller mindre (tunna eller komprimerade teckensnitt).
- Huvud och små bokstäver: Du har hört att att skicka ett mail i alla stora bokstäver är som att skrika på någon. Detsamma gäller alla kepsar i design. Var försiktig med användning. Huvudbokstäverna kommer att visa sig större och komma i framkant medan små bokstäver verkar mindre och ofta faller i bakgrunden.
- Djärv: Djärv bokstäver är en bra utgångspunkt för ett enda ord eller fras. Det fungerar särskilt bra på tertiär nivå av typ.
- Kursiv: Kursiv bokstäver kan markera ett enda ord eller fras på ett mindre dramatiskt och mer subtilt sätt än fetstil. Det fungerar särskilt bra på tertiär nivå av typ.
- Orientering: Vridbara bokstäver på deras sida, upp och ner eller med någon annan orientering som horisontellt kan ha omedelbar ögonkontakt, eftersom de placeras på ett annat sätt än vad som förväntas. Detta kan fungera bra för korta ord eller fraser i textens primära nivå.
- Färg: Att lägga till färg till bokstäver som vanligtvis inte har färg skapar specifikt och omedelbart intresse. Denna effekt kan fungera på vilken nivå som helst av text, men bör vara avsiktligt att inte skapa läsbarhetsproblem eller förvirring.
- Placering: Där text finns, kan du också skapa hierarki. Vanligtvis läser du från topp till botten (en naturlig hierarki av sorter) men det kan ändras genom att använda några av ovanstående tekniker.
Hierarki i digitala projekt
Alla verktyg som du använder i utskriftsprojekt gäller även för digitala projekt, med några tillägg. Digital typografisk hierarki måste också innehålla hänsyn till HTML vid skapandet av webbtyp.Denna extra tänkande säkerställer att dina visuella nivåer kommer att översättas till andra användare på skärmen.
Skapa det
Se till att använda vanliga konventioner, inklusive rubrik, kropp och djärva stilar när du arbetar med projekt som kommer att publiceras online. Var och en av dessa vanligt använda stildefinitioner faller inom morötter () i HTML.
- Titel (titel): Definierar dokumenttiteln för webbläsare och användare.
- Kropp (kropp): Definierar kroppstexten i ett dokument.
- Huvud (h1 till h6): Definierar olika lager av rubrikstorlekar. H1 är typiskt den största och viktigaste, flytta ner genom H6. Du behöver bara använda så många som du vill.
- Fet (stark): Definierar tyngre, viktigare text.
- Kursiv (em): Definierar text med en lutning för betoning.
Hierarki och användbarhet
När det gäller mobila applikationer måste du tänka på visuell typografisk hierarki, HTML typografisk hierarki och användbarhet i typografi hierarki. Texten måste inte bara se bra ut och fungera korrekt, men det måste också utformas så att användarna vet vad de ska göra med det och det interagerar som förväntat.
Denna åtgärdsbaserade typografi innehåller några viktiga saker för designers. Typ måste vara tillräckligt stor för att trycka på, åtskilda så att varje tappningsobjekt är tydligt definierat och användbara element har en viss visuell definition (t.ex. en knapp).
Skapa det
Saken att tänka på när du skapar användbar typografisk hierarki är att skilja typelement som användare kommer att interagera med från de de inte kommer och från varandra. Viktiga överväganden inkluderar:
- Rymden: Ge varje element som ska röras eller tappas, gott om utrymme. Tänk på storleken på utrymmet och hur mycket utrymme det tar för ett finger att röra vid det. Användare kan snabbt bli frustrerade om typen är så nära att det fela elementet är klickat.
- Färg: Skapa en färgpalett för användbarhet. Överväg att göra varje ord som är avsett att röra en annan färg än huvudtexten.
- Shadows: Drop skuggor är en vanlig indikator på en knapp som kan tryckas på något sätt.
- Gränser: Överväg att lägga till gränser för oberoende element som du vill att användarna ska interagera med. Se till att de är skilda från bakgrunden. (Trendiga? Spökknappar? Är ett bra exempel på detta, som i rymdfarkostens exempel ovan.)
- Animering: Att flytta text, medan det är svårt att använda, kan vara ett snabbt sätt att hjälpa till att dra i sig vissa ord.
- Riktning: Kom ihåg att berätta för användarna vad man ska göra på skärmen, från att knacka på att bläddra till samtal till handling.
Slutsats
Chansen är att du designar med någon typ av typografisk hierarki även utan att tänka på det. Men med tanke på hur typen kommer att anpassas på ett stort sätt kan du förbättra din övergripande design.
Använd typografisk hierarki för att lägga till betoning, inverkan och skapa samtal till handling som användare kan se och reagera på snabbt. Kom ihåg att tänka på läsbarhet, skanningsförmåga och övergripande förståelse när man fattar beslut om en typsnitt, storlek och effekter som tillämpas på den. Dina läsare (eller användare) kommer tacka dig.