Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Träff #15 • Tillgänglig typografi, klarspråk • ...

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

Avatar for Jonas Söderström

Jonas Söderström

January 31, 2023
Tweet

More Decks by Jonas Söderström

Other Decks in Design

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 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)
  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 57 p / Radavstånd 1
  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 52 p / Radavstånd 1 August Strindberg: Röda Rummet (1879)
  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 48 / 66 p 
 1,2 rader 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 47 / 71 p 
 1,35 rader August Strindberg: Röda Rummet (1879) Ju längre rader, 
 desto mer radavstånd
  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 / 1 radavstånd August Strindberg: Röda Rummet (1879)
  8. 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
  9. Jonas Söderström • 2023 Star Wars A NEW BEGINNING Maximera

    kontraster: Stor – liten Rak – kursiv Script – linjär Versaler – gemener
  10. 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
  11. 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
  12. 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)
  13. 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.
  14. 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)
  15. 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.
  16. Jonas Söderström • 2023 Vit text på färgad bakgrund –

    mager stil är svag. Vit text på färgad bakgrund – använd fetstil.
  17. 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
  18. Jonas Söderström • 2023 Perus huvudstad är Lima. Guld har

    atomnummer 79 Perus huvudstad är Lima. Guld har atomnummer 79
  19. 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
  20. 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.
  21. 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)
  22. 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
  23. 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.
  24. 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
  25. 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
  26. 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