Den ultimata guiden till tillgänglighets­anpassade typsnitt

En nyckel till framgång är utan tvekan att fatta medvetna beslut. För att göra det behöver du insikter att fatta besluten ifrån. Det är just det som denna guiden kommer hjälpa dig med. Förse dig med insikter så du kan välja tillgänglighetsanpassade typsnitt som passar för er verksamhet!

Typsnitt är en av grundpelarna till en tillgänglig läsupplevelse. Om vi skalar bort all annan design, alla bilder, illustrationer och så vidare. Och tittar enbart på våra typsnitt. Hur pass väl klarar vi av att förmedla vårt budskap? Inte bara baserat på vad vi skrivit, eller hur vi formulerat oss, utan MED vilket typsnitt vi skrivit detta med.

Genom att välja typsnitt som har en högre läsbarhet gör vi det betydligt lättare för användare med nedsatt syn, inlärningssvårigheter, afasi och dyslexi att ta tolka och förstå det vi vill förmedla. Typsnittet är ett designelement som på många sätt kan vara helt avgörande för om en tjänst / app / webbsida uppfattas som tillgänglig.

Nu är det inte så enkelt att vi bara kan ta ett tillgängligt typsnitt och ”smäcka på det” på vår hemsida och sen är vi klara. Istället behöver vi inkludera typsnittet i vårt designarbete. Hur funkar typsnittet ihop med andra designelement? Hur funkar det i relation till andra vedertagna ”best practices”?

Riktlinjer för godkända kontraster för AA-nivå är 4:5:1 och för AAA 7:1. Om du dock väljer ett typsnitt med dålig läsbarhet spelar det ingen roll hur bra dina kontraster är. Det kommer inte hjälpa. Vill du läsa mer om kontraster kan du göra det på W3Cs hemsida.

Tipsen vi har listat nedan ska inte tolkas som en absolut sanning till tillgängliga och läsbara typsnitt, men som en grund att stå på för att kunna fatta informerade beslut som har sin grund i neurovetenskap och data insamlad från kvalitativa studier.

Det finns ett antal typsnitt som påstår sig vara ”tillgängliga” och baserar detta på sina egna hypoteser. Så för att vara säker, testa själv. Eller anlita oss om du vill ha hjälp med tillgänglighet, läsbarhet och användarvänlighet.

Vill du lära dig mer om ämnet, gräva lite djupare? I så fall finns en lista med studier i slutet av denna artikel.

Vill du att era tjänster ska gå att förstå av alla? Ska vem som helst kunna läsa sig till vad ni erbjuder? Oavsett om det är varor eller tjänster? En hemsida, app eller annan kontaktyta? Då ska du engagera dig i detta. För här finns en stor målgrupp som ofta förbises. Vilket inte bara är exkluderande utan också så att vi missar potentiella affärer!

Cirka 5–8% har läs- och skrivsvårigheter/dyslexi.

Men om man pratar om lässvårigheter, så har 13% av den vuxna befolkningen väldigt svårt att läsa. Naturligtvis har inte alla dessa läs- och skrivsvårigheter/dyslexi utan här har svårigheterna helt andra orsaker. Till exempel dålig utbildning, koncentrationssvårigheter och/eller stor ovana vid att läsa.

Källa: Dyslexiförbundet – Fakta om målgrupp

Detta är katastrof både för accessibility och användarvänlighet.

Till exempel har jag här skrivit ett stort i, siffran 1 och ett litet L i två olika typsnitt. På den övre raden där allt är skrivet i Gill Sans, går det inte med blotta ögat att se någon skillnad på dessa tre.

På den nedre raden har vi skrivit exakt samma tecken, men i det något mindre sexiga typsnittet Verdana. Visst blir det en tydlig skillnad?

Undvik att använda typsnitt där bokstäverna speglar varandra. Använd istället typsnitt där bokstäverna tydligt skiljer sig från varandra. Detta ökar både tillgänglighet och läsbarhet.Att vi snurrar runt bokstäver hör till när vi lär oss att skriva. Runt 6års ålder brukar detta ordna upp sig för de flesta av oss. Men inte för alla.

Som vi pratade om ovan så har cirka 5–8% har läs- och skrivsvårigheter/dyslexi. Men om man pratar om lässvårigheter, så har 13% av den vuxna befolkningen väldigt svårt att läsa. Även olika typer av hjärnskador kan trigga denna problematik.

Det är därför väldigt viktigt att vi väljer typsnitt där bokstäver som liknar varandra, exempelvis db qp tydligt skiljer sig från varandra.

För användare med lite svårare synfel eller användare med dyslexi, kan bokstäverna o, c, e och a vara svåra att särskilja. Vilket i praktiken innebär att ord blir svårare att läsa och förstå. Om bokstäverna sitter nära varandra eller skrivna i en mindre storlek kan dom se väldigt lika varandra. Bokstäver med väldigt liten öppning, som bokstaven e i mitt exempel, kan lätt uppfattas som att de är helt stängda. Ett c kan läsas som ett o.

Välj därför typsnitt med större öppningar för en ökad läsbarhet. För att ta det steget längre, välj gärna typsnitt som tydligt markerar bokstävernas form, början och slut.

