Innhold
Typografi er et andrespråk som kommuniserer på et subtilere nivå utover dine faktiske ord. Det faktiske innholdet er hva du sier, men typografi er førsteinntrykket av hvordan du sier det.
Typografi skaper en opplevelse før brukerne har lest et enkelt ord eller klikket på en menyknapp. Typografi forteller ikke bare en historie, den skaper en atmosfære og følelsesmessig respons på samme måte som en tonefall.
Som vi beskrev i Interaksjon Design Best Practices, er ord grunnlaget for alle interaksjoner. Store designere forstår dette skillet og behandler tekst ikke som innhold, men som sitt eget grensesnitt.
I denne artikkelen vil vi snakke om hvordan du bruker typografi i størst mulig grad. Vi begynner med å utforske nivåene i typografisk hierarki, deretter dykker vi ned i individuelle elementer, og avslutter med flere tips.
Nivåer av hierarki
Som vi har beskrevet i Web UI Best Practices, er typografisk hierarki en delmengde i visuelt hierarki. Typografisk hierarki ordner bokstaver slik at viktige ord lett skiller seg ut for lesere som søker etter informasjon.
Uten dette hierarkiet vil hver bokstav og hvert ord i et design virke identisk. Designet ditt vil være omtrent like visuelt tiltalende som en MS DOS-ledetekst. Som hovedregel anbefaler designer Carrie Cousins at typografien din støtter minst tre nivåer av hierarki.
Prøv å forme typografien din til disse nivåene:
- Primær - Den mest merkbare teksten på siden, vanligvis større og lysere enn de andre tekstlagene. Fordi det er så kraftig, bør dette nivået være sparsomt - reserver det bare for overskrifter og kortstokker (kjent som 'møbler').
- Sekundær - Mindre merkbar enn primærnivået, men mer merkbar enn hovedinnholdet, sekundærnivået håndterer alt imellom. Dette nivået har noen minimale, men tydelige elementer i størrelse og farge, og inkluderer vanligvis underoverskrifter, bildetekster, trekk anførselstegn, infografikk eller støttende tekstblokker som er skilt fra hovedinnholdet.
- Tertiær - Dette er hovedinnholdet, det vanligste og minst merkbare. Det skal være enkelt og ikke prangende - målet med de andre lagene er å vekke oppmerksomhet; Målet med dette laget er å oppmuntre leseren til å bli nedsenket i teksten, derav mindre distraksjon.
- Annet - Mindre nivåer av hierarki kan opprettes ved sparsomt å bruke kursiv, farge, fet skrift, understreking og andre effekter på tertiær type. Disse nivåene kan inneholde understrekede lenker, noen få fet skrift for å fremheve avsnittene osv. Tekst som vises i bannere, logoer eller annen bakgrunnsgrafikk faller også inn i denne kategorien.
For å illustrere separasjonen av lag som brukes riktig, la oss se på eksemplet nedenfor fra Jon Tangerine.
Typografien her har tre forskjellige lag for å tydelig forklare elementene i stykket uten å forklare noe.
- Tittelen er åpenbart 'We, Who Are Web Designers', men hvorfor er den åpenbar? Teksten er større (størrelse), dristigere (vekt), og er satt øverst til venstre der seernes øyne går først (posisjon).
- Det andre nivået er publiseringsdatoen, satt i en annen størrelse og farge enn resten av teksten, og også kursiv for å gi mer skille.
- Det tredje nivået, forhåndsvisning av artikkelen, er blottet for funksjoner. Sammenlignet med de andre lagene kan det virke tydelig, men det er slik at leserne ikke blir distrahert når de prøver å sette pris på det faktiske innholdet.
Neste side: elementer av hierarki i typografi og videre ...
