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

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

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

    View Slide

  2. Jonas Söderström • 2023
    Radavstånd
    Kan vara viktigare än storlek för god läsbarhet

    View Slide

  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)

    View Slide

  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

    View Slide

  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)

    View Slide

  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)

    View Slide

  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

    View Slide

  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)

    View Slide

  9. Jonas Söderström • 2023
    Brödtext ska ha
    extra radavstånd…
    …men rubriker
    minskat radavstånd!

    View Slide

  10. Jonas Söderström • 2023
    Rubrik med enkelt
    radavstånd

    View Slide

  11. Jonas Söderström • 2023
    Rubrik med 0,7
    radavstånd


    (224/194 p)

    View Slide

  12. Jonas Söderström • 2023
    VERSALER

    vs

    gemener

    View Slide

  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

    View Slide

  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

    View Slide

  15. Jonas Söderström • 2023
    Spärrning
    Att generellt minska bokstavsavståndet

    mellan alla bokstäver
    Knipning
    Knipning
    Knipning

    View Slide

  16. Jonas Söderström • 2023
    Hitta typsnitt

    View Slide

  17. Jonas Söderström • 2023
    fontscape.com

    View Slide

  18. Jonas Söderström • 2023
    www.myfonts.com/WhatTheFont/

    View Slide

  19. Jonas Söderström • 2023
    Plugin för Chrome

    View Slide

  20. Jonas Söderström • 2023
    Kombinera

    View Slide

  21. Jonas Söderström • 2023
    Star Wars
    A NEW BEGINNING
    Maximera kontraster:


    Stor – liten


    Rak – kursiv


    Script – linjär


    Versaler – gemener

    View Slide

  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

    View Slide

  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

    View Slide

  24. Jonas Söderström • 2022
    Vad är ”bra”?
    Läsa snabbt?


    Komma ihåg innehållet?


    Utföra en uppgift?

    View Slide

  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)

    View Slide

  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.


    View Slide

  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)

    View Slide

  28. Jonas Söderström • 2023
    A
    Läsning är ingen naturlig aktivitet

    View Slide

  29. Jonas Söderström • 2023
    Inkluderande
    typografi

    View Slide

  30. Jonas Söderström • 2022
    Riktlinjer för tillgänglighet:


    WCAG 2.1 (2.2)


    (”vee-kagg”)
    A AA AAA

    View Slide

  31. Jonas Söderström • 2022
    ”Gör så här”
    Sex posters från gov.uk

    View Slide

  32. Jonas Söderström • 2022
    Men länkar
    Det regnar småspik
    Regnet känns

    som kalla spikar

    View Slide

  33. Jonas Söderström • 2022

    View Slide

  34. Jonas Söderström • 2022

    View Slide

  35. Jonas Söderström • 2023
    Kontrast

    View Slide

  36. Jonas Söderström • 2022
    contrastchecker.online


    accessible-colors.com


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

    View Slide

  37. Jonas Söderström • 2023

    View Slide

  38. Jonas Söderström • 2022

    View Slide

  39. Jonas Söderström • 2022

    View Slide

  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.

    View Slide

  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.

    View Slide

  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

    View Slide

  43. Jonas Söderström • 2023
    Perus huvudstad
    är Lima.


    Guld har
    atomnummer 79
    Perus huvudstad
    är Lima.


    Guld har
    atomnummer 79

    View Slide

  44. Jonas Söderström • 2022
    Var försiktig med
    text i bild eller på
    rörig bakgrund

    View Slide

  45. Jonas Söderström • 2022

    View Slide

  46. Jonas Söderström • 2022
    Bilden mörktonad
    under texten

    View Slide

  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

    View Slide

  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.

    View Slide

  49. Jonas Söderström • 2022
    Minska kognitiv belastning
    Läsning är ingen naturlig aktivitet!

    View Slide

  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)

    View Slide

  51. Jonas Söderström • 2022
    100 % har ont om tid

    View Slide

  52. Jonas Söderström • 2022
    isof.se


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

    View Slide

  53. Jonas Söderström • 2022

    View Slide

  54. Jonas Söderström • 2022

    View Slide

  55. Jonas Söderström • 2022

    View Slide

  56. Jonas Söderström • 2022

    View Slide

  57. Jonas Söderström • 2022

    View Slide

  58. Jonas Söderström • 2022

    View Slide

  59. Jonas Söderström • 2022

    View Slide

  60. Jonas Söderström • 2022
    pudding.cool/2022/02/plain/

    View Slide

  61. Jonas Söderström • 2022

    View Slide

  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

    View Slide

  63. Jonas Söderström • 2022
    Det viktigaste först

    View Slide

  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.

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  68. Jonas Söderström • 2022
    Det viktigaste först
    Läsaren rullar hellre än klickar


    Budskapet går
    fortfarande fram!

    View Slide