Träff #15 • Tillgänglig typografi, klarspråk • 31 jan • ht 22 UX Writing • Nackademin

Jonas Söderström • 2023
Del 1: Typografi för
tillgänglighet

UX writing • Trä
ff
#15 • 31 januari
Jonas Söderström • Nackademin • Ht 2022 • Kvartsfart

View Slide

Radavstånd
Kan vara viktigare än storlek för god läsbarhet

View Slide

Långt nere under honom bullrade den nyvaknade staden; ångvinscharne
snurrade nere i Stadsgårdshamnen, järnstängerna skramlade i järnvågen,
slussvaktarnes pipor visslade, ångbåtarne vid Skeppsbron ångade,
Kungsbacksomnibussarne hoppade skallrande fram på den kullriga
stenläggningen; stoj och hojt i
fi
skargången, segel och
fl
aggor som
fl
addrade ute på strömmen, måsarnes skri, hornsignaler från
Skeppsholmen, gevärsrop från Södermalmstorg, arbetshjonens klapprande
med träskorna på Glasbruksgatan, allt gjorde ett intryck av liv och
rörlighet, som tycktes väcka den unge herrens energi, ty nu hade hans
ansikte antagit ett uttryck av trots och levnadslust och beslutsamhet och,
då han lutade sig över barriären och såg ner på staden under sina fötter,
 
var det som om han betraktade en
fi
ende; hans näsborrar vidgades,
 
hans ögon
fl
ammade och han lyfte sin knutna hand, som om han velat
utmana den stackars staden eller hota den.
Adobe Garamond

52 p / Radavstånd 1
August Strindberg: Röda Rummet (1879)

View Slide

Långt nere under honom bullrade den nyvaknade staden;
ångvinscharne snurrade nere i Stadsgårdshamnen, järnstängerna
skramlade i järnvågen, slussvaktarnes pipor visslade, ångbåtarne vid
Skeppsbron ångade, Kungsbacksomnibussarne hoppade skallrande
fram på den kullriga stenläggningen; stoj och hojt i
fi
skargången,
segel och
fl
aggor som
fl
addrade ute på strömmen, måsarnes skri,
hornsignaler från Skeppsholmen, gevärsrop från Södermalmstorg,
arbetshjonens klapprande med träskorna på Glasbruksgatan, allt
gjorde ett intryck av liv och rörlighet, som tycktes väcka den unge
herrens energi, ty nu hade hans ansikte antagit ett uttryck av trots
och levnadslust och beslutsamhet och, då han lutade sig över
barriären och såg ner på staden under sina fötter, var det som om
han betraktade en
fi
ende; hans näsborrar vidgades, hans ögon
fl
ammade och han lyfte sin knutna hand, som om han velat utmana
den stackars staden eller hota den.
Adobe Garamond


View Slide

fi
fl
aggor som
fl
addrade ute på strömmen, måsarnes skri, hornsignaler från
med träskorna på Glasbruksgatan, allt gjorde ett intryck av liv och
rörlighet, som tycktes väcka den unge herrens energi, ty nu hade hans
ansikte antagit ett uttryck av trots och levnadslust och beslutsamhet och,
då han lutade sig över barriären och såg ner på staden under sina fötter,
 
var det som om han betraktade en
fi
ende; hans näsborrar vidgades,
 
hans ögon
fl
ammade och han lyfte sin knutna hand, som om han velat
utmana den stackars staden eller hota den.
Adobe Garamond


View Slide

fi
fl
aggor som
fl
addrade
 
ute på strömmen, måsarnes skri, hornsignaler från Skeppsholmen, gevärsrop
 
från Södermalmstorg, arbetshjonens klapprande med träskorna på
Glasbruksgatan, allt gjorde ett intryck av liv och rörlighet, som tycktes väcka
 
den unge herrens energi, ty nu hade hans ansikte antagit ett uttryck av trots
 
och levnadslust och beslutsamhet och, då han lutade sig över barriären och
 
såg ner på staden under sina fötter, var det som om han betraktade en
fi
ende;
hans näsborrar vidgades, hans ögon
fl
ammade och han lyfte sin knutna hand,
som om han velat utmana den stackars staden eller hota den.
Adobe Garamond

48 / 66 p
 
1,2 rader

View Slide

