Ultimate Guide to Web Typography: Regler, ordliste, ideer og beste praksis

‘Et bilde er verdt tusen ord.’

Oftest formidler bilder det de har å si. Imidlertid gir et bilde med tekst en sterkere innvirkning.

Typografi fungerer som en følgesvenn til grafikken din. Typografi er ikke bare å velge en tilfeldig skrifttype og en punktstørrelse fra rullegardinmenyen til redigeringsprogramvaren. Det er et spesialfelt innen grafisk design. Det er kunsten og teknikken for å arrangere type. Det er en av de viktige ferdighetene som kan skille deg fra resten av designerne hvis du vet hvordan du bruker den.

Hva er typografi?

Før du går inn i kunsten og teknikken for typografi, må du først forstå hva typografi handler om. Typografi er det visuelle stykke tekst (skrevet ord). En tekst er en rekke ord. Hver eneste visuelt viste tekst du ser er i utgangspunktet typografi. Tekst kan kategoriseres på tre måter – visuelt, hørbart og digitalt.

Typografi er mer enn utforming av bokstaver og tegn. Den inkluderer valg av punktstørrelse, avstand og linjelengde. Tilbake på den tiden da Johannes Gutenberg introduserte trykkpressen, måtte settere ordne bokstaver og tegn i det fysiske rommet. Nå i datamaskinens tidsalder er denne jobben mye enklere. Du trenger bare å finne åpen kildekode-fonter, ordne bokstaver og tegn, så er du ferdig.

Viktigheten av typografi

Typografi er noe du finner absolutt overalt. Si at det kan være smarttelefonen, kaffekoppen, reklametavlen, kluter og mye mer. Typografi er overalt. Valget av skrifttype, bokstav og tegnarrangement avgjør hvordan budskapet ditt skal formidles.

Selv om det virker som en liten faktor i ditt syn, er det absolutt ikke det. Selv en enkelt type justering kan endre hele utseendet og følelsen til kunstverket ditt. Hvis du noen gang har lagt merke til at Facebook testet en ny font kalt Geneva tilbake i juni 2016. Det var litt tynnere og lettere versjon av den originale Helvetica-fonten. Men forskjellen mellom disse to fontene var merkbar.

Regler for typografi

I typografi må du velge skrifttype i henhold til layout, rutenett, designtema, fargevalg og så videre. Her er noen typografiregler du bør huske på mens du jobber.

Velge riktig font

Hvis du bruker noen minutter på internett, vil du finne en forbløffende rekke klare til bruk gratis så vel som betalte skrifter. Men det betyr ikke at du må bruke timer på å søke etter de nøyaktige skriftene du visualiserer i tankene dine. Du kan begynne å male selv med en begrenset palett. Det er noen få prøvde og testede fonter som Helvetica som aldri kan gå galt i noe prosjekt.

En skrifttype er en form for design som er formet av håndverkere som bidrar med all sin innsats og ferdigheter over en betydelig periode. De profesjonelt utformede skriftene tilbyr en rekke tilpasninger når det gjelder vekter og stiler for å skape en komplett familie. Dessuten tilbyr de betydelige kerning-par, støtte for flerspråklig tilpasning av typeinnstilling.

Følgende er de viktigste typografiske termene som vurderes:

Størrelse

Ikke alle skrifttyper er skapt like. Noen bruker fett og brede aspekter mens andre er tynne og smale. Ulike typer skrifttyper kan få ulik plass på siden.

Høyden på karakteren er betegnet som X-høyde. Når du parer forskjellige skrifttyper, er det en god praksis å bare bruke de skrifttypene som har samme x-høyde. På den annen side kalles bredden på tegnet som ‘sett bredde’, som bestemmer hvor mye plass bokstaven skal ta og buffer med andre bokstaver.

Punktsystem er metoden som har vært brukt for å måle type siden 1700-tallet. Et punkt kan måles som 1/72-tommer og 12 punkter kan danne en pica. Pica er enheten for å måle kolonnebredden. Videre kan størrelsene måles i piksler, tommer eller millimeter. Det avhenger av prosjektets krav.

