Valg av farger og skrifttype til nettsiden

01Hvorfor er farger og skrifttyper så viktige?

Før besøkende rekker å lese teksten på en side, ser de fargene og formen på bokstavene. Det første inntrykket gir en rask vurdering av om bedriften virker seriøs, varm, nyskapende eller pålitelig.

Farger og typografi er ikke bare estetiske valg. De påvirker lesbarhet, tilgjengelighet og konvertering direkte. Blass grå tekst kan se elegant ut, men hvis den ikke kan leses, forlater besøkende siden. En knapp med utydelig farge gjør at den viktigste handlingen blir oversett.

Derfor er farge- og skrifttypevalg grunnbeslutninger som må tas før resten av nettsiden designes. De hører til de første stegene i UI/UX-design-prosessen.

02Bygg paletten ut fra merkevarefargene

Har du logo og trykt materiell, er det der fargepaletten tar utgangspunkt. En bedriftsnettside er merkevarens digitale ansikt. En merkevare som er marineblå på visittkortet, bør ikke være oransje på skjermen. Er visuell identitet ennå ikke på plass, er det tryggere å legge dette grunnlaget først gjennom merkevarebygging.

Merkevarefargene alene rekker sjelden til en nettpalett. I tillegg til en hovedfarge trenger du toner til bakgrunn, tekst, kantlinjer, advarsler og suksessmeldinger. En god fargepalett for webdesign består av disse lagene:

• Hovedfarge: Merkevarefargen, brukt i overskrifter, meny og fremhevede felt.
• Aksentfarge: En tone som harmonerer med hovedfargen, men skiller seg ut, til handlingsoppfordringer som knapper og lenker.
• Nøytrale toner: Fire–fem toner fra hvitt til mørk grå, til bakgrunn og tekst.
• Statusfarger: Rødt for feil, grønt for suksess og gult for advarsler, i skjemaer og varsler.

60-30-10-regelen

Denne praktiske regelen fra interiørarkitekturen fungerer også på nett: omtrent 60 prosent av flatene er nøytral bakgrunn, 30 prosent hovedfarge og sekundære felt, og 10 prosent aksentfarge. Forholdet er ikke et krav, men en balansehjelp som hindrer at fargene tar over siden.

Spar på aksentfargen

Brukes aksentfargen overalt, mister den verdien sin. Reserverer du fargen til hovedhandlinger som «Få tilbud» eller «Ring nå» og lar være å bruke den til dekor, leder du blikket til besøkende dit det skal.

03Kontrast og tilgjengelighet

Kontrast er det som oftest glemmes ved fargevalg. Ifølge WCAG-retningslinjene skal vanlig tekst ha et kontrastforhold på minst 4,5:1 mot bakgrunnen, og stor tekst minst 3:1. Hvit tekst på lys grå bunn eller lys tekst på pastellflater havner under denne grensen.

Kontroller kontrasten ved å måle, ikke ved å gjette. Utviklerverktøyene i nettleseren og gratis kontrastkontrollere viser forholdet mellom to farger med en gang. Gi heller ikke informasjon bare med farge: Vis en feil i et skjemafelt med en forklarende tekst, ikke bare en rød kantlinje.

04Hvor mye betyr fargepsykologi?

Det sies ofte at blått gir tillit, grønt minner om natur og rødt om energi. Slike assosiasjoner er utbredt kulturelt, men ingen universelle regler. Den samme fargen kan vekke helt ulike følelser i ulike bransjer og i ulike nyanser.

En mer pålitelig tilnærming er å se på hva som er vanlig i din bransje og skape en bevisst forskjell. Bruker alle konkurrentene marineblått, kan samme tone gjøre at du forsvinner i mengden, mens en helt uvanlig farge kan skape tillitsproblemer. Som regel gir det best balanse å knytte hovedfargen til merkevaren og aksentfargen til handlingen.

Å legge flere kandidatpaletter på samme utkast til forsiden og sammenligne dem side om side gir svar mye raskere enn abstrakte diskusjoner. Se på tre spørsmål i stedet for personlig smak: Minner fargen om merkevaren? Er teksten behagelig å lese? Og ser man hovedknappen med en gang? Er svaret ja på alle tre, gjør paletten jobben sin.

05Slik velger du skrifttype til nettsiden

Valg av skrifttype snakkes det mindre om enn farger, men det påvirker lesbarheten mer. Første regel er å begrense seg: én skrift til overskrifter og én til brødtekst, altså maks to familier. Ofte holder ulike tykkelser av én enkelt familie.

Støtte for æ, ø og å

For en norsk nettside må skrifttypen støtte æ, ø og å, med både store og små bokstaver, og gjerne aksenttegn som é. Støtter ikke fonten disse, vises tegnene med en annen skrift, og det blir synlige forskjeller midt i ordene. Test fonten med ord som Ålesund, Ørland og Ærøy før du bestemmer deg.

Serif eller sans-serif?

Skrifter med seriffer (serif) gir et klassisk og elegant inntrykk og fungerer godt i overskrifter. Skrifter uten seriffer (sans-serif) er klarere på skjerm, særlig i små størrelser, og er det vanligste valget til brødtekst. En serif-overskrift sammen med sans-serif-brødtekst er en vanlig og balansert kombinasjon.

06Målene for lesbar typografi

Selv en god skrifttype blir slitsom med feil mål. Disse verdiene er et solid utgangspunkt for typografi-innstillingene:

07La ikke skrifttypene gjøre siden treg

Hver skriftfil legger til lastetid på siden. Å laste fem ulike tykkelser og to familier forsinker første visning, særlig på mobilnett. Bruk skriftfilene i WOFF2-format, last bare tykkelsene du trenger, og begrens tegnsettet til latinske tegn med æ, ø og å, så blir filene merkbart mindre.

Innstillingen font-display brukes for at teksten ikke skal være usynlig til skriften er lastet. Slike innstillinger er blant de første tingene man ser på i arbeidet med hastighet og ytelse. Definerer du fargeverdiene som CSS-variabler, styrer du paletten ett sted og får det enklere med variasjoner som mørkt tema.

:root {
  --renk-ana: #1d3557;
  --renk-vurgu: #e76f51;
  --renk-metin: #1f2933;
  --renk-zemin: #ffffff;
}

@font-face {
  font-family: 'Brødtekst';
  src: url('/fontlar/govde.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

body {
  font-family: 'Brødtekst', system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--renk-metin);
  background: var(--renk-zemin);
}

08Test valget

Test farger og skrifttype med ekte innhold og på ekte enheter, ikke i en designfil. Å se på samme side på en telefon i sollys, på en gammel bærbar skjerm og på en bred skjerm avslører problemer som ikke synes på papiret.

Konsistens er like viktig som testing. Når paletten og skrifttypen først er valgt, må de brukes etter de samme reglene på alle sidene en nettside må ha. Ferdige maler begrenser ofte denne fleksibiliteten. Forskjellen har vi gått gjennom i artikkelen ferdig tema eller skreddersydd design. Se også stikkordet merkevareidentitet for flere artikler om temaet.