Långt nere under honom bullrade den nyvaknade staden; ångvinscharne snurrade
nere i Stadsgårdshamnen, järnstängerna skramlade i järnvågen, slussvaktarnes
pipor visslade, ångbåtarne vid Skeppsbron ångade, Kungsbacksomnibussarne
hoppade skallrande fram på den kullriga stenläggningen; stoj och hojt i
fi
fl
aggor som
fl
addrade ute på strömmen, måsarnes skri,
hornsignaler från Skeppsholmen, gevärsrop från Södermalmstorg, arbetshjonens
klapprande med träskorna på Glasbruksgatan, allt gjorde ett intryck av liv och
rörlighet, som tycktes väcka den unge herrens energi, ty nu hade hans ansikte
antagit ett uttryck av trots och levnadslust och beslutsamhet och, då han lutade sig
över barriären och såg ner på staden under sina fötter, var det som om han
betraktade en
fi
ende; hans näsborrar vidgades, hans ögon
fl
ammade och han lyfte
sin knutna hand, som om han velat utmana den stackars staden eller hota den.
Adobe Garamond

47 / 71 p
 
1,35 rader
Ju längre
rader,
 
desto mer
radavstånd

View Slide

Långt nere under honom bullrade
den nyvaknade staden; ångvinscharne
snurrade nere i Stadsgårdshamnen,
järnstängerna skramlade i järnvågen,
slussvaktarnes pipor visslade,
ångbåtarne vid Skeppsbron ångade,
Kungsbacksomnibussarne hoppade
skallrande fram på den kullriga
fi
fl
aggor som
fl
addrade ute på strömmen, måsarnes
skri, hornsignaler från
Skeppsholmen, gevärsrop från
Södermalmstorg, arbetshjonens
klapprande med träskorna på
Glasbruksgatan, allt gjorde ett intryck
av liv och rörlighet, som tycktes väcka
den unge herrens energi, ty nu hade
hans ansikte antagit ett uttryck av
trots och levnadslust och
beslutsamhet och, då han lutade sig
över barriären och såg ner på staden
under sina fötter, var det som om han
betraktade en
fi
ende; hans näsborrar
vidgades, hans ögon
fl
ammade och
han lyfte sin knutna hand, som om
han velat utmana den stackars staden
eller hota den.
Adobe Garamond

47 / 1 radavstånd

View Slide

Brödtext ska ha
extra radavstånd…
…men rubriker
minskat radavstånd!

View Slide

Rubrik med enkelt
radavstånd

View Slide

Rubrik med 0,7
radavstånd

(224/194 p)

View Slide

VERSALER
 
vs
 
gemener

View Slide

NO TIME TO DIE
Överdelen av bokstäverna är de vi känner igen – vi läser i överkant
NO TIME TO DIE

View Slide

Kerning
Anpassa avståndet mellan speci
fi
ka bokstavspar
L A
LA
T A
TA
V
V A
A

View Slide

Spärrning
Att generellt minska bokstavsavståndet
 
mellan alla bokstäver
Knipning
Knipning
Knipning

View Slide

Hitta typsnitt

View Slide

fontscape.com

View Slide

www.myfonts.com/WhatTheFont/

View Slide

Plugin för Chrome

View Slide

Kombinera

View Slide

Star Wars
A NEW BEGINNING
Maximera kontraster:

Stor – liten

Rak – kursiv

Script – linjär

Versaler – gemener

View Slide

NO TIME TO DIE
In her Majesty’s Secret Service
Maximera kontraster:

Stor – liten

Smal – bred

Linjär – realantikva

Versaler – gemener

View Slide

Myriad för rubrik,
kanske över två rader
Adobe Garamond: Långt nere under
honom bullrade den nyvaknade
staden; ångvinscharne snurrade nere i
Stadsgårdshamnen, järnstängerna
skramlade i järnvågen, slussvaktarnes
pipor visslade, ångbåtarne vid
Skeppsbron ångade,
fi
fl
aggor som
fl
addrade ute på strömmen, måsarnes
Charter för rubrik,
kanske på två rader
Myriad: Långt nere under honom
bullrade den nyvaknade staden;
ångvinscharne snurrade nere i
skramlade i järnvågen,
fi
fl
aggor som
fl
addrade ute på strömmen,
Avenir för rubrik,
kanske på två rader
Open Sans: Långt nere under honom
bullrade den nyvaknade staden;
ångvinscharne snurrade nere i
skramlade i järnvågen,
fi
fl
aggor som
fl
addrade ute på strömmen,
måsarnes skri
H E M S Ö K KÖ P H E M S Ö K KÖ P
H E M S Ö K KÖ P

