Bruk av ulike skrifttyper og fonter
Når du skal bestemme deg for en skrifttype å bruke på nettsiden din står du ovenfor et hav av valg. Fordi utvalget av skrifttyper er så stort kan det være vanskelig å navigere seg. For en stund tilbake publiserte vi et blogginnlegg om hva skrifttyper og fonter er, hva som kjennetegner de ulike og hvordan de kan styles. Er du usikker på hva som er forskjellen på sans-serif og serif vil jeg anbefale å sjekke ut det innlegget først.
Hvilken skriftgruppe?
Det viktigste å tenke på når du skal velge skrifttype er lesbarheten. Det er ikke noe vits i å formidle tekstlig innhold på en nettside hvis brukeren sliter med å lese hva du skriver. Jo mer lesbar tekst du har, jo lenger holder du brukeren. Det første du derfor må se etter er hvilken skriftgruppe som vil være mest lesbar.
Det finnes flere ulike skriftgrupper, der de vanligste er “Serif/Antikva” og “Sans-serif/Grotesk”. I tillegg brukes gjerne skriftgruppen “Monospace” til å illustrere kodesnutter og lignende i tekst, for å skille det fra øvrig innhold.
Ser man i bøker og aviser finner man gjerne skriftgruppen “Serif”. Det er fordi det er den mest lettleselige skrifttypen på trykk, og blir ansett som myk, på grunn av “føttene”. Derfor skulle man kanskje tro at det samme gjaldt på web? Slik er det ikke.
På web gjør “føttene” til serif-typer dem uklare å lese. Dette var et større problem før, for nå har nettlesere såkalt kantutjevning. Men har du store mengder med tekst og små bokstaver, vil det likevel ofte være litt tyngre å få med seg alt innholdet. Se bare på eksempelet under:
Det du derimot kan bruke serif-skrifter til på web er titler. Det er fint å bryte opp en tekst ved å bruke en helt annen, dekorativ skrifttype i titler. Titler er som regel korte og store, og har dermed ikke et like stort behov for å være veldig lesbare. Du får som regel med deg innholdet i dem uansett.
Det er anbefalt å velge skrifttyper fra to ulike skriftgrupper, dersom du skal bruke forskjellige. For eksempel Times New Roman som tittel-skrift og Verdana som brødtekstskrift:
Skriftstørrelse og lesbarhet
Når det kommer til lesbar skriftstørrelse er alt over 12px ansett som leselig. Du burde likevel se an skrifttypen og bredden på det tekstlige innholdet. Her er kravet for universell utforming bare at teksten skal kunne justeres 200% opp uten at det blir tap av hverken innhold eller funksjon.
Men selv om loven tillater det meste av tekststørrelse er det likevel noen generelle regler du burde forholde deg til. Formålet er å holde på en bruker, uten at den personen er nødt til å justere opp teksten for å få utbytte av det du har skrevet.
Linjelengde / spaltebredde
På en datamaskin eller tablet burde du holde deg til 10-15 ord, eller 65-70 tegn, per linje for best lesbarhet. Grunnen til dette ligger i hodet vårt, lesehastigheten vår og hukommelsen. Det er lettere å oppfatte og ta til seg linjer på 10-15 ord, enn å lese en linje på over 15 ord. Det kan gjerne oppleves tungt, og man glemmer hvordan linjen startet før man er ferdig med den. Den samme effekten kan kan faktisk få ved for kort spaltebredde. Dette er spesielt viktig for personer med svakere syn eller konsentrasjonsvansker.
Linjehøyde
Lange linjer trenger større linjehøyde enn korte linjer for best lesbarhet. Det viktigste er at det skal være lett å trekke blikket fra slutten av en linje til den neste. Dersom det er 10-15 ord per linje er 120% - 145% bra linjehøyde.
Titler
Det burde være en god sammenheng mellom nivået til titler og skriftstørrelsen deres. Det vil si at en hovedtittel (h1) burde være større enn en undertittel (h2). Dette er for at brukerne skal gjenkjenne hva slags type innhold de leser og hvor de er i teksten.
Andre krav til Universell utforming:
Det er 35 ulike suksesskriterier for universell utformede nettsider, men ikke alle omhandler typografi. Derfor skal vi nå bare gå gjennom noen av de relevante. Du kan lese alle sammen på UU-tilsynets nettsider, og du kan få en oppsummering av hva Universell Utforming er for noe i vårt blogginnlegg om temaet.
Kontrast
Det skal være tilstrekkelig kontrast mellom tekst og bakgrunn på en nettside, for eksempel ved bruk av farger på enten bakgrunn eller tekst. Dette er spesielt med tanke på svaksynte og fargeblinde, men det hjelper også den generelle brukeren, for eksempel med mye gjenskinn fra solen i mobilskjermen, med å oppfatte tekstlig innhold.
For tekst som er større er 24px i ordinær skrift, eller 19px i fet skrift, er kravet 1:3 kontrast.
For tekst som er mindre er kravet 1:4.5 kontrast.
Dette kravet gjelder bare tekst som brukes til å formidle informasjon, og ikke for eksempel tekst i logo/varemerke, deaktiverte skjemaelementer, tekst som ikke er synlig for noen, grafiske elementer som bare er ment til pynt.
Overskrifter og ledetekster
Overskrifter og ledetekster skal være klare og beskrivende, slik at det er lettere å finne relevant informasjon og forstå sammenhenger og struktur. Dette er for å ta hensyn til personer som er svaksynte, blinde, døvblinde, har nedsatt kognisjon og nedsatt motorikk. I tillegg hjelper det alle brukere med å kjapt finne relevant informasjon.
Ha beskrivende og tydelige overskrifter. De skal beskrive innholdet på en god måte og skal være bygd opp som overskrifter, og ikke bare paragrafer som er justert større.
Skjemaelementer må ha beskrivende ledetekster.