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

Transcript

1. 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
2. Jonas Söderström • 2023 Radavstånd Kan vara viktigare än storlek för god läsbarhet
3. Jonas Söderström • 2023 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)
4. Jonas Söderström • 2023 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 57 p / Radavstånd 1
5. Jonas Söderström • 2023 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)
6. Jonas Söderström • 2023 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 48 / 66 p 
 1,2 rader August Strindberg: Röda Rummet (1879)
7. Jonas Söderström • 2023 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 47 / 71 p 
 1,35 rader August Strindberg: Röda Rummet (1879) Ju längre rader, 
 desto mer radavstånd
8. Jonas Söderström • 2023 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 47 / 1 radavstånd August Strindberg: Röda Rummet (1879)
9. Jonas Söderström • 2023 Brödtext ska ha extra radavstånd… …men rubriker minskat radavstånd!
10. Jonas Söderström • 2023 Rubrik med enkelt radavstånd
11. Jonas Söderström • 2023 Rubrik med 0,7 radavstånd (224/194 p)
12. Jonas Söderström • 2023 VERSALER 
 vs 
 gemener
13. Jonas Söderström • 2023 NO TIME TO DIE Överdelen av bokstäverna är de vi känner igen – vi läser i överkant NO TIME TO DIE
14. Jonas Söderström • 2023 Kerning Anpassa avståndet mellan speci fi ka bokstavspar L A LA T A TA V V A A
15. Jonas Söderström • 2023 Spärrning Att generellt minska bokstavsavståndet 
 mellan alla bokstäver Knipning Knipning Knipning
16. Jonas Söderström • 2023 Hitta typsnitt
17. Jonas Söderström • 2023 fontscape.com
18. Jonas Söderström • 2023 www.myfonts.com/WhatTheFont/
19. Jonas Söderström • 2023 Plugin för Chrome
20. Jonas Söderström • 2023 Kombinera
21. Jonas Söderström • 2023 Star Wars A NEW BEGINNING Maximera kontraster: Stor – liten Rak – kursiv Script – linjär Versaler – gemener
22. Jonas Söderström • 2023 NO TIME TO DIE In her Majesty’s Secret Service Maximera kontraster: Stor – liten Smal – bred Linjär – realantikva Versaler – gemener
23. Jonas Söderström • 2023 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, 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 Charter för rubrik, kanske på två rader Myriad: 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, Avenir för rubrik, kanske på två rader Open Sans: 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 H E M S Ö K KÖ P H E M S Ö K KÖ P H E M S Ö K KÖ P
24. Jonas Söderström • 2022 Vad är ”bra”? Läsa snabbt? Komma ihåg innehållet? Utföra en uppgift?
25. Jonas Söderström • 2023 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 
 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 August Strindberg: Röda Rummet (1879)
26. Jonas Söderström • 2023 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.
27. Jonas Söderström • 2023 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 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)
28. Jonas Söderström • 2023 A Läsning är ingen naturlig aktivitet
29. Jonas Söderström • 2023 Inkluderande typografi
30. Jonas Söderström • 2022 Riktlinjer för tillgänglighet: WCAG 2.1 (2.2) (”vee-kagg”) A AA AAA
31. Jonas Söderström • 2022 ”Gör så här” Sex posters från gov.uk
32. Jonas Söderström • 2022 Men länkar Det regnar småspik Regnet känns 
 som kalla spikar
33. Jonas Söderström • 2022
34. Jonas Söderström • 2022
35. Jonas Söderström • 2023 Kontrast
36. Jonas Söderström • 2022 contrastchecker.online accessible-colors.com contrastchecker.com Dålig kontrast, svårläst text
37. Jonas Söderström • 2023
38. Jonas Söderström • 2022
39. Jonas Söderström • 2022
40. Jonas Söderström • 2022 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.
41. Jonas Söderström • 2023 Vit text på färgad bakgrund – mager stil är svag. Vit text på färgad bakgrund – använd fetstil.
42. Jonas Söderström • 2022 Kolla kontrasten Det fi nns många verktyg och nät-tjänster. 
 Några exempel: • contrastchecker.online • accessible-colors.com • contrastchecker.com
43. Jonas Söderström • 2023 Perus huvudstad är Lima. Guld har atomnummer 79 Perus huvudstad är Lima. Guld har atomnummer 79
44. Jonas Söderström • 2022 Var försiktig med text i bild eller på rörig bakgrund
45. Jonas Söderström • 2022
46. Jonas Söderström • 2022 Bilden mörktonad under texten
47. Jonas Söderström • 2022 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
48. Jonas Söderström • 2022 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.
49. Jonas Söderström • 2022 Minska kognitiv belastning Läsning är ingen naturlig aktivitet!
50. Jonas Söderström • 2022 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)
51. Jonas Söderström • 2022 100 % har ont om tid
52. Jonas Söderström • 2022 isof.se begripligtext.se Några Klarspråks-resurser:
53. Jonas Söderström • 2022
54. Jonas Söderström • 2022
55. Jonas Söderström • 2022
56. Jonas Söderström • 2022
57. Jonas Söderström • 2022
58. Jonas Söderström • 2022
59. Jonas Söderström • 2022
60. Jonas Söderström • 2022 pudding.cool/2022/02/plain/
61. Jonas Söderström • 2022
62. Jonas Söderström • 2022 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
63. Jonas Söderström • 2022 Det viktigaste först
64. Jonas Söderström • 2022 Det viktigaste först 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.
65. Jonas Söderström • 2022 Det viktigaste först 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
66. Jonas Söderström • 2022 Det viktigaste först 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. Budskapet går fortfarande fram
67. Jonas Söderström • 2022 Det viktigaste först 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. Budskapet går fortfarande fram
68. Jonas Söderström • 2022 Det viktigaste först Läsaren rullar hellre än klickar Budskapet går fortfarande fram!