View Slide

Vad är ”bra”?
Läsa snabbt?

Komma ihåg innehållet?

Utföra en uppgift?

View Slide

stenläggningen; stoj och hojt i fiskargången, segel och flaggor som fladdrade
 
ute på strömmen, måsarnes skri, hornsignaler från Skeppsholmen, gevärsrop
 
från Södermalmstorg, arbetshjonens klapprande med träskorna på
Glasbruksgatan, allt gjorde ett intryck av liv och rörlighet, som tycktes väcka
 
den unge herrens energi, ty nu hade hans ansikte antagit ett uttryck av trots
 
och levnadslust och beslutsamhet och, då han lutade sig över barriären och
 
såg ner på staden under sina fötter, var det som om han betraktade en fiende;
hans näsborrar vidgades, hans ögon flammade och han lyfte sin knutna hand,
som om han velat utmana den stackars staden eller hota den.
Times

48 / 66 p
 
1,2 rader

View Slide

Långt nere under honom bullrade den nyvaknade staden;
ångvinscharne snurrade nere i Stadsgårdshamnen, järnstängerna
skramlade i järnvågen, slussvaktarnes pipor visslade, ångbåtarne
vid Skeppsbron ångade, Kungsbacksomnibussarne hoppade
skallrande fram på den kullriga stenläggningen; stoj och hojt i
fiskargången, segel och flaggor som fladdrade
 
ute på strömmen, måsarnes skri, hornsignaler från Skeppsholmen,
gevärsrop från Södermalmstorg, arbetshjonens klapprande med
träskorna på Glasbruksgatan, allt gjorde ett intryck av liv och
rörlighet, som tycktes väcka den unge herrens energi, ty nu hade
hans ansikte antagit ett uttryck av trots och levnadslust och
beslutsamhet och, då han lutade sig över barriären och
 
Elever som fick en uppgift skriven med Comic Sans presterade bättre på examen än de som fick den skriven med Times.

View Slide

stenläggningen; stoj och hojt i fiskargången, segel och flaggor som
fladdrade ute på strömmen, måsarnes skri, hornsignaler från
med träskorna på Glasbruksgatan, allt gjorde ett intryck av liv och rörlighet,
som tycktes väcka den unge herrens energi, ty nu hade hans ansikte antagit
ett uttryck av trots och levnadslust och beslutsamhet och, då han lutade sig
över barriären och såg ner på staden under sina fötter, var det som om han
betraktade en fiende; hans näsborrar vidgades, hans ögon flammade och
Även de som fick uppgiften satt med Hattenschweiler presterade bättre på examen….

C Diemand-Yauman et al: Fortune favors the bold (and the italicized): Effects of disfluency of educational outcome.

Cognition 118, no 1 (Jan 2010)

View Slide

A
Läsning är ingen naturlig aktivitet

View Slide

Inkluderande
typografi

View Slide

Riktlinjer för tillgänglighet:

WCAG 2.1 (2.2)

(”vee-kagg”)
A AA AAA

View Slide

”Gör så här”
Sex posters från gov.uk

View Slide

Men länkar
Det regnar småspik
Regnet känns
 
som kalla spikar

View Slide


View Slide

Kontrast

View Slide

contrastchecker.online

accessible-colors.com

contrastchecker.com
Dålig kontrast,
svårläst text

View Slide


View Slide

WCAG om kontrast
• Textens kontrast mot bakgrund
 
ska vara minst 4,5:1.

• Stor stil

• större än 18 p, eller

• fetstil större än 14 p

• ska ha en kontrast på minimum 3:1.

View Slide

Vit text på färgad bakgrund – mager stil är svag.
Vit text på färgad bakgrund – använd fetstil.

View Slide

Kolla kontrasten
Det
fi
nns många verktyg och nät-tjänster.
 
Några exempel:

• contrastchecker.online

• accessible-colors.com

• contrastchecker.com

View Slide

Perus huvudstad
är Lima.

Guld har
atomnummer 79
Perus huvudstad
är Lima.

Guld har
atomnummer 79

View Slide

Var försiktig med
text i bild eller på
rörig bakgrund

View Slide


View Slide

Bilden mörktonad
under texten

View Slide

