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.
Relaterade riktlinjerLänk hit
- Stryk aldrig under text som inte är länkad (R106)
- Se till att det går att öka avstånd mellan tecken, rader, stycken och ord (R157)
- Skapa en design som fungerar oavsett fönster- och skärmstorlek (R91)
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 (17)
(om riktlinjer för god läsbarhet)
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.
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?
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)
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.
Hej! Angånde att undvika versaler – är det ok att skriva till exempel rubriker med första bokstaven stor och resten små, och sedan använda CSS ”text-transform: uppercase”? Om man vill att rubriken ska vara i versaler bara för att det ser snyggt ut.
Vi avråder från att använda versaler då texten blir svår att läsa rent visuellt. Det som är snyggt för någon kan göra texten svår att läsa för någon annan. Frågan är om man vill ha en text som är snygg eller en text som går att läsa.
”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?
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).
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.
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.
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?
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.”
Hej!
Det står att löptext och menyer ska vara vänsterställda. Vad med rubriker? Finns det några rekommendationer där? Vår designer har tagit fram mallar för vår webbplats (kommunal webbplats) med centrerade rubriker och vänsterställd löptext. Är det ok?
Hej Rosanna.
Även rubriker bör vara vänsterställda.
När man läser en text och kommit till slutet av raden vill ögat gärna hoppa tillbaka till början av nästa rad. Det blir smidigare om läsaren redan på förhand vet var på skärmen nästa rad börjar. Detta gäller även om nästa rad råkar vara en rubrik.
Samma sak gäller för de av oss som tar del av texten med t.ex. skärmläsare där texten matas ut i punktskrift. Genom att ”gå ner en rad” så måste personen då leta upp var på raden rubriken börjar. För de som enbart lyssnar på texten på sidan spelar det ingen roll om rubriken är centrerad eller vänsterställd.
Hej! Finns det någonstans man kan testa om typsnittet man använder på webben är tillgängligt nog? Min organisation vill uppdatera till nytt typsnitt på webben och jag som webbansvarig är orolig över att det inte är tillgängligt, men har svårt att bedöma.
Hej Anna-Karin.
De typsnitt som i regel anses vara lätta att läsa är Tahoma, Calibri, Helvetica, Arial, Verdana, och Times New Roman.
Jag vill dock vara tydlig med att det inte finns någon font som alla uppfattar som lätt att läsa. Individuella variationer mellan olika personers förutsättningar förekommer.
En enkel regel är att ju mer ”förvrängt” ett typsnitt är, desto svårare blir texten att läsa.
Tidigare har det sagts att fonter med seriffer (fötter) passar bättre på papper och att fonter som saknar seriffer passar bättre på bildskärm. Detta är dock inget vi på Digg kan stå bakom då det saknas evidens som stärker det påståendet.
Skriv kommentar
Funktionen för att skriva kommentarer använder kakor. Läs mer om kakorna. Enbart förstapartskakor används. Vill du inte godkänna kakor så kan du ställa in din webbläsare att blockera dem. Funktionen går ändå att använda men den kommer då att ställa vissa frågor om och om igen, och kan inte förhandsvisa dina kommentarer.
För att kunna erbjuda denna funktion behöver vi lagra de uppgifter som du själv skriver in (namn, e-post, eventuell webbadress och själva kommentaren) samt IP-nummer. Den rättsliga grunden är samtycke och informationen ligger kvar så länge DIGG bedömer att den tillför förståelse för riktlinjen, eller tills du begär att den raderas. Läs mer om DIGGs behandling av personuppgifter.