uanset om det er på vores telefoner, i bøger eller på hjemmesider, fordøjer vi konstant skrevne ord. Fra instruktionshæfter til butiksfronter, type er overalt omkring os. Vi reflekterer ofte over kraften i det skrevne ord, men sjældent overvejer vi designerens rolle i at efterligne tonen i ordet eller sætningen.
bag kulisserne har en designer taget sig tid til at overveje forholdet mellem tekstens udseende og hvad teksten siger. I virkeligheden kan forskellige stemninger, atmosfærer og følelser udtrykkes simpelthen gennem typevalget. Men hvad er egentlig typografi—og hvorfor er det så vigtigt?
i denne artikel løfter vi låget på alt hvad du behøver at vide om typografi. Vi starter med definitionen af typografi, herunder en kort historie om dens oprindelse. Vi tager derefter fat på fordelene ved god typografi og den indvirkning, det kan have på dine brugere. Endelig vil vi se på de forskellige elementer, der omfatter typografi, og hvad de alle betyder.
Her er hvad vi dækker:
- hvad er typografi?
- Hvorfor er typografi vigtigt?
- de forskellige elementer i typografi
- Hvordan vælger du det rigtige skrifttype til din hjemmeside
- konklusion
klar? Lad os dykke ind!
hvad er typografi?
lad os starte med det grundlæggende: Hvad er faktisk typografi? I det væsentlige er typografi kunsten at arrangere bogstaver og tekst på en måde, der gør kopien læselig, klar og visuelt tiltalende for læseren. Typografi involverer skrifttypestil, udseende og struktur, der sigter mod at fremkalde visse følelser og formidle specifikke budskaber. Kort sagt er typografi det, der bringer teksten til live.
i videoen nedenfor løfter careerfoundry UI design mentor Olga låget på, hvorfor typografi betyder noget—og hvilken forskel det gør for dine brugere.
typografi kan dateres tilbage til det 11.århundrede under innovation af bevægelig type. Før den digitale tidsalder var typografi et specialiseret håndværk forbundet med bøger og magasiner og til sidst offentlige værker. Det første eksempel på typografi kan ses i Gutenberg-Bibelen, som startede en typografirevolution i Vesten. Sjov kendsgerning: den type, der bruges i Gutenberg-Bibelen, er nu kendt som Tekstura, og du finder den i rullemenuen skrifttype på større desktop-applikationer i dag!
hurtigt frem til moderne tid, hvor typografi for det meste er forbundet med både den digitale verden og print. Med fødslen af internettet kom en kreativ eksplosion af typografiens kunst. Pludselig havde internetdesignere en overflod af skrifttyper og typeindstillinger til deres rådighed, hvilket gjorde typografi mere visuelt forskelligartet end nogensinde før.
hvorfor er typografi vigtig?
Typografi er så meget mere end bare at vælge smukke skrifttyper: Det er en vigtig komponent i brugergrænsefladedesign. God typografi vil etablere et stærkt visuelt hierarki, give en grafisk balance til hjemmesiden og indstille produktets overordnede tone. Typografi skal vejlede og informere dine brugere, optimere læsbarhed og tilgængelighed og sikre en fremragende brugeroplevelse.
lad os dykke lidt dybere ind i, hvorfor Typografi er så vigtig.
typografi bygger mærkegenkendelse
ikke kun vil god typografi forbedre hjemmesidens personlighed, men dine brugere vil subliminalt begynde at knytte det skrifttype, der vises på din side, til dit brand. Unik, konsistent typografi hjælper dig med at etablere en stærk brugerfølger, opbygge tillid til dine brugere og hjælpe med at føre dit brand fremad.
typografi påvirker beslutningstagningen
typografi har en dybtgående indvirkning på den måde, brugerne fordøjer og opfatter de oplysninger, der formidles af teksten. Iøjnefaldende type er meget mere overbevisende end svage skrifttyper, der ikke forstærker tekstens budskab.
typografi holder læsernes opmærksomhed
god typografi kan være forskellen mellem en person, der opholder sig på din hjemmeside i et minut eller en halv time. Det er vigtigt, at din hjemmeside er visuelt stimulerende og mindeværdig, og typografi spiller en stor rolle i denne proces.
de forskellige elementer i typografi
for at komme i gang med typografi skal du først tage fat på de otte væsentlige typografiske designelementer.
skrifttyper
der er en vis forvirring omkring forskellen mellem skrifttyper og skrifttyper, hvor mange behandler de to som synonyme. Et skrifttype er en designstil, der består af et utal af tegn i forskellige størrelser og vægt, mens en skrifttype er en grafisk repræsentation af tekstkarakter. Enkelt sagt er et skrifttype en familie af relaterede skrifttyper, mens skrifttyper henviser til de vægte, bredder og stilarter, der udgør et skrifttype.
Der er tre grundlæggende typer skrifttyper: serif, sans-serif og dekorativ. For at holde grænsefladen ryddelig og strømlinet bruger en god designer aldrig mere end tre skrifttyper—og holder dekorative skrifttyper på et minimum. De fleste UI-designere parrer serif-skrifttyper med sans-serif-skrifttyper, såsom at sætte hovedtekst i en serif-skrifttype og sætte din titel i en sans-serif-skrifttype eller omvendt.
kontrast
ligesom hierarki hjælper kontrast med at formidle, hvilke ideer eller meddelelser du vil understrege til dine læsere. At bruge lidt tid på kontrast gør din tekst interessant, meningsfuld, og opmærksomhedsgribende. De fleste designere skaber kontrast ved at lege med forskellige skrifttyper, farver, stilarter og størrelser for at skabe indflydelse og bryde siden op.
konsistens
at holde dine skrifttyper konsistente er nøglen til at undgå en forvirrende og rodet grænseflade. Når du formidler information, er det vigtigt at holde sig til den samme skrifttypestil, så dine læsere øjeblikkeligt forstår, hvad de læser, og begynder at bemærke et mønster. Selvom det er ok at lege med niveauer af hierarki til en vis grad, er det god praksis at etablere et konsistent hierarki af skrifttyper (en konsistent skrifttype til overskrifter, en anden til underoverskrifter) og holde sig til det.
hvidt rum
ofte omtalt som ‘negativt rum,’ hvidt rum er rummet omkring tekst eller grafik. Det overses ofte og har tendens til at gå ubemærket hen af brugeren, men korrekt brug af hvidt rum sikrer, at grænsefladen er overskuelig, og teksten kan læses. Hvidt rum kan endda henlede opmærksomheden på teksten og giver en samlet æstetisk tiltalende oplevelse. Hvidt rum tager ofte form af margener, polstring eller bare områder uden tekst eller grafik.
justering
justering er processen med at forene og komponere tekst, grafik og billeder for at sikre, at der er lige plads, størrelse og afstande mellem hvert element. Mange UI-designere opretter margener for at sikre, at deres logo, overskrift og teksttekst er på linje med hinanden. Når du justerer din brugergrænseflade, er det god praksis at være opmærksom på industristandarder. For eksempel vil justering af din tekst til højre virke kontraintuitivt for læsere, der læser venstre mod højre.
farve
farve er et af de mest spændende elementer i typografi. Det er her designere virkelig kan blive kreative og hæve grænsefladen til et nyt niveau. Tekstfarve skal dog ikke tages let: sømning af din Skrifttypefarve kan få teksten til at skille sig ud og formidle tonen i meddelelsen —men at få det forkert kan resultere i en rodet grænseflade og tekst, der kolliderer med stedets farver.
farve har tre nøglekomponenter: værdi, farvetone og mætning. En god designer vil vide, hvordan man afbalancerer disse tre komponenter for at gøre teksten både iøjnefaldende og let læselig, selv for dem med synshandicap. Ofte vil designere teste dette ved at se teksten i gråtoner (uden farve) og foretage justeringer, hvis teksten er for mørk eller for lys mod baggrundsfarven.
hierarki
etablering af hierarki er et af de mest vitale principper for typografi. Typografisk hierarki sigter mod at skabe en klar skelnen mellem fremtrædende stykker kopi, der skal bemærkes og læses først, og standardtekstkopi. I en tid med korte opmærksomhedsspænd forårsaget af sociale medier, designere opfordres til at være kortfattede og oprette skrifttyper, der giver brugerne mulighed for at forbruge de nødvendige oplysninger på kort tid.
hierarki kan oprettes ved hjælp af størrelse, farve, kontrast og justering. For eksempel, hvis du har en linje med kopi med et udråbstegn ikon i starten, der er i rødt og større end den forrige kopi, er dette en visuel anelse til læserne om, at det er en opfordring til handling. Det mest typiske eksempel på typografisk hierarki er størrelse: overskrifter skal altid være større end underoverskrifter og standardtekst.
Hvordan vælger du den rigtige skrifttype til din hjemmeside?
nu hvor vi har gjort os bekendt med de forskellige typografielementer, lad os tale om processen med at vælge skrifttyper til din grænseflade. Med så mange forskellige skrifttyper og skrifttyper at vælge imellem er det let at føle sig overvældet. At træffe det rigtige valg afhænger af så meget mere end bare at se, hvad der ser godt ud. Her er et par vigtige overvejelser:
tænk på personlighed
hvordan vil du have dine brugere til at føle, når de først kommer ind på din hjemmeside. Ønsker du at efterligne en venlig atmosfære? Ønsker du, at siden skal føles avanceret, indbydende, legende, eller seriøs? Det er bydende nødvendigt, at typografien afspejler brandets eller produktets personlighed. Et godt udgangspunkt, når man står over for denne udfordring, er at definere kerneegenskaberne i dit brand og begynde at samle skrifttyper, der afspejler disse træk. Derfra kan du begynde at bemærke en tendens.
reflekter over tone
det er lige så vigtigt at overveje, hvordan skrifttypen harmonerer med meddelelsens tone. Vil formidle seriøs eller vigtig information, skal du vælge en mindre stiliseret eller dekorativ skrifttype, der både er let læselig og begrænser distraktion.
Skim ikke på funktion
funktion er lige så vigtig som form: der er ikke noget værre end en hjemmeside, der ser smuk ud, men er helt ulæselig, hvilket fører dig til at klikke på den forkerte knap eller tage en forkert drejning, fordi instruktionerne var uklare. Når du beslutter, hvilke skrifttyper der skal medtages i din grænseflade, skal du sætte stilen, æstetikken og stemmen til side og reflektere over, om skrifttypen er læselig, læsbar og tilgængelig. Kan teksten være læselig uden belastning? Er karaktererne tydelige nok?
overvej ydeevne
en ting, som mange designere ofte overser, er at vælge skrifttyper, der er venlige. Almindeligt anvendte skrifttypebiblioteker som Google fonts tilbyder internetbaserede Skrifttypefiler, der kan gengives perfekt i en bro.ser uden problemer. Pro tip: når du henter skrifttyper, skal du aldrig hente flere tegnsæt, end du har brug for. På denne måde undgår du overvægt!
bliv inspireret
Hvis du ikke er sikker på, hvor du skal starte, skal du tage dig tid til at se, hvad andre mennesker laver. Åbn dine øjne for den typografi, du ser omkring dig. Kan du bemærke lignende mønstre? Kan du se gode og dårlige eksempler på typografi? Selv efter typografi hashtags på sociale medier eller slå op typografi på Pinterest vil give dig nogle gode ideer om, hvad der er derude. Du kan også se på disse otte typografitendenser for yderligere inspiration.
Tag dig tid til at teste
den bedste måde at dechiffrere, hvilken skrifttype der skal bruges til din grænseflade? Test, test og test! Ved at indsamle nyttig feedback fra rigtige brugere får du et klarere indblik i, hvad der virker, hvad der ikke gør, hvad der er læseligt og hvad der føles kontraintuitivt eller klumpet.
konklusion
typografi overses ofte, men det er en afgørende komponent i brugergrænsefladedesign. Mastering typografi vil se dig godt på vej til at blive en fantastisk UI designer! Hvis du ikke er sikker på, hvor du skal starte, hvorfor ikke gå til dine foretrukne hjemmesider og begynde at notere, hvilke skrifttyper de har gået til.
ivrig efter at lære mere om UI design? Tjek disse relaterede blogindlæg:
- 10 eksempler på smukke blogs, der har spikret deres UI-design
- 32 brugergrænsefladeelementer til UI-designere: din ultimative ordliste
- sådan designer du et ikon fra bunden: en trinvis vejledning