Först och främst, JA det heter så – Humanist och Grotesque. Det är så varianterna benämns.

Ett humanistiskt typsnitt har generellt större variation när det kommer till bokstävernas bredd. Inte då själva tjockleken på strecken utan hur mycket plats dom tar från kant till kant. Detta underlättar för oss när vi ska tyda bokstäver. Ju otydligare (exempelvis vid små storlekar), desto viktigare att bokstäverna har denna variationen av bredder.

Detta hjälper oss alltså enklare särskilja bokstäver från varandra och kan lättare läsa orden som står skrivna. Att välja humanistiska typsnitt underlättar för människor med synproblematik och dyslexi men underlättar också för människor med inlärningssvårigheter.

Säkerställ att era bokstäver inte sitter ihop!

Ju tightare bokstäverna sitter, desto svårare är det att läsa dom. Typsnitt vars bokstäver sitter helt eller nästan helt ihop kan innebära stora svårigheter för läsare med dyslexi, synfel eller lässvårigheter. Även människor med kognitiva svårigheter kan få det tufft när bokstäverna sitter för tight ihop.

Extra utmanande blir det när vissa kombinationer av bokstäver skrivs efter varandra. Dessa kan då uppfattas som att dom sitter ihop. T.ex kan ”ol” bli ett ”d”, ”lo” blir ett ”b” och ”vv” kan bli ett w. Bokstäver som har ett tight letter-space (mellanrum mellan bokstäverna) blir också svårare att läsa även för läsare med god syn och hög läsförståelse.

Så vad ska du göra? När du väljer typsnitt, se till att bokstäverna har tydliga avstånd från varandra. Om varje tecken är tydligt separerat från varandra blir läsbarheten betydligt högre, eftersom läsaren då kan fokusera på en bokstav i taget.

Tvetydighet kan påverka vår förmåga att känna igen och ”avkoda” ord och bokstäver. Användare med synsvårigheter kan sitta framför skärmen och kisa med ögonen för att identifiera huruvida en bokstav är stor eller liten.

Genom att välja ett typsnitt där skillnaden i höjd är tydlig så underlättar du för dina läsare att identifiera egennamn eller vart en mening börjar. Eliminera osäkerheten, välj tillgängliga typsnitt som alla kan förstå!

Den kanske absolut viktigaste punkten på listan, testa era typsnitt. Har ni valt ett typsnitt? Testa det och jämför med andra tänkbara kandidater. Riktlinjerna vi listat i punkt 1 till 6 ovan är en bra startpunkt för detta utifrån en experts perspektiv.

Men det är också viktigt att komma ihåg att alla riktlinjer gällande tillgänglighet och WCAG är av en teknisk natur. Det är en sanning med modifikation. Medans användarvänlighet och effektivitet endast kan mätas med faktiska användartester. Så sätt era typsnitt i den kontext de kommer befinna sig i, och testa sedan med en så bred grupp användare som möjligt.

Skriv en lista över användare ni behöver inkludera för att täcka in hela er målgrupp. Vi rekommenderar att ni på den listan skriver upp användare med Dyslexi, Afasi, inlärningssvårigheter och svårare synskador.

När ni genomför era tester så rekommenderar vi att ni gör detta i miljöer som erbjuder en realistisk upplevelse. Detta för att säkerställa att era övriga designval inte har en negativ inverkan på läsbarheten och att ni istället gör designval utifrån de typsnittet ni valt. På så vis får ni en användarvänlig, tillgänglig, inkluderande och snygg lösning!

Här kommer den sammanfattade listan. Perfekt att skriva ut och lägga bredvid datorn för att ha påminnelsen nära till hands!

1) Undvik typsnitt med bokstäver vars utseende inkräktar på varandra.

2) Säkerställ att bokstäverna inte speglar varandra.

3) Det ska vara enkelt att särskilja bokstäver från varandra

4) Humanistiska typsnitt har generellt högre läsbarhet i mindre storlekar än groteska typsnitt.

5) Se till att ert typsnitt har ett tydligt mellanrum mellan bokstäverna.

6) Välj typsnitt med en tydlig visuell skillnad mellan Versaler (stora bokstäver) och Gemener (små bokstäver).

7) Testa hur lämpliga era typsnitt är i en relevant kontext

Har du tagit dig hela vägen hit? Underbart! Det är en rätt omfattande artikel att ta sig igenom. Förhoppningsvis har du hittat mycket värdefullt du kan ta med dig framåt. Att arbeta med tillgänglighet är så otroligt viktigt. Inte bara för att skapa ett mer inkluderande samhälle, utan också för att det finns mycket pengar att tjäna på att skapa tjänster och produkter som alla kan använda.

Om du har några funderingar på ämnet eller vill anlita oss för ett samarbete gällande produktutveckling, användarvänlighet eller tillgänglighet så är du varmt välkommen att höra av dig till oss.

Vi finns här för att hjälpa dig med både innovation och digitalisering!

Undertexter 1.2.2, Kontraster (AA) 1.4.3, Förstora och förminska text 1.4.4, Text i bild (AA) 1.4.5, Kontraster (AAA) 1.4.6, Visuell presentation 1.4.8, Text i bild (AAA) 1.4.9, Textavstånd 1.4.12 and Läsförståelse 3.1.5