Ledende

Det vertikale rommet mellom hver type linje er kjent som ledende. Grunnen til å kalle dette som ledende er fordi blyslippene ble brukt til å dele tekstlinjene tilbake i tiden da metallsetting ble brukt. Tommelfingerregelen for å få en lesbar brødtekst er å bruke en innledende verdi høyere enn skriftstørrelsen. Du kan bruke en ledende verdi høyere i 1,25 til 1,5 ganger.

Sporing og kerning

Kerning er handlingen som involverer justeringer av rommet mellom karakterene. Det hjelper å generere en harmonisk sammenkobling.

For eksempel – når du bruker en stor bokstav av bokstaven ‘A’ med stor bokstav i bokstaven ‘V’, blir de diagonale strekene øverst til venstre på bokstaven ‘V’ kjernet med den nederste høyre delen av ‘A’.

På den annen side er sporing begrepet som gjelder avstanden mellom alle tegn som brukes jevnt. Kerning ligner spor, men begge er ikke like.

Måle

Mål er et begrep som forklarer bredden på en tekstblokk. For en optimal leseopplevelse bør du vurdere tiltaket som et viktig aspekt ved typografi.

Hierarki og skala

Alle typer kan ikke brukes i samme størrelse, du må angi hierarki for typer. Ellers vil det være vanskelig for leserne å forstå hvilken informasjon som er viktigst enn de andre.

Generelt er overskrifter store, underoverskrifter er mindre, og kroppstype er litt mindre enn underoverskrifter for å hjelpe leserne med å forstå hierarkiet.

Ikke bare størrelse, bruk av forskjellige farger, vekt og avstand kan også hjelpe deg med å sette hierarki i arbeidet ditt.

Ordliste

Vi har dekket nesten alle grunnleggende konsepter og terminologier som involverer i typografi her.

• Aesc: Det uttales som ‘Aske’. Det er en ligatur av to bokstaver, dvs. ‘a’ og ‘e’. Opprinnelsen til aesc er fra gammelengelsk hvor det er betegnet som en diftongvokal. Aesc har migrert til alfabeter som islandsk og dansk.
• Blenderåpning: Blenderåpningen er en sammenknyttet åpning av en glyph som kan sees med bokstaver som «e», størrelsen på blenderåpningen varierer i henhold til implementeringen. Men ettersom du vil variere blenderåpningen, vil effekten gjenspeiles i lesbarheten til en bokstavform.
• Apex: Apex er punktet som er på toppen av et tegn. Det er stedet der venstre og høyre strøk møtes.
• Grunnlinje: Det er en seksjon der bunnen av de store bokstavene sitter.
• Skål: Skål regnes som de innesluttede delene av bokstaver som ‘b’ og ‘p’.
• Brakett: Det er en kilelignende kontur som er verdifull for å holde en serif og danne stammen til en font i en rekke skrifttyper.
• Cap-høyde: Cap-høyden er høyden til en stor bokstav over grunnlinjen.
• Teller: Telleren er vedlagt eller ufullstendig vedlagt en del av en bokstavform. Telleren kan sees med bokstaver som ‘c’ eller den nedre delen av ‘g’ og ‘e’. Denne delen kan blandes med bollen.
• Descender: Det er en del av bokstavformen som går under grunnlinjen. For eksempel bokstaver som ‘p’, ‘y’ og ‘q’.
• Øre: Øret er et lite slag som utvides fra øvre høyre side av bollen.
• Glyf: Det er en entallsdel som konstruerer en font. Enhver form for entallsdel som hjelper til med å konstruere en font, enten det er et skilletegn, tall, bokstav eller til og med dingbat er inkludert i den. Glyfer kan kalles som byggesteinene i typografi.
• Takrenne: Det er plassen mellom de motstående sidene i arbeidet ditt. Takrenner kan ofte sees i kolonner med tekst.
• Foreldreløs: Foreldreløs er den første linjen i et nytt avsnitt som er trådt på slutten av en side. Det er ikke noe du ønsker å ha i prosjektet ditt, da det anses som en dårlig praksis.
• Pica: Pica er enheten for å måle kolonnebredden. Det er 16 piksler eller 12 punkter i ett bilde.
• Lesbarhet: Det blir referert til som den enkle lesingen som inkluderer bruk av en tekstblokk som enkelt kan skannes med øyet.
• Serif: Det er et skriftsnitt med seriffer. Slutten av streken til en bokstavform i denne skrifttypen er avledet fra romersk tendens.
• Sans-serif: Et skriftsnitt uten serif er en sans-serif eller sans serif.
• Ryggsøylen: Det er det store buede slaget som er tilstede i små bokstaver av stor ‘S’.
• Spur: Det er en liten bule som vises ved kurven til en bokstavform. Det kalles også som et skjegg eller et nebb. For eksempel – bokstaven ‘G’.
• Stengel: Et slag i full lengde kalles en stilk med oppreiste tegn. Den er vertikal.
• X-høyde: Høyden på ‘x’-bokstaven med små bokstaver i en gitt skrifttype er en x-høyde.

