Enten det er på våre telefoner, i bøker eller på nettsteder, fordøyer vi hele tiden skriftlige ord. Fra instruksjonshefter til butikkfronter, type er rundt oss. Vi reflekterer ofte over kraften i det skrevne ord, men sjelden vurderer vi designerens rolle i å etterligne tonen i ordet eller setningen.
Bak kulissene har en designer tatt seg tid til å vurdere forholdet mellom utseendet på teksten og hva teksten sier. I virkeligheten, ulike stemninger, atmosfærer og følelser kan uttrykkes bare gjennom type valg. Men hva er egentlig typografi—og hvorfor er det så viktig?
i denne artikkelen løfter vi lokket på alt du trenger å vite om typografi. Vi starter med definisjonen av typografi, inkludert en kort historie om opprinnelsen. Vi vil da ta opp fordelene med god typografi og virkningen det kan ha på brukerne. Til slutt ser vi på de forskjellige elementene som utgjør typografi, og hva de alle betyr.
Her er hva vi skal dekke:
- hva er typografi?
- hvorfor er typografi viktig ?
- de ulike elementene i typografi
- Hvordan velge riktig skrifttype for nettstedet Ditt
- Konklusjon
Klar? La oss dykke inn!
hva er typografi?
La oss starte med det grunnleggende: hva er egentlig typografi? Typografi er kunsten å arrangere bokstaver og tekst på en måte som gjør kopien leselig, klar og visuelt tiltalende for leseren. Typografi innebærer skriftstil, utseende og struktur, som tar sikte på å fremkalle visse følelser og formidle bestemte meldinger. Kort sagt, typografi er det som bringer teksten til liv.I videoen nedenfor løfter Careerfoundry UI design mentor Olga lokket på hvorfor typografi betyr noe-og hvilken forskjell det gjør for brukerne dine.
Typografi kan dateres tilbake til det 11. århundre, under innovasjon av bevegelig type. Før den digitale tidsalderen var typografi et spesialisert håndverk knyttet til bøker og magasiner, og til slutt offentlige arbeider. Det første eksempelet på typografi kan sees I Gutenberg Bibelen, som kick-startet en typografi revolusjon i vesten. Fun fact: stilen av typen som brukes I Gutenberg Bibelen er nå kjent Som Textura, og du finner den i font rullegardinmenyen på store desktop-applikasjoner i dag!
Spol frem til moderne tid, hvor typografi er mest knyttet til både den digitale verden og print. Med fødselen av internett kom en kreativ eksplosjon av typografiens kunst. Plutselig hadde webdesignere en overflod av skrifter og typealternativer til rådighet, noe som gjorde typografi mer visuelt mangfoldig enn noen gang før.
hvorfor er typografi viktig?
Typografi er så mye mer enn bare å velge vakre skrifter: Det er en viktig del av brukergrensesnittdesign. God typografi vil etablere et sterkt visuelt hierarki, gi en grafisk balanse til nettstedet og sette produktets generelle tone. Typografi skal veilede og informere brukerne, optimalisere lesbarhet og tilgjengelighet, og sikre en utmerket brukeropplevelse.
La oss dykke litt dypere inn i hvorfor typografi er så viktig.
Typografi bygger merkevaregjenkjenning
ikke bare vil god typografi forbedre nettstedets personlighet, men brukerne dine vil subliminalt begynne å knytte skrifttypen som er omtalt på nettstedet ditt med merkevaren din. Unik, konsekvent typografi vil hjelpe deg å etablere en sterk bruker følgende, bygge tillit med brukerne, og bidra til å bære merkevaren fremover.
Typografi påvirker beslutningstaking
Typografi har en dyp effekt på måten brukerne fordøyer og oppfatter informasjonen som formidles av teksten. Iøynefallende typen er mye mer overbevisende enn svake fonter som ikke forsterke meldingen av teksten.
Typografi holder oppmerksomheten til leserne
God typografi kan være forskjellen mellom noen som bor på nettstedet ditt i ett minutt eller en halv time. Det er viktig at nettstedet ditt er visuelt stimulerende og minneverdig, og typografi spiller en stor rolle i denne prosessen.
de ulike elementene i typografi
for å komme i gang i typografi, må du først få tak i de åtte viktige typografiske designelementer.
Fonter og Skrifttyper
det er litt forvirring rundt forskjellen mellom skrifttyper og skrifter, med mange som behandler de to som synonymt. En skrifttype er en designstil som består av et mylder av tegn av varierende størrelser og vekt, mens en skrift er en grafisk representasjon av teksttegn. Enkelt sagt, er en skrifttype en familie av relaterte skrifter, mens skrifter refererer til vekter, bredder og stiler som utgjør en skrifttype.
det finnes tre grunnleggende typer skrifttyper: serif, sans-serif og dekorative. For å holde grensesnittet ryddig og strømlinjeformet, vil en god designer aldri bruke mer enn tre fonter—og holde dekorative fonter til et minimum. DE FLESTE UI-designere vil koble serif-skrifter med sans-serif-skrifter, for eksempel å sette hovedteksttekst i en serif-skrift og sette tittelen i en sans-serif-skrift, eller omvendt.
Contrast
mye som hierarki, kontrast bidrar til å formidle hvilke ideer eller melding du vil fremheve til leserne. Tilbringe litt tid på kontrast gjør teksten interessant, menings, og iøynefallende. De fleste designere skaper kontrast ved å spille rundt med varierende skrifttyper, farger, stiler og størrelser for å skape innvirkning og bryte opp siden.
Konsistens
Å Holde skrifttypene konsistente er nøkkelen til å unngå et forvirrende og rotete grensesnitt. Når du formidler informasjon, er det viktig å holde seg til samme skriftstil, slik at leserne umiddelbart forstår hva de leser, og begynner å legge merke til et mønster. Selv om det er ok å leke seg med nivåer av hierarki til en viss grad, er det god praksis å etablere et konsekvent hierarki av skrifttyper (en konsekvent skrift for overskrifter, en annen for underoverskrifter) og hold deg til den.
mellomrom
ofte referert til som ‘negativ plass’, mellomrom er plassen rundt tekst eller grafikk. Det er ofte oversett og har en tendens til å gå ubemerket av brukeren, men riktig bruk av mellomrom sikrer grensesnittet er ryddig og teksten er lesbar. Hvit plass kan også trekke oppmerksomhet til teksten og gir en samlet estetisk tiltalende opplevelse. Mellomrom tar ofte form av marger, polstring eller bare områder uten tekst eller grafikk.
Justering
Justering er prosessen med å forene og komponere tekst, grafikk og bilder for å sikre at det er lik plass, størrelse og avstander mellom hvert element. MANGE UI-designere lager marginer for å sikre at deres logo, topptekst og teksttekst er justert med hverandre. Når du justerer brukergrensesnittet, er det lurt å være oppmerksom på industristandarder. For eksempel vil justere teksten til høyre virke counterintuitive for lesere som leser venstre til høyre.
Farge
Farge er en av de mest spennende elementene i typografi. Det er her designere virkelig kan bli kreative og heve grensesnittet til et nytt nivå. Tekstfarge, derimot, er ikke å bli tatt lett: spikring av skriftfargen kan få teksten til å skille seg ut og formidle tonen i meldingen – men å få det galt kan resultere i et rotete grensesnitt og tekst som kolliderer med nettstedfargene.
Farge har tre hovedkomponenter: verdi, fargetone og metning. En god designer vil vite hvordan å balansere disse tre komponentene for å gjøre teksten både iøynefallende og tydelig leselig, selv for de med synshemming. Ofte vil designere teste dette ved å se teksten i gråtoner (uten farge) og gjøre tweaks hvis teksten er for mørk eller for lys mot bakgrunnsfargen.
Hierarki
Etablering av hierarki er et av de mest vitale prinsippene for typografi. Typografisk hierarki tar sikte på å skape et klart skille mellom fremtredende kopier som bør legges merke til og leses først, og standard tekstkopi. I en alder av korte oppmerksomhetsspenn forårsaket av sosiale medier, oppfordres designere til å være konsise og lage skrifttyper som tillater brukere å konsumere den nødvendige informasjonen på kort tid.
Hierarki kan opprettes ved hjelp av dimensjonering, farge, kontrast og justering. Hvis du for eksempel har en linje med kopi med et utropstegn-ikon i begynnelsen som er i rødt og større enn forrige kopi, er dette en visuell ledetråd til leserne at det er en oppfordring til handling. Det mest typiske eksempelet på typografisk hierarki er størrelse: overskrifter bør alltid være større enn underoverskrifter og standardtekst.
hvordan velger du riktig skrifttype for nettstedet ditt?
nå som vi har gjort oss kjent med de forskjellige typografielementene, la oss snakke om prosessen med å velge skrifttyper for grensesnittet ditt. Med så mange forskjellige skrifttyper og skrifttyper å velge mellom, er det lett å føle seg overveldet. Å gjøre det riktige valget avhenger av så mye mer enn bare å se hva som ser fint ut. Her er noen viktige hensyn:
Tenk på personlighet
Hvordan vil du at brukerne skal føle når de først går inn på nettstedet ditt. Ønsker du å etterligne en vennlig atmosfære? Ønsker du området for å føle high-end, innbydende, leken, eller alvorlig? Det er viktig at typografien gjenspeiler personligheten til merkevaren eller produktet. Et godt utgangspunkt når du står overfor denne utfordringen, er å definere kjerneegenskapene til merkevaren din, og begynne å samle skrifttyper som gjenspeiler disse egenskapene. Derfra kan du begynne å legge merke til en trend.
Reflektere over tone
det er like viktig å vurdere hvordan skriften harmoniserer med tonen i meldingen. Hvis du for eksempel vil formidle seriøs eller viktig informasjon, velger du en mindre stilisert eller dekorativ skrift som både er tydelig leselig og vil begrense distraksjon.
ikke skimp på funksjonen
Funksjonen er like viktig som form: det er ingenting verre enn et nettsted som ser pent ut, men er helt uleselig, noe som fører deg til å klikke på feil knapp eller ta feil sving fordi instruksjonene var uklare. Når du bestemmer hvilke skrifttyper som skal inkluderes i grensesnittet, må du sette stilen, estetikken og stemmen til side og reflektere over om skriften er lesbar, lesbar og tilgjengelig. Kan teksten være leselig uten belastning? Er karakterene tydelige nok?
Vurder ytelse
en ting som mange designere ofte overser, er å velge skrifttyper som er nettleservennlige. Vanlige skriftbiblioteker som Google fonts tilbyr nettbaserte skriftfiler som kan gjengis perfekt i en nettleser uten problemer. Pro tips: når du laster ned web fonts, aldri laste ned flere tegnsett enn du må. På denne måten unngår du overvekt!
Bli inspirert
hvis du ikke er sikker på hvor du skal begynne, ta litt tid å se hva andre mennesker gjør. Åpne øynene for typografien du ser rundt deg. Kan du legge merke til lignende mønstre? Kan du se gode og dårlige eksempler på typografi? Selv etter typografi hashtags på sosiale medier eller ser opp typografi På Pinterest vil gi deg noen gode ideer om hva som er der ute. Du kan også se på disse åtte typografi trender for ytterligere inspirasjon.
Ta litt tid å teste
Den beste måten å dechiffrere hvilken skrift som skal brukes til grensesnittet ditt? Test, test og test! Ved å samle nyttig tilbakemelding fra virkelige brukere, får du et klarere innblikk i hva som fungerer, hva som ikke gjør det, hva som er leselig og hva som føles counterintuitive eller clunky.
Konklusjon
Typografi blir ofte oversett, men Det er en viktig komponent i brukergrensesnittdesign. Mastering typografi vil se deg godt på vei til å bli en fantastisk UI designer! Hvis du ikke er sikker på hvor du skal begynne, hvorfor ikke gå til favorittnettstedene dine og begynn å notere hvilke skrifttyper de har gått for.
Lyst til å lære mer OM UI design? Sjekk ut disse relaterte blogginnlegg:
- 10 eksempler på vakre blogger som har spikret sin UI design
- 32 brukergrensesnitt elementer FOR UI designere: din ultimate ordliste
- slik designer du et ikon fra bunnen av: en trinnvis veiledning