Ge webbplatsen en god läsbarhet

Den största delen information på en webbplats är vanligtvis textbaserad. Underlätta för alla genom att anpassa webbplatsen för olika hjälpmedel och ge löptext och övriga textelement god läsbarhet.

Därför behöver webbplatsen ha god läsbarhet

Typsnittet och luftigheten i texten påverkar webbplatsens läsbarhet. Texten bör vara så stor att den är bekväm att läsa. Alltför liten text, stora textmassor och många olika typsnitt gör texterna svårlästa. Begränsa därför antalet typsnitt på webbplatsen och använd alltid flexibla måttenheter, till exempel em eller procent, så att det går att att påverka storleken på texten med webbläsarens inbyggda funktionalitet.

Rekommendationer för god läsbarhet

Det finns ett antal tips och rekommendationer för hur du kan arbeta med läsbarheten för att förbättra digital tillgänglighet:

Ange typsnitt i stilmallen

Med hjälp av CSS-regeln @font-face kan man visa vilka typsnitt man vill, även sådana som användaren inte har installerade på sin dator. Ibland kan det dock vara nödvändigt att frångå organisationens grafiska profil på webbplatsen, eftersom text på skärm ställer andra krav på läsbarhet än tryckt text.

Typsnitt som linjärerna Verdana, Tahoma och Trebuchet och antikvan Georgia är speciellt framtagna för läsning på skärm, och ger därför god läsbarhet på webbplatsen. Times New Roman är å andra sidan speciellt framtaget för smala dagstidningsspalter och därför mindre lämpligt att använda på en webbplats.

Var sparsam med grafiska markeringar som kursiv och fetstil i löptexten på webbplatsen. Fetstil används framför allt för att markera nyckelord i en text. Kursiv text kan precis som i tryckt text användas för att markera betoning. Vill man ge titlar på skrifter och liknande en grafisk markering är citattecken att föredra framför kursiv text.

  • Ange i stilmallen vilka typsnitt som ska användas för olika objekt.
  • Laborera inte med flera olika typsnitt och teckengrader för samma typ av textelement (exempelvis brödtext).

Tänk på att om teckensnitt hämtas från andra servrar så kan det läcka information om dina besökare till den servern.

Undvik helt versala rubriker och texter

Samma konventioner gäller för menyrubriker och andra rubriker som för vanlig löptext: de bör skrivas med stor begynnelsebokstav och i övrigt gement.

Helt versala rubriker och texter försämrar läsbarheten helt enkelt för att vi inte är vana vid det (utom när det används för speciella syften, till exempel för varningstext som ”SVAG IS” eller i förkortningar som ”CIO” och ”EU”).

Anpassa radavståndet

Grundinställningen i webbläsarna visar text med ett radavstånd på 120 procent av storleken för typsnittet. Ju bredare spalter som används för brödtexten, desto större måste radavståndet vara. Då hittar ögat lättare till början av nästa rad.

Radavståndet kan behöva ökas till minst 150 procent inom textstycken, och avståndet mellan stycken är minst 1,5 gånger större än radavståndet. Gör inställningen med hjälp av CSS.

Avståndet mellan punkterna i punktlistor bör vara större än själva radavståndet. Då blir det lättare att se skillnaden på en ny punkt och en punkt som sträcker sig över flera rader. Gör inställningen med hjälp av CSS.

Vissa personer har behov av större avstånd i text än andra. Därför är det viktigt att se till att det går att öka avstånd mellan tecken, rader, stycken och ord.

Vänsterjustera löptext och menyer

Låt alltid löptexten vara vänsterjusterad, det vill säga texten ska ha en rak och jämn vänsterkant och en ojämn högerkant. Det underlättar läsningen. Undvik att avstava ord annat än för mycket långa uttryck som ger svårlästa radbrytningar.

Vänsterställ även texten i vänstermenyer eller andra vertikala menyer. Då blir det lättare för personer att skumma menyposterna, eftersom blicken kan vandra längs menyns vänsterkant.

Ange maximal spaltbredd och anpassa radlängden

Skapa en design som anpassar sig efter den textstorlek som personen har valt i sin webbläsare. Många personer har behov av att kunna öka storleken på texten. Större textstorlek kan medföra bredare layout och därmed längre rader. Och eftersom långa radlängder försämrar läsbarheten är det viktigt att designen anpassar sig efter textstorleken.

  • Se till att ha en layout där textens rader anpassas till storleken på fönstret och undvik horisontella rullningslister på sidan.
  • Ange en maximal spaltbredd för sidan, så att raderna inte blir för långa om användarna har breda webbläsarfönster. Spaltbredden bör inte vara mer än 80 tecken. Vilken maximal spaltbredd 80 tecken motsvarar i en viss måttenhet i stilmallen varierar beroende på layout, typsnitt och radavstånd.

Senast uppdaterad: