Varje projekt kräver ett system och en hierarki för textelement. Tänk bara på alla små bitar av text som används under hela designen - rubriker, kroppskopia, navigationselement, juridisk information, bildtexter och så vidare.
Men hur skapar du den här hierarkin så att varje textelement flyter smidigt till nästa? Idag tar vi dig steg för steg genom att bygga ett system av typografi hierarki som kan användas för nästan alla designprojekt. (Och vi förenar tipsen med vackra exempel på bra typografi för att hjälpa dig att samla lite inspiration.)
1. Börja med bekväm kroppskopia
Medan du kanske vill börja med en sval rubrikbehandling är platsen att börja faktiskt i mitten. Upprätta en bekväm typ, storlek och avstånd för huvudkroppen först.
Detta borde vara meningsfullt eftersom det här är huvuddelen av texten i designen. Oavsett om du bygger en webbplats eller broschyr, är detta koncept detsamma. Ideal läsbarhet för kroppskopia ligger någonstans mellan 50 och 60 tecken per rad (eller kolumn), enligt Baymard Institute. Denna riktlinje hjälper dig att ställa in en skala för text som är läsbar och står för olika typer av teckensnitt (som vanligt mot kondenserat mot slab).
2. Bygg en skala
När du väl vet vad kroppskopian kommer att se ut, kan du ställa in en skala runt den för alla andra textelement i designen. Det kan vara lätt att förbise vissa textblock; gör en lista över alla olika användningsområden för text i ditt projekt.
- Kroppskopia
- rubriker
- rubriker
- Bildtexter texter~~POS=HEADCOMP
- Block citat
- Navigationselement
- Footer information
- Juridisk kopia eller ansvarsfriskrivning
Skapa nu en skala som dikterar typsnitt, storlek och användning för varje av dessa element. (Och bygga den i din CSS för webbplatser eller formatfiler för arbetsdokument.) Det finns ett antal sätt att skapa skalan, men procentandel av storleken kan vara en bra utgångspunkt. Du kan också upprätta en skala baserad på matematiken bakom ett grunnlinje eller visuellt.
Här är en enkel skala för att starta:
- Kropps kopia storlek
- Rubriker är kropps kopia storlek gånger 220%
- Underrubriker är kroppstypstorlekstider 150%
- Navigationselement är kroppstypstorlekstider 80%
- Footer / juridisk kopia är kroppstider gånger 80%
3. Tänk största till minsta, topp till botten
Denna regel är ganska enkel: Den största och viktigaste texten borde vara överst och storlekarna bör minska när du läser ner sidan eller skärmen.
Det är inte att säga att du inte kan bryta denna regel då och då med viss designfiness, men det bör alltid vara utgångspunkten för att utveckla typografisk hierarki. (Vem ska verkligen rulla till slutet av en webbsida för rubriken och sedan tillbaka till början för att börja läsa?)
4. Skapa regler för rymden
Lika viktigt som storleken på bokstäver är utrymmet mellan och runt det. Faktorer för att bestämma utrymme inkluderar ledande (eller linjehöjd), streck (eller ej), omslag och rännor och inriktning.
Tänk på avståndsförhållanden som speglar storleken som används för limning av text. Storleken på duken är också ganska viktig här också. Större canvaser är läsbara med snabbare avstånd än små canvaser. (Det är därför många projekt har mycket mer släckande distansspecifikationer för enheter som mobiltelefoner och hårdare regler för stationära datorer.)
Precis som med typstorlekar bör avståndsregler fastställas i förväg för hela designramen. Konsistent, rent avstånd är en av de små saker som kan göra eller bryta en design.
5. Ställ in regler för fet och kursiv
Medan fet och kursiv inte är olika typelement eller storlekar är användningen viktig. (Bara bild hur designen kommer att se ut om alla andra ord är fetstil.)
Detta gör riktlinjer för fet och kursiv speciellt viktigt. Snarare än att titta på storlek eller utrymme är övervägandet mycket mer kontextuellt. Användningsspecifikationer kan ange att endast så många ord eller fraser (eller specifika ord eller fraser) kan ha denna behandling. Det är ett vanligt misstag att överanvända fet och kursiv; När det är osäkert, använd det inte.
6. Skapa en? Z?
Det vanliga läsemönstret är i form av en Z. Oavsett om du utformar ett språk som läser åt vänster till höger eller höger till vänster (vänd Z), kommer användarna att läsa från ett hörn över linjen till slutet och sedan tillbaka till starthjulet och över linjen i ett repeterande mönster.
Använd detta naturliga flöde när du placerar textelement på skärmen. Denna Z-form är varför de flesta märken placerar sin logotyp i det övre vänstra hörnet. Det är den första platsen som ögat landar när man läser.
7. Tänk på visuell vikt
Storlek är inte den enda faktorn när det gäller hur stort ett textelement ser ut på skärmen. Visuell vikt är lika viktig och kan påverka hur du skapar en typografisk skala.
Teckensnitt kommer att se större ut när:
- De innehåller tjocka slagviktar
- De omfattar blomningar eller utsmyckningar
- De är breda
- De är nyhetsbaserade typsnitt
- De har högre x-höjder
- De används som alla kepsar
Teckensnitt kommer att se mindre när:
- De kondenseras
- De inkluderar lätta eller smala slagbredd
- Det finns liten kontrast med bakgrunden
- De används med små bokstäver
8. Skapa accenter
Det finns vissa ord som du vill markera fallet lite utanför den normala typografiska skalan. Lägga till en accent för bokstäver kan göra att den sticker ut utan att behöva justera den faktiska storleken eller typsnittet.
Vanliga accenter är:
- Färg
- Understrykning
- Markera
- Text i en knapp eller form
- Enkel animering
- Ändra i fall från annan typ av samma storlek
Det trevliga med någon accent inom en typhierarki är att det är en omedelbar uppmärksamhet-gripare. Dessa element bör användas sparsamt för den mest effektiva effekten och för nyckelelement i designen.
9. Använd ögonprovet?
Slutligen har varje regel ett undantag (eller två). Det är där ögonprovet? kommer in. Se bara på skalan på skärmen. Hur ser texten ut och känns för dig? Finns det ett logiskt flöde? Det är lätt att läsa?
Om det känns av något sätt, överväg att göra justeringar på skalan. Beroende på typsnittet du använder och andra element i designen - från bilder till färg till kontrast - skal skalan justeras från din sida. Det är bara en utgångspunkt när du är osäker på vad du vill göra.
Och fråga om andra ögon också. Skapa en eller två versioner med olika hierarkier för att se vilken version som får det bästa svaret. Design är en bildkonst, som gör ögonprovet? ett osäkert men ganska tillförlitligt alternativ.
Slutsats
När du väl har ställt in en typografisk hierarki för ett projekt, är det bästa du kan göra att dokumentera det. Upprätta skalan med CSS för webbplatser eller skapa stilfiler när du arbetar med utskrivna projekt.
För större skala eller branding, sätt skala och specifikationer skriftligen i en stil guide. Att skapa en typhierarki kräver lite arbete på baksidan, men gör projektets slutförandet snabbare, enklare och inte mer konsekvent, eftersom du går vidare med efterföljande projekt.