Slik velger du den beste fonten for nettstedet ditt

Å velge riktig font for nettstedet ditt er ikke en så enkel oppgave som det kan virke ved første øyekast.

Velge noen få fonter som du synes ser fine ut og bare kaste dem på nettstedet ditt? Ikke så raskt.

Slett ikke alle fonter egner seg for nettsteder. Og det handler ikke bare om det visuelle aspektet: å bruke fonter tilfeldig kan også føre til tekniske problemer (mer om dette senere).

Etter å ha utviklet over 30 nettsteder, har jeg fått en ganske god forståelse av hva som kreves for å velge fonter for et nettsted. I denne korte artikkelen kan du lese alt du trenger å vite.

7 tips for å velge en font for nettstedet ditt

Dette er mine viktigste tips for å velge fonter for nettstedet ditt.

1. Lesbarhet fremfor alt

Dette kan virke som en selvfølge. Men du vil bli overrasket over hvor mange nettsteder det er med fonter som ikke er så enkle å lese.

Kreative, svingete fonter kan gi nettstedet ditt en unik karakter. Men når lesbarheten står på spill, er det lurt å velge noe mindre eventyrlysten.

Sørg også for at fonten din er minst 16 piksler stor (18 piksler, eller enda mer, pleier ofte å fungere bedre).

Og at fonten er lesbar på hver skjermstørrelse (sjekk også nettsiden din på telefonen din) er også svært viktig.

2. Velg ikke mer enn to fonter

Å velge mer enn to fonter gir noen problemer:

• Nettstedet ditt begynner å se rotete ut
• Du vil merke en negativ innvirkning på lastetiden til nettstedet ditt

Velg en font for titlene dine, og velg en for “body”-teksten (som brukes i avsnittene dine, osv.).

På mange av nettstedene mine bruker jeg kun én enkelt font. Hovedsakelig velger jeg dette på grunn av lastetid. Et ekstra font vil ikke ha en merkbar innvirkning på nettstedshastigheten, men for en hastighetsfanatiker som meg teller hvert millisekund.

3. Velg en font som passer til ditt merke

Er merkevaren din:

• Moderne og minimalistisk? Velg da en sans-serif font (for eksempel Lato, Open Sans).
• Elegant og profesjonell? Da passer serif bedre (for eksempel Merriweather, Playfair Display).
• Kreativ og lett? Display eller skriptfonter kan fungere (men som nevnt ovenfor, hold øye med lesbarheten!).

Du forventer en annen font på et yoga-nettsted enn på en advokatfirmas nettside.  

4. Skap kontrast ved å kombinere fonter

Her er et eksempel på et nettsted jeg administrerer hvor jeg har valgt to fonter som kontrasterer sterkt med hverandre:

PT Serif for body, og Montserrat for titler.

Kontraststilen mellom disse fontene fungerer veldig bra. Når du velger to fonter, ønsker du ikke at de skal ligne for mye på hverandre.

Senere i denne artikkelen vil du finne flere eksempler på fonter som fungerer godt sammen.

EKSTRA TIPS: Hver profesjonelt designet nettside har en fast proporsjon når det gjelder de forskjellige overskriftene (H1, H2, H3, osv.) og standardteksten. Velg størrelsen på dine forskjellige teksttyper basert på hva som «føles riktig». Et verktøy som Typescale kan sørge for at størrelsen på teksttypene dine er godt koordinert i forhold til hverandre.

5. Se fonten din i forskjellige nettlesere og på forskjellige enheter

Noen ganger fungerer en font ikke godt på en bestemt nettleser eller enhet. Derfor er det viktig å teste dette godt.

6. Vær oppmerksom på ytelse

Bruk såkalte web safe fonter eller fonter som er optimalisert for raske lastetider.

Både Google Fonts og Adobe Fonts tilbyr gratis fonter optimalisert for nettsteder (du kan lese mer om Google Fonts nedenfor).

7. Tenk på tilgjengelighet

Tilgang til det første punktet: Internett brukes også av synshemmede og eldre.

Spesielt for disse gruppene er tilgjengelighet av nettstedet ditt svært viktig.

Sørg for at fargen på fonten din står i sterk kontrast til bakgrunnen på siden din. Og sørg for at teksten din ikke blir for tynn eller svingete.

Mitt råd: bruk Google Fonts

Som nettstedseier vil jeg, hvis det er mulig, alltid bruke Google Fonts. Dette er hvorfor:

• Utvalget er enormt. Med mer enn 1.000 fonter, bør du kunne finne en passende font for hvert prosjekt.
• Fungerer godt på alle nettlesere og enheter. Google-fontene er web-safe, så du trenger ikke bekymre deg for at de vil se dårlige ut i en bestemt nettleser eller gadget.
• Raske lastetider. Google Fonts er hostet på Googles superraske servere.
• Enkelt å integrere. Google tilbyr lettfattelige instruksjoner som gjør det enkelt å få fontene deres til å fungere på nettstedet ditt.
• Det er gratis. Du har ingen lisenskostnader slik du har med noen andre fonter.

Bruker du WordPress? Da har du flaks. Mange populære WordPress-temaer som Kadence og GeneratePress har en Google Fonts-integrasjon.

Selv bruker jeg Google Fonts på alle mine nettsteder.

Finne ut hva slags font et nettsted bruker

Har du kommet over et nettsted som bruker en font du liker? Dette er hvordan du kan sjekke hvilken font som brukes (i Chrome).

Merk teksten, høyreklikk og velg «Inspiser». Rull nedover i skjermen som vises nå i delen Styles, og du vil til slutt finne ut hvilken font som brukes.

Eksempler på fonter som passer godt sammen

Hvis du ønsker å bruke flere fonter, kan du prøve et av parene nedenfor.

Via Google Fonts kan du sette sammen enda flere skrifttypepar.