Når en bruker besøker nettstedet ditt, er typografi det første de legger merke til. Det skaper en brukeropplevelse selv før de har lest et eneste ord av innholdet som nettstedet ditt tilbyr.

Typografi har potensial til å gå utover bare å fortelle en historie. Den viser hvem som står bak nettstedet og hva de tilbyr. Tenk på nettstedstypografi på samme måte som du ville ha tonefallet ditt under en tale, den brukes til å skape en atmosfære som fremkaller en emosjonell respons fra publikum.

Å bruke forskjellige fonter og skrivestiler på nettstedet ditt er en fin måte å forbedre den visuelle appellen på, mens dårlig typografi gir besøkende ingen insentiv til å bli, fordi det ikke er noe interessant å fange og holde på oppmerksomheten deres. Med riktig typografi på plass kan du gjøre brukeropplevelsen enkel, sømløs og til slutt morsommere!

I hovedsak er typografi bare et sett med regler for tilsynelatende enkle ting – bokstavavstand, capshøyde, slagformer og andre slike mindre detaljer. Men måten den samhandler, oppfører seg og ser ut med andre elementer, gjør en nettside forskjellig fra en annen. Det skaper et varig inntrykk og hindrer leseren i å sprette til andre nettsteder.

Når du skriver et nytt innhold, må du bruke en skrifttype som er enkel å lese på alle enheter. Hvis typografien er for enkel, kan selv det mest spennende innholdet ende opp med å se kjedelig og monotont ut.

La oss være ærlige. Vi lever i en tid der nesten alle topplagsnettsteder tilbyr dynamiske elementer og optimalisert navigasjon. Med det i tankene, vil noe så uvesentlig som linjestil-typografi virkelig gjøre en forskjell for publikum.

Sannheten er at i dyktige hender kan linjetypografi gi en dristig uttalelse om merkevaren din og til og med fungere som en hjørnestein for din online tilstedeværelse.

Her er noen eksempler for å bevise poenget vårt.

Alphaputt

Ta en titt på nettstedet til Alphaputt. Den har et helteområde med trendy utseende som inneholder sære animasjoner. Ut i fra ser det ut til at teamet til Alphaputt virkelig har tenkt gjennom UXen sin. Animasjonen tar kun opp en liten del av skjermen. Alt annet er statisk og rent. Resultatet er en sikker bakgrunn for disposisjonstypografien.

Toonami

Toonami Adult Swim-nettstedet er et annet godt eksempel på hvorfor linjestiltypografi er et godt valg. Nettdesignet har en fantastisk kosmisk stemning. Det er grunne bokser, et rutenett og omrissede sirkler. Det er hule bokstaver som er tekniske og raffinerte. De er vakkert blandet med hele webdesignet. Valgene er veldig gjennomtenkte siden ingenting annet ville ha gått så perfekt som denne typografien.

1MD

1MD er et godt eksempel på hvordan god typografi kan gjøre en forskjell for å få oppmerksomheten til nettstedets besøkende nesten umiddelbart. Nettstedet bruker enorm hvit typografi med en lysbildefremvisning av ulike animasjoner som holder publikum klistret til skjermene sine. Resultatet er umiddelbar oppmerksomhet fra besøkende på nettstedet.

Yukie Nail New York

Yukie Nail New Yorks webdesign bruker også utmerket typografi. Helteområdet på nettstedet er et iøynefallende lerret med en flytende effekt. En krusning forstyrrer hele overflaten med hver bevegelse av musen over dette lerretet. Selv om den hule skrifttypen som brukes på nettstedet smelter litt sammen med bakgrunnen, passer den fortsatt perfekt med den feminine atmosfæren på nettstedet.

Marie Guillaumet

