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.

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.


Rekommendationer för god läsbarhetLänk hit

  • Välj ett läsvänligt typsnitt och ange det i stilmallen.
  • Undvik helt versala rubriker och texter.
  • Anpassa radavståndet.
  • Vänsterjustera löptext och menyer.
  • Ange maximal spaltbredd och anpassa radlängden.

Ange typsnitt i stilmallenLänk hit

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.

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).
  • 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. Se Se till att infogade externa tjänster följer webbriktlinjerna (R67).


Undvik helt versala rubriker och texterLänk hit

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å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.

Vissa användare 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 (R157).


Vänsterjustera löptext och menyerLä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.

Vänsterställ även 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.


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.

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


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

Typografi på webben hanteras i allmänhet i stilmallar på formatet CSS – Cascading Style Sheets. Detta presenteras i R82. Använd stilmallar för att separera presentationen från innehållet.

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.

Textvägg
Långa avsnitt med enbart text kan utgöra hinder för bland annat personer med dyslexi. Lätta gärna upp med mellanrubriker, punktlistor och bilder.

Kommentarer till denna riktlinje

Kommentarer (11)

  • Besökare skriver:

    Tråkigt att ensidigt rekommendera linjär för läsning på bildskärm. På en vanlig dator med ”riktig” bildskärm är antikva att föredra. Aktuellt nu är skatteverkets blanketter, de är synnerligen svårlästa p g a olämpligt typsnitt.

    • Pär Lannerö skriver:

      Tack för påpekandet Sören!
      Som du kanske ser nämner riktlinjen även att antikvan Georgia är särskilt anpassad för läsning på skärm (det är också den som används i första hand för löptext på denna webbplats!), så helt ensidig är inte rekommendationen.

      Är det så att skärmarnas kvalitet blivit så pass mycket bättre nu att riktlinjen behöver uppdateras vad avser typografi?

  • Besökare skriver:

    Vad anses om rubriker skrivna helt i VERSALER?

    När man skriver i chatt och mail upplevs det som skrikigt, man ska då undvika.

    Gäller det samma för webbtexter med sådana rubriker? (Jag kan tycka att det ibland se snyggt ut)

    • Besökare skriver:

      Hej, ja man bör generellt undvika helt versala rubriker i alla slags texter. Men har man goda skäl för att göra avsteg från det, kan det säkert fungera i enstaka fall. Men inte bara för att ”det ser snyggt ut” utan av andra skäl. Det kan t.ex. handla om att man vill uppmärksamma läsarna särskilt på speciellt viktigt innehåll; jfr skyltar som ”OBS! SVAG IS!” o.d.

  • Anonym skriver:

    ”Vill man ge titlar på skrifter och liknande en grafisk markering är citattecken att föredra framför kursiv text.”

    Varför är citattecken att föredra framför kursiv stil?

    • Tommy Olsson skriver:

      Kursiv stil för hänvisningar är en typografisk konvention i främst anglosaxiska länder. I Sverige är det vanligare att omge titeln med citattecken (eller inte använda någon särskilt formgivning alls).

  • Hanna skriver:

    Hej, hur kommer det sig att rubrikerna på den här sidan är understrukna och länkade? När jag klickar på dem kommer jag ingenstans. Det känns som om det går emot era egna riktlinjer om länkning.

    • Elin Svensson skriver:

      Hej!
      Rubrikerna på sidan är ankarlänkar för att det ska vara möjligt att länka direkt in till ett specifikt avsnitt på sidan.
      Ankarlänkar inom sidan är oumbärliga för längre artiklar där man till exempel kan vilja ha en innehållsförteckning i början. Eventuellt kan man vilja formge ankarlänkar inom sidan annorlunda än andra länkar för att visa att de inte leder till någon ny sida. Alternativt kan man ha formgivning med selektorn :target för att visuellt indikera målet för en ankarlänk.

  • Mira skriver:

    Hej! Jag arbetar med webbar som har information om teater och konserter. Vi har mycket titlar i våra texter (på konserter och föreställningar.) Ska jag skriva de, med kursiv stil eller med citattecken?

    • Elin Svensson skriver:

      Hej!
      Lagen om tillgänglighet till digital offentlig service omfattar inte hur titlar ska skrivas i brödtext. Men, i boken ”Svenska skrivregler” står följande: ”Titlar på tidningar, böcker, filmer, musikverk, utställningar etc. kan i löpande text markeras med citattecken eller kursiv. Det gäller framför allt där gränsen mellan titel och omgivande löptext annars skulle bli otydlig. Om det tydligt framgår vad som är titel är särskild markering onödig. I texter där flera titlar nämns bör alla markeras på samma sätt.”


Om denna riktlinje

Status på vår webbplats


(Då uppdateras status i checklistorna.)