Bruk minst 16 pixler og god kontrast på tekst 24

Bruk stor størrelse på skriften og tydelig kontrast. Dette burde ikke høres revolusjonerende ut. Men lesbarhet har vært en sikker gjenganger i brukertestene våre opp gjennom årene.

Lesbarhet har vært et kjent irritasjonsmoment for brukere lenge. Og det er ikke utrolig komplisert å pønske ut hvordan man løser problemet. Så hvorfor er det fortsatt vanskelig å lese teksten på dagens nettsider?

Svekket syn er vanlig. 3 prosent av Norges voksne befolkning har nedsatt syn i en slik grad at de har vansker med å lese avistekst. Også personer med mindre synsfeil kan synes det er vanskelig å lese liten tekst. De fleste får nedsatt syn med alderen.

Det er mye som er med å påvirke lesbarhet. Typografi og måten innholdet skrives på er viktig. Men det mest opplagte er kanskje skriftstørrelse og kontrast.

Bruk god nok kontrast.

Det er vanskelig å bedømme hvor stor kontrast andre mennesker trenger for å lese. Derfor er det best å holde seg til Web Content Accessibility Guidelines (WCAG). Disse retningslinjene definerer hvilke kontrastforhold man bør ha mellom fargen til tekst og bakgrunn. Ut fra erfaringene jeg har hatt fra brukertester vil jeg si at WCAG-kriteriene gir en rimelig pekepinn på hvor man bør legge lista.

WCAG er delt inn i ulike nivåer for hvor tilgjengelig en side er: AA og AAA. AA-kravet til kontrast skal sikre at en middels 80-åring kan lese innholdet.

Ønsker du at også personer som ser dårligere enn en middels 80-åring skal kunne lese innholdet bør du bruke AAA-kravet. Personer som trenger bedre kontrast en dette vil normalt bruke andre hjelpemidler (f.eks. en skjermforstørrer):

Her er noen nyttige verktøy du kan bruke til å sjekke om kontrasten oppfyller retningslinjene:

Bruk stor nok tekst.

WCAG-kriteriene setter krav til at det skal være mulig for brukerne å endre fontstørrelsen i nettleseren. Problemet er at folk flest ikke benytter den funksjonen. Jeg har sett flere brukere slite med å lese tekst, men jeg har enda ikke sett noen av dem velge å justere tekststørrelsen i nettleseren. Dersom du ønsker at teksten på nettsidene faktisk skal bli lest bør du velge en stor nok fontstørrelse fra starten.

Det er vanskelig å gi noen regel for hva som er stort nok. Bnonn Tennant foreslår 16 pixler. Jeg synes han har et godt poeng. Her er forslag til framgangsmåte dersom du ikke er overbevist:

  1. Design sidene slik at de ser bra ut med 16 pixler i brødtekst. (Gjerne i en HTML-prototype)
  2. Bli vant til designet ved å faktisk lese noe av innholdet.
  3. Opplev at nå føles 12 pixler alt for lite.

Men i dagens mobile verden finnes det mange variasjoner av skjermoppløsning, skjermstørrelse og leseavstand. Man blir nødt til å ta høyde for det.

Jeg har ofte erfart at brukere klager på at teksten er vanskelig å lese, men jeg har aldri opplevd at noen synes den er for tydelig. Det er selvfølgelig ikke meningen at alt skal ha like stor kontrast. I webdesign er det ofte behov for å dempe noen elementer for å fremheve andre. Men alt som er viktig bør være lett å lese.

Stor nok tekst og god nok kontrast er noe alle vinner på, ikke sant?

