9 tips for bedre typografisk hierarki
Hvert prosjekt krever et system og hierarki for tekstelementer. Bare tenk på alle de små tekststykkene som brukes gjennom en design - overskrifter, kroppskopi, navigasjonselementer, juridisk informasjon, bildetekster og så videre.
Men hvordan lager du det hierarkiet slik at hvert tekstelement flyter jevnt til det neste? I dag tar vi deg steg for steg gjennom å bygge et system med typografihierarki som kan brukes til nesten ethvert designprosjekt. (Og vi parer tipsene med vakre eksempler på flott typografi for å hjelpe deg med å samle litt inspirasjon.)
Utforsk Envato Elements
1. Start med komfortabel kroppskopi
Selv om det kan være lurt å starte med en kul overskriftbehandling, er stedet å starte faktisk i midten. Etablere et behagelig skrifttype, størrelse og avstand for hoveddelen kopi først.
Dette bør være fornuftig fordi dette er hoveddelen av teksten i designet. Enten du bygger en webside eller brosjyre, er dette konseptet det samme. Ideell lesbarhet for kroppskopi er et sted mellom 50 og 60 tegn per linje (eller kolonne), ifølge Baymard Institute. Denne retningslinjen hjelper deg å angi en skala for tekst som er lesbar og står for forskjellige typer skrifter (for eksempel vanlig versus kondensert versus plate).
2. Bygg en skala
Når du vet hvordan kroppskopien vil se ut, kan du sette en skala rundt den for alle de andre tekstelementene i designet. Det kan være lett å overse visse tekstblokker; lag en liste over alle forskjellige bruksområder for tekst i prosjektet.
- Kroppskopi
- overskrifter
- underoverskrifter
- Bildetekster
- Blokker sitater
- Navigasjonselementer
- Bunntekstinformasjon
- Juridisk kopi eller ansvarsfraskrivelse
Nå lager du en skala som dikterer skrifttype, størrelsesområde og bruk for hvert av disse elementene. (Og bygg den inn i CSS-en for nettsteder eller stiler-filer for arbeidsdokumenter.) Det er flere måter å lage skalaen på, men prosentandel av størrelse kan være et godt utgangspunkt. Du kan også etablere en skala basert på regnestykket bak et grunnleggende rutenett eller visuelt.
Her er en enkel skala å starte:
- Størrelse på kroppskopi
- Overskrifter er kroppskopi-størrelse ganger 220%
- Underoverskrifter er kroppskopi-størrelse ganger 150%
- Navigasjonselementer er kroppskopi-størrelse ganger 80%
- Bunntekst / lovlig kopi er kroppsstørrelse ganger 80%
3. Tenk størst til minste, topp til bunn
Denne regelen er ganske enkel: Den største og viktigste teksten bør være øverst, og størrelsene bør avta når du leser ned siden eller skjermen.
Det er ikke å si at du ikke kan bryte denne regelen nå og da med litt designfinesse, men det skal alltid være utgangspunktet for å utvikle typografisk hierarki. (Hvem kommer egentlig til å bla til slutten av en webside for overskriften og deretter tilbake til toppen for å begynne å lese?)
4. Etabler regler for plass
Like viktig som størrelsen på bokstaven er avstanden mellom og rundt den. Faktorer for å bestemme plass inkluderer ledende (eller linjehøyde), innrykk (eller ikke), innpakning og takrenner og innretting.
Vurder avstandsforhold som speiler skalaen som brukes til størrelse på tekst. Størrelsen på lerretet er også ganske viktig her også. Større lerreter er lesbare med strammere avstand enn små lerreter. (Det er derfor mange prosjekter har mye løsere avstandspesifikasjoner for enheter som mobiltelefoner og strammere regler for stasjonære maskiner.)
Akkurat som med skrifttypestørrelser, bør avstandsregler settes på forhånd for hele designrammen. Konsistent, rent avstand er en av de små tingene som kan lage eller ødelegge et design.
5. Angi regler for fet skrift og kursiv
Selv om fet skrift og kursiv ikke er elementer eller størrelser av forskjellig type, er bruk viktig. (Bare tenk hvordan designen vil se ut hvis hvert annet ord er fet.)
Dette gjør retningslinjer for fet skrift og kursiv spesielt viktig. Heller enn å se på størrelse eller plass, er hensynet mye mer kontekstuelt. Bruksspesifikasjoner kan si at bare så mange ord eller uttrykk (eller spesifikke ord eller uttrykk) kan ha denne behandlingen. Det er en vanlig feil å overforbruk fet og kursiv; når det tviler, ikke bruk det.
6. Opprett en "Z"
Det vanlige lesemønsteret er i form av en Z. Enten du designer for et språk som leser fra venstre til høyre eller høyre mot venstre (vipp Z), vil brukerne lese fra det ene hjørnet over linjen til slutten og deretter tilbake til starthjørnet og over linjen i et repeterende mønster.
Bruk denne naturlige flyten når du plasserer tekstelementer på skjermen. Denne Z-formen er grunnen til at de fleste merker plasserer logoen sin i øverste venstre hjørne. Det er det første stedet øyet lander når du leser.
7. Vurder visuell vekt
Størrelse er ikke den eneste faktoren når det gjelder hvor stort tekstelement ser ut på skjermen. Visuell vekt er like viktig og kan påvirke måten du lager en typografisk skala.
Skrifttyper vil se større ut når:
- De inkluderer tykke slagvekter
- De inkluderer blomstrer eller pyntegjenstander
- De er brede
- De er nyhetsbasert skrifter
- De har høyere x-høyder
- De brukes som alle luer
Skrifttyper vil se mindre ut når:
- De er kondenserte
- De inkluderer lette eller tynne slagbredder
- Det er liten kontrast med bakgrunnen
- De brukes med små bokstaver
8. Opprett aksenter
Det er visse ord som du vil markere som faller litt utenfor den normale typografiske skalaen. Hvis du legger til en aksent til bokstaver, kan det skille seg ut uten å måtte justere den faktiske størrelsen eller skrifttypen.
Vanlige aksenter inkluderer:
- Farge
- understreking
- Fremheve
- Tekst i en knapp eller form
- Enkel animasjon
- Endre saken fra annen type av samme størrelse
Det fine med en hvilken som helst aksent i et typehierarki er at det er en øyeblikkelig oppmerksomhetsfanger. Disse elementene bør brukes sparsomt for mest mulig påvirkning og for sentrale elementer i designet.
9. Bruk “Eye Test”
Til slutt har hver regel et unntak (eller to). Det er her "øyetesten" kommer inn. Bare se på skalaen på skjermen. Hvordan ser og føles teksten ut for deg? Er det en logisk flyt? Det er lett å lese?
Hvis det føles av på noen måte, kan du vurdere å justere skalaen. Avhengig av skrifttypen du bruker og andre elementer i designen - fra bilder til farge til kontrast - vil skalaen kreve justering fra din side. Det er bare et utgangspunkt når du ikke er sikker på hva du vil gjøre.
Og be om andre øyne også. Lag en eller to versjoner med forskjellige hierarkier for å se hvilken versjon som får best svar. Design er en visuell kunst, noe som gjør "øyetesten" til et upresist, men ganske pålitelig alternativ.
Konklusjon
Når du har angitt et typografisk hierarki for et prosjekt, er det beste du kan gjøre å dokumentere det. Etabler skalaen med CSS for nettsteder eller lag stiler-filer når du jobber med trykte prosjekter.
For større skala design eller merkevarebygging, skriv skalaen og spesifikasjonene skriftlig i en stilguide. Å lage et hierarki krever litt arbeid på baksiden, men gjør ferdigstillelse av prosjekter raskere, enklere og for ikke å nevne mer konsistent når du går videre med påfølgende prosjekter.