WCAG om textstorlek
• Minst 16 punkter för huvudsaklig text (brödtext)

• 16 punkter ≈ 21 pixlar

• Ingen de
fi
nitiv riktlinje, men en genomgående
rekommendation

View Slide

WCAG om övriga textattribut
• Radavstånd minst 1,5 gånger textens storlek (grad).

• Avstånd mellan stycken minst 2 gånger textens storlek.

• Bokstavsmellanrum minst 0,12 gånger textens storlek.

• Ordmellanrum minst 0,16 gånger textens storlek.

View Slide

Minska kognitiv belastning
Läsning är ingen naturlig aktivitet!

View Slide

42 % av vuxna
svenskar når
 
inte upp till nivån
”goda läsare”

De
fi
nition: Klara av att
söka efter information i en
lång, komplex text, tolka
innehållet och dra
slutsatser (nivå 3 av 5).
Källa: PIAAC-studien, 2013, SCB (stort antal OECD-länder)

View Slide

100 % har ont om tid

View Slide

isof.se

begripligtext.se
Några Klarspråks-resurser:

View Slide


View Slide

pudding.cool/2022/02/plain/

View Slide


View Slide

Viktigast för begriplighet
1. Rubrik som tydliggör textens område/syfte
 
(”Kan jag välja bort?”)

2. Det viktigaste först

3. Info i punktlistor

4. Ny tanke – nytt stycke

5. Mellanrum mellan stycken

6. Mellanrubriker som förklarar

7. Generöst radavstånd

8. Ingress, sammanfattning av text

View Slide

Det viktigaste först

View Slide

Rulla eller klicka?

Frågan om man bör dela upp materialet på många, korta sidor

eller ha längre sidor som måste rullas har debatterats hett.
 
Enligt äldre undersökningar verkade användare föredra korta
sidor. Men sedan dess har mängden gra
fi
k på sidorna ökat
kraftigt, med längre laddningstider som följd. Detta kan sannolikt
vara skälet till att nyare undersökningar tyder på att användarna
föredrar att rulla sidor i stället. Rullning är dessutom
 
ett accepterat arbetssätt när vi själva skriver på datorn,
 
i ett ordbehandlingsprogram.

View Slide

Läsaren rullar hellre än klickar

Dela inte upp materialet på alltför många, korta sidor.
Nyare undersökningar tyder på att läsarna föredrar att
rulla längre texter i stället.

Enligt äldre undersökningar verkade läsarna föredra korta
sidor. Att webbsidor idag har många
fl
er bilder, annonser
och animationer, vilket gör laddningstiden längre, har
troligen ändrat detta. Att rulla är dessutom ett bekant
arbetssätt, som läsarna är vana vid från till exempel
ordbehandlingsprogram. Det blir också besvärligt att
skriva ut en text om den är uppdelad på många sidor.
”accepterat arbetssätt” > bekant arbetssätt

”mängden gra
fi
k” > många
fl
er bilder, annonser och
animationer

View Slide


Dela inte upp materialet på alltför många, korta sidor. Nyare
undersökningar tyder på att läsarna föredrar att rulla längre
texter i stället.

Enligt äldre undersökningar verkade läsarna föredra korta sidor.
Att webbsidor idag har många
fl
er bilder, annonser och
animationer, vilket gör laddningstiden längre, har troligen ändrat
detta.
Budskapet går
fortfarande fram

View Slide


Dela inte upp materialet på alltför många, korta sidor. Nyare
undersökningar tyder på att läsarna föredrar att rulla längre
texter i stället.

Budskapet går
fortfarande fram

View Slide


Budskapet går
fortfarande fram!

View Slide

Träff #15 • Tillgänglig typografi, klarspråk • 31 jan • ht 22 UX Writing • Nackademin

Träff #15 • Tillgänglig typografi, klarspråk • 31 jan • ht 22 UX Writing • Nackademin

Jonas Söderström
PRO

More Decks by Jonas Söderström

Other Decks in Design

Featured

Transcript

Träff #15 • Tillgänglig typografi, klarspråk • 31 jan • ht 22 UX Writing • Nackademin

Träff #15 • Tillgänglig typografi, klarspråk • 31 jan • ht 22 UX Writing • Nackademin

Jonas Söderström PRO

More Decks by Jonas Söderström

Other Decks in Design

Featured

Transcript

Jonas Söderström
PRO