24 kommentarer

  1. Sjekk også denne: http://www.usabilitypost.com/2011/10/17/font-sizes/
    Mer enn 34% av totalt 2085 respondenter stemte på 16px font.

  2. Bjørn: Statistikken tolket på en annen måte: 66% synes 16px var for stort :)

    Gjermund: For øvrig skal jeg kommentere det samme her som jeg gjorde i Bnonn Tennants innlegg i sin tid: Så lenge font-størrelsen er innenfor rimelighetens grenser er det lang viktigere ting man kan gjøre for å øke lesbarheten: Kontrasten, som du nevner, er viktig. Riktig mengde whitespace mellom linjer, ord og bokstaver er superviktig. Men viktigst av alt synes jeg er selve fonten. Fonter med seriffer trodde jeg alle var enig om ikke funket bra på skjerm – tydeligvis ikke… Jeg synes i hvert fall det er både stygt og vanskelig å lese i forhold til en god sans-serif ala Helvetica. Det hjelper ikke med 16px om fonten er Webdings, for å sette det litt på spissen :)

    Og til slutt, husk på at folk ikke leser bokstaver og ord, de leser former og tolker dem til ord de kjenner og som passer i konteksten. Hvis font og fontstørrelse blir så annerledes i forhold til det de er vandt til mister man hele den fordelen vi har av at hjernen er i stand til det, og leseren må jobbe dobbelt så hardt for å komme seg gjennom en tekst.

  3. Jeg er enig i at det er andre ting enn font-størrelse som øker lesbarheten. Hovedpoenget må jo være at sluttresultatet har lesbarhet. Men poenget er at mange nettsider ender opp med for dårlig lesbarhet. Når vi vet at det finnes mange som har dårligere syn enn oss bør vi legge inn litt sikkerhetsmargin i forhold til hva vi selv synes er tydelig nok. Jeg trekker frem fontstørrelse fordi jeg ser på det som det mest banale og enkleste grepet å forstå.

  4. Espen: Bra kommentar, är helt enig i att seriffer inte hör hemma och de hör inte hemma på webben. Men det finns en tydlig trend idag att seriffer ska användas, stora tidningar på webben använder sina egenutvecklare fonter för print idag på webben. Och 16px i fontstorlek? det är överdrivet på alla sätt, det som är viktigt är att koda sidan korrekt att webläsaren faktiskt klara att “zooma” den på rätt sätt och snyggt, när brukare har behov för det.

    Det som ofta glöms bland fagfolk är just att slutbrukaren inte är lika fixerad vid detaljer utan ser på helheten. Utan att man låser sig fast så djupt inom sitt fag att det blir dåligt balans i förhållande till helheten.

    Finns många websider som är svårtlästa, men det beror antagligen inte på att 16px fontstorlek inte har använts.

  5. Espen: Mange bra innspill. Angående seriffer så vet jeg faktisk ikke. Burde jo finnes noen studier? Georgia og lignende er jo ganske utbredt, blant annet i nettaviser: New York Times, Boston Globe, The Australian, The Times, Dagsavisen, overskrifter Aftenposten med mer.

  6. Heilt enig i at det å kjøre 16px fontsize i svært mange tilfeller er uproblematisk å få til å funke om ein kvalifiserer til å kalle seg designer.

    Espen:
    “Fonter med seriffer trodde jeg alle var enig om ikke funket bra på skjerm”
    - Dette var tilfellet i den tid operativsystema ikkje kom med god kantutjevning for fonter, og resultatet vart mindre pent. Det er mange år sidan dette slutta å vere eit problem i vår del av verda. Då var det lurt å velgje bort seriffene for at designet skulle ta seg bra ut. Ikkje fordi alle som befatta seg med webdesign plutselig bestemte seg for at seriffer var i utgangspunktet stygt.

    “husk på at folk ikke leser bokstaver og ord, de leser former og tolker dem til ord de kjenner”
    Dette er heilt riktig, men likevel ein kontradiksjon i kommentaren din. Seriffer bidrar som kjent til at denne hjerneaktiviteten går kjappere enn med sans serif – fonter.

  7. PS. Eksempel på veldig fin font med seriffer: https://typekit.com/fonts/museo

  8. Hvor mange steder brukes like stor skriftstørrelse på iPad og iPhone? 16px er godt på brødtekst. Men skal du lage grensesnitt, som har litt størrelse – passer ikke dette så godt.

    Eller?

  9. Et annet viktig poeng er de forskjellige gradene av pikseltetthet på ulike skjermer. De aller fleste brødtekstene man finner i nettaviser er svært vanskelige å lese om skjermen sitter på f.eks en Macbook Air 13″. Den har samme oppløsning som Macbook Pro 15″, og det betyr at hver piksel er mindre. Ergo blir fontene gjengitt deretter.

  10. Ja, når man går over på iPad og iPhone er det vanskelig å si at en fontstørrelse passer for alt. En iPone 4 har 326 pixler per tomme, en iPad har 132 pixler per tomme. Så selv om du holder en iPhone og en iPad på samme avstand vil 16px være nesten 2 1/2 gang så stort på iPaden. Vanlige dataskjermer har ofte 70-100 pixler per tomme.

  11. Er det ikke her et poeng å bruke em og ikke px i stilsettet?

  12. Ja, det er et poeng å bruke em. slik at fontstørrelsen blir vist i forhold til brukerens innstillinger og hvilken enhet de bruker. Men man må fortsatt ta stilling til hvor stor teksten skal vises i utgangspunktet.

  13. I tillegg til det som er skrevet og diskutert over, er også linjeavstand et vesentlig poeng for lesbarheten.

  14. Gjermund, jeg mente skrift som er like stor som “16px”. I grensesnitt har man ofte ikke den luksusen.

  15. Men svart på grå bakgrunn, ikke veldig god kontrast etter min mening ;) (ref denne bloggposten)

  16. Mikael: Teksten i denne bloggposten er faktisk grå tekst på grå bakgrunn (#111111, #E6E8E0) Men fortsatt er kontrastfoholdet 15:1, Altså god margin for å tilfredstille AAA-nivået i WCAG. Men da er det jo interessant at du faktisk ønsker enda bedre kontrast.

  17. Kontrasten på den grønne teksten, derimot er 3:1. Det betyr at kontrasten skal være god nok for de som har normalt syn. Men de med nedsatt syn kan få problemer.

  18. Større tekst og bedre kontrast har jeg vært en tilhenger av en god stund nå, og har forsøkt å argumentere for dette ovenfor designere jeg jobber med på forskjellige prosjekter. Blir rett og slett irritert når webdesignere absolutt skal holde seg til 11px sans-serif tekst som nesten er uleselig fordi de skal tøye grensen maks mtp. kontrast. Tips til designere som sitter med en stor flott Mac-skjerm: ikke alle andre har en like dynamisk skjerm som deg!

    Det er ikke uten grunn at 16px er standardstørrelsen i de aller fleste nettlesere. Joda, det går fint an (for de fleste) å lese 12px – men er det behagelig i lengden? For meg virker det som man anstrenger seg mindre for å lese dersom den er litt større, minst 14px. At folk ikke orker å lese lange tekster på PC kan jo faktisk være fordi det er slitsomt å lese så mye tekst i mindre størrelse. Skal også sies at selve pikselstørrelsen er irrelevant, fordi størrelsen av fonten varierer veldig fra font til font selv med samme pikselstørrelse. Men for standardfontene med Windows, så er 16px en god standard å følge.

    Hvorfor har vi havnet opp med å kjøre mindre fonter over årene? Tidligere var det jo en opplest og vedtatt sannhet at det var farlig med “lange” sider; helst skulle nettsiden passe på “én skjerm”. Når man da hadde en lengre tekst man ønsket å få på minst mulig areal, hva gjør man da? Jo, man lager skriften mindre slik at den “passer på én skjerm”. I senere tid har det gått opp for folk at folk liker å skrolle, at skrolling er helt naturlig for folk, at lange sider med masse innhold egentlig ikke er så farlig likevel (så lenge lastetiden er forsvarlig – som har blitt hjulpet med lazy-loading).

    Twitter, Facebook og andre store nettsider har jo for lengst begynt med “endless scrolling”. Så hvorfor tviholde på gamle vaner med tekststørrelse for å få mer skrift inn på mindre plass, da?

    Andre ting som er sterkt undervurdert og som ofte overlates tilfeldighetene: linjeavstand, “bokstavavstand” (letter-spacing på norsk?) og linjebredde. Man bruker ofte grenseløst med tid på andre deler av designet som er totalt irrelevante, mens man tenker lite på noe av det viktigste: at et menneske skal faktisk sitte å lese denne siden. Da har man som webdesigner et ansvar for å utfordre seg selv med spørsmålet:

    Hvordan kan jeg gjøre det mest behagelig for de fleste å lese denne siden?

  19. Jeg er enig i at ~16pt fungerer fint som hoved-brødtekst, men tittelen i denne artikkelen virker mest som et forsøk på å provosere :)

    Jeg synes det er for lettvint å etablere konkrete regler for tekststørrelse når brukervennlighet på nettsteder handler om så mye mer, feks overblikk og aktive størrelseskontraster som bidrar til å rette fokus mot innhold. Dette bildet må med andre ord tilpasses til hvert enkelt prosjekt, og jeg mener at både 11pt og 16pt har sin rolle på nettsteder.

    Fargekontraster er et fint verktøy å bruke når det gjelder svaksynte og eldre, men ut over dette ser jeg store svakheter i å bruke det som en regelsetter. Kontrastprogrammer tar for eksempel ikke hensyn til størrelse på flater både i selve fonten eller på en eventuell bakgrunn (knapp el.), noe som gjør at en 11pt bold i mange tilfeller kan være minst like tydelig som en 14pt regular.

    Vi kommer fremover til å få strengere krav til Universell Utforming på web, noe jeg synes er både spennende og bra. Jeg mener dog at det blir litt banalt å løse utfordringene dette fører med seg med å etablere regler for størrelser og kontraster :)

  20. Da har du retningslinjene på det rene :) Problemet blir når man sitter på en bærbar hvor kanskje lysstyrken ikke er optimal, da blir ikke kontrasten nødvendigvis som påtenkt. Eller en annen ikke-kalibrert lcd monitor.

  21. Ref. forskjellig på fontstørrelse på iPhone, iPad og skjerm @Tor:

    Også viktig å huske på avstanden til skjermen. Folk holder gjerne en iPhone nærmere enn en iPad, og en iPad kan ofte være nærmere enn en desktopskjerm. Størrelsen er ikke bare relativ til oppløsning o.l. – også avstand fra øyne til skjerm!

  22. Det er sikkert sant at konkrete regler og retningslinjer blir for enkelt. Det er behov for å nyansere og det finnes andre måter å oppnå målet. Kunnskap om typografi, fonter, linjeavstand har vi hatt lenge. Men likevel er erfaringen at dårlig lesbarhet generelt er et like stort problem nå som for 5 år siden. Vi trenger folk som er gode på typografi, men det er kanskje enda viktigere å være bevisst at tydelig tekst er viktig?

  23. Ironisk nok har denne siden et forferdelig design. Hva med å bare finne et bedre gratis template i WP?

  24. @geirgalen Synd at du synes det. Selv liker vi den godt.

Skriv en kommentar

  • *

XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>