7 Typografiideer og beste praksis

Følgende er de beste typografipraksisene du kan bruke i arbeidet ditt. Bruk disse tipsene i prosjektene dine for å lage dine egne mesterverk.

Viktigheten av valg av riktige fonter

Hver designer har en liste over sine favorittfonter. Men det betyr ikke at du bare må velge en skrift fra favorittlisten din hele tiden. Hver eneste skrifttype har sin egen stil, personlighet og stemning. Så du må bestemme hvilken font som passer perfekt til designet ditt. Valget av skrifttype er viktig siden det hjelper deg med å formidle budskapet ditt til publikum.

Ha publikum i tankene

Etter å ha valgt en skrifttype som utfyller ideen om designet ditt, bør du tenke på om det passer for publikum. En gruppe av målgruppen din kan føle at skriftene dine er trendy, mens noen vil kalle dem utdaterte. Så du må forstå hvem du designer prosjektet for. Alder, kjønn, plassering og andre faktorer for publikum bør vurderes før du bestemmer deg for skrifttype.

Sett opp et hierarki

Som nevnt før, spiller hierarkiet en viktig rolle i typografi. Grafikken din skal være godt organisert og skal være lett å navigere for leserne. Typografihierarki er veldig nyttig for å lage teksttunge design som bøker, nyhetsbrev, magasiner og andre tradisjonelle trykte publikasjoner.

Vær oppmerksom på avstand og justering

Avstanden og justeringen høres kanskje mindre viktig ut, men det er det absolutt ikke. Uten riktig avstand og justering vil designene dine se forvirrende, rotete og vanlige ut. Avstand inkluderer bruk av innledning, marginer, sporing og mellomrom.

Bruk Kerning når du trenger det

Mange designere blir forvirret mellom sporing og kerning. Imidlertid er de begge forskjellige termer. Kerning lar deg få typografien din til å se profesjonell og polert ut.

Ikke overskrid bruken av skrifttyper, vekter og stiler

Vi liker alle å bruke forskjellige fonter og tilpasse dem til å se stilige ut. Imidlertid kan bruken av forskjellige skrifttyper i en enkelt design få arbeidet ditt til å se amatøraktig og rotete ut. Du bør unngå bruk av mer enn tre fonter i ett design for å gi det et profesjonelt utseende.

Observer og øv

Den som har prøvd og testet en måte å forbedre typografiferdighetene dine på er å studere hvordan andre designere bruker typografi i arbeidet sitt. Det er ferdighetene som krever øvelse og øye for detaljer for å forstå hvordan noen har brukt typografi i prosjektet sitt og hvordan vil du kunne bruke dem i prosjektene dine.

Dette var den ultimate guiden til typografi. Håper denne veiledningen har hjulpet deg med å forstå ulike konsepter og praksiser som du kan bruke til å forbedre typografiferdighetene dine.