Riktlinje nr 39 Prio 2

Ge webbplatsen en 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.

Om denna riktlinje Länk hit


Rekommendationer för god läsbarhetLänk hit

  • Välj ett läsvänligt typsnitt och ange det i stilmallen.
  • Skriv menyer och rubriker versalgement, alltså med stor begynnelsebokstav.’
  • Anpassa radavståndet.
  • Vänsterjustera löptexten.
  • Ange maximal spaltbredd och anpassa radlängden.

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


Ange typsnitt i stilmallenLänk hit

Med hjälp av CSS-regeln @font-face kan man numera 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.

Använd sparsamt 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).

Skriv menyer och rubriker versalgementLänk hit

  • Skriv menyposter och rubriker versalgement, det vill säga med stor begynnelsebokstav. Ord som är skrivna med versaler är svårare att känna igen och försämrar läsbarheten.
  • Vänsterställ texten i vänstermenyer eller andra vertikala menyer. Då blir det lättare för användarna att skumma menyposterna, eftersom blicken kan vandra längs menyns vänsterkant.

Anpassa radavståndetLänk hit

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.


Vänsterjustera löptextenLänk hit

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.


Ange maximal spaltbredd och anpassa radlängdenLänk hit

Skapa en design som anpassar sig efter den textstorlek som användaren har valt i sin webbläsare. Många användare 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. Typografisk erfarenhet säger att en optimal radlängd är 45–55 nedslag (inklusive mellanslag), vilket gäller i princip alla teckensnitt och teckengrader. Man kan sträcka sig ner till 35 och upp till 65 nedslag per rad, men inte längre.

Se även 91. Skapa en design som fungerar oavsett fönster- och skärmstorlek.


MätbarhetLänk hit

Typsnitt och storlek bestäms ofta i layouten och den grafiska profilen, men testa gärna andra vanliga typsnitt på webbplatsen. Kontrollera att läsbarheten är god även för de användare som får upp dem i stället.

Prova också att förstora texten, för att kontrollera att läsbarheten fortfarande är god för dem som förstorar texten med hjälp av webbläsarens inbyggda funktioner. Texten ska kunna förstoras till 200 procent utan att innehållet eller funktionaliteten på webbplatsen påverkas.


TerminologiLänk hit

Teckensnitt och typsnitt

Teckensnitt och typsnitt är likvärdiga termer. Många personer med teknisk bakgrund använder ofta teckensnitt, medan det för andra är naturligt att använda typsnitt.

Ordet font är ett engelskt lånord. På svenska använder man ordet font då man avser en teckensnittsfil i en dator, medan det på engelska även kan betyda typsnitt.

Antikvor och linjärer

Typsnitt brukar delas in i antikvor och linjärer.

Antikvor har seriffer eller ”fötter”, det vill säga de står på en liten linje. Antikvor är ofta svårlästa på bildskärmar och används därför inte gärna i löptext på en webbplats. Om webbsidorna finns i en utskriftsfunktion kan du dock med fördel använda en antikva. Exempel på sådana typsnitt är Times New Roman och Georgia.

Linjärer är jämnt tjocka typsnitt som inte har några seriffer, vilket gör dem lätta att läsa på en bildskärm. Linjärer används ofta till löptext på webbplatser. Exempel på linjärer är Verdana, Arial, Helvetica och Tahoma.

Stilmallar och CSS

Stilmallar eller CSS (Cascading Style Sheets) presenteras i R92. Webbplatsen ska kunna användas även utan stilmallar.

Rendering

I webbsammanhang innebär rendering att webbläsaren tolkar html-koden och beräknar var olika element och liknande ska placeras eller presenteras på webbplatsen.



Kommetarer (1)