Nettstedet bruker en håndskrevet skrifttype som stemmer overens med tjenestene de tilbyr. Det gir en følelse av personalisering til porteføljen som får en til å tro at designeren er fysisk involvert i produksjonsprosessen. Det er en atmosfære av unikhet og individualitet på denne nettsiden, som er perfekt illustrert i de håndtegnede ikonene som passer perfekt sammen med den håndskrevne skrifttypen, og gir karakter til nettstedets generelle utseende.

Lykke

Et annet godt eksempel på linjetypografi med et snev av retrostil er nettstedet Good Fortune. Det er en sjenerøs mengde hvitt mellomrom, takket være det monokrome lerretet. Den grasiøse skrifttypen er nok til å trekke oppmerksomheten til de besøkende. Sluttresultatet er et rent og stilig utseende som virkelig kommer over USP-ene til merket.

De beste fremgangsmåtene for å bruke typografi i webdesignet ditt

1 Hold det enkelt

Selv om det er viktig å jobbe med netttypografien din, vil du ikke overdrive det. Lesbarhet er nøkkelen, og du bør ikke komplisere fonten og stilene du bruker til et punkt hvor det blir umulig for leserne å finne ut hva som er skrevet.

Enkelhet øker ikke bare den visuelle appellen til nettstedet, men det øker også lesbarheten til innholdet ditt. Å bruke et minimum antall fonter og holde seg konsistent med dem på nettstedet etablerer også en følelse av profesjonalitet og struktur i innholdet ditt.

Å prøve for hardt vil bare få innholdet til å se ut som et usynlig rot som brukerne ikke synes er interessant eller spennende. Derfor er det best å holde det så enkelt som mulig samtidig som du husker på lesbarheten og strukturen til nettstedet ditt. Velg fonter som vises godt og er lesbare på målenhetene. Arbeid med typografi, men ikke overdriv.

2 Unngå lange setninger

Brukere vil forstå meldingen din med letthet hvis du inkluderer et færre antall tegn per linje.

Jo kortere lengde på setningene er, jo bedre lesbarhet. Ikke gjør typografien din for smal eller for bred. Prøv å begrense utvalget av tegn per linje til omtrent 50-60. Vurder å fikse oppsettets bredde for å få en optimal linjelengde for å forbedre innvirkningen på publikum.

3 Par skriftene med de riktige kampene

Systemfonter er et trygt valg når det kommer til webdesign, de kompliserer ikke nettstedets layout og er generelt lettere å lese og forstå.

Men hvis du ønsker å forbedre effekten av disse skriftene i tekstverktøyet, er det best å velge og matche dem i par. Dette vil gi deg en flott blanding ettersom noen av disse fontene fungerer best når de er sammenkoblet med andre fonter. Velg og match dem dyktig for å få maksimal oppmerksomhet fra publikum.

4 Bruk hvite mellomrom riktig

Å bruke de hvite mellomrommene mellom tekstlinjene bør gjøres smart. Disse hvite områdene forbedrer ikke bare lesbarheten til teksten, men øker også visuell appell og synlighet. De bidrar også til å forhindre at nettstedet virker for rotete. Sørg for å bruke riktig linjehøyde når det kommer til nettstedet ditt for å forbedre typografien og dermed innvirkningen den har på de besøkende.

5 Fargekontrast

Selv om fargekontrast kan virke som et elementært konsept når det kommer til webdesign, har mange fortsatt en tendens til å overse det. Dette prinsippet er spesielt viktig når det er på tide å velge fargene for din generelle design og typografi.

En vanlig feil som mange webdesignere gjør, er å sette svart tekst på en helt hvit bakgrunn. Dette skaper så mye kontrast at det ikke appellerer til brukeren i det hele tatt. Hvis du tar en rask titt på ulike nettsider, vil du finne ut at teksten på hvit bakgrunn egentlig ikke er svart. Faktisk, for å holde kontrasten nede og gjøre teksten lett å lese, bruker de grå farget tekst.

Du kan ikke oppnå den perfekte kontrasten bare ved å finne to svært forskjellige farger. Bare fordi disse er forskjellige farger betyr ikke det at de vil fungere bra sammen. Hvis du ikke er sikker på hvordan du velger de riktige fargene, bør du vurdere å konvertere den til gråskala. Dette lar deg se verdien av farger, som er viktigere enn å velge to kontrastfarger.

6 Kerning

Prosessen med å justere mellomrom mellom hvert tegn kalles kerning. Målet med kerning er å oppnå et symmetrisk og balansert utseende, da det hjelper til med å utjevne utseendet av mellomrom mellom hver bokstav. Selv om det ikke er veldig viktig i avsnitt, må du være oppmerksom på den store typen og overskriftene. Kerning er et viktig verktøy for å unngå eventuelle linjebrudd i designet. Selv om kerning generelt er nærmere knyttet til trykkdesign, blir det nå stadig viktigere også for webdesign.

7 Sans Serif vs. Serif

Det er en pågående debatt om hvilke fonter som er mer lesbare, serif eller sans serif. Når du jobber med webdesign av noe slag, er det generelt enighet om at sans serif-fonter er mye lettere å lese på skjermen sammenlignet med serif-fonter. Når du arbeider med skrifttypen til nettstedet ditt, bruk sans serif-fonter for mesteparten av teksten og bruk serif-fonter for små deler av nettkopien, overskrifter og titler.

8 Målgruppen din

Typografien din bør også avhenge av publikummet ditt. Det er viktig at nettstedet ditt passer godt med målgruppen din. Sørg for at du forstår sluttbrukeren og ha deres forventninger og behov i tankene når du lager den typografiske utformingen av nettstedet ditt.

Tenk på aldersgruppen til målgruppen. Hva liker og misliker de? Hva er deres preferanser?

Svar på disse spørsmålene vil hjelpe deg med å designe nettstedet ditt i henhold til forventningene til målgruppen din. Det vil også hjelpe deg å velge de riktige typografielementene for publikum.

9 Hierarki

Typografisk hierarki etableres ofte ved å bruke

, etc., tagger. Det er ikke bare relatert til størrelsen på teksten, men det bestemmer også prominensen til det ene typografiske elementet i forhold til det andre. Det kan bestemmes ved å bruke kontrastfargene, størrelsen, hvitrommet og forskjellige skrifttyper. Hvis du ønsker å få det perfekte hierarkiet for nettstedet ditt, start med skissen av layouten din. De viktigste visuelle elementene skal være øverst og de minst viktige skal være nederst. De viktigste elementene i typografien din trenger ikke å være større i størrelse. De bør ha maksimal prominens sammenlignet med de andre elementene. For å forstå viktigheten av hvert element, spør deg selv hva du vil at publikum skal lese først. Dette elementet trenger ikke nødvendigvis å være på toppen av nettoppsettet ditt, men det bør være fokuspunktet.

10 All Caps-tekster

Å bruke tekster med store bokstaver får leseren til å føle at du skriker budskapet ditt til dem. Husk at du ikke vil påtvinge leserne innholdet ditt. Hvis de får en følelse av at du presser markedsføringsmateriell til dem, vil de bli skremt av nettstedet ditt før du er i stand til å formidle kjernen i budskapet ditt til dem.

Hvis du er opptatt av å bruke alle capser, sørg for at du bare gjør det når det virkelig er nødvendig, og som nevnt ovenfor, husk publikums hensikter.

Oppsummerer det

Hvis du ønsker å realisere målene med webdesignet ditt, må du sørge for at nettsidens typografi er polert og leselig. Det skal være behagelig for øyet, ikke distraherende. Ikke vær redd for å være kreativ. Gå tålmodig gjennom de ulike skriftsamlingene og ta deg tid til å finne ut hva som fungerer best for deg. Selv om det ikke er noen enkelt formel som kan hjelpe deg med å oppnå den perfekte webdesigntypografien, vil du kunne øke ferdighetene dine med nok trening.

Opptakskilde: instantshift.com