Träff #14 • Webbtypogtafi för läsbarhet • ht 22 UX Writing • Nackademin

Transcript

1. Jonas Söderström • 2023
   Typografi för läsbarhet
   
   
   Praktikfall: Linda K!
   
   
   Textdesign för läsbarhet
   

   (icke-webb!)
   UX writing • Trä
   ff
   #14 • 24 januari
   Jonas Söderström • Nackademin • Ht 2022 • Kvartsfart
   

   View Slide

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

   View Slide

3. Jonas Söderström • 2023
   Läsning och
   förståelse är målet
   Typogra
   fi
   är verktygen
   

   View Slide

4. Jonas Söderström • 2023
   Vilket typsnitt är bäst?
   
   
   Storlek?
   
   
   Hur långa rader?
   Grunderna
   

   View Slide

5. Jonas Söderström • 2023
   ”En undersökning visar …”
   Ta det med en nypa salt.
   

   View Slide

6. Jonas Söderström • 2023
   • Läsning är extremt komplext och resultaten
   

   kan till stor del vara motstridiga, beroende på
   textens storlek, läsarens avstånd till den,
   belysningen, innehållet etc…
   • Även om ett resultat tycks vara att en design
   läses ”snabbare” eller ”lättare”, kan skillnaderna
   vara små i praktiken.
   
   
   • Människor har ofta en annan uppfattning om
   läshastighet etc, än vad tidtagaruret säger.
   

   View Slide

7. Jonas Söderström • 2023
   Display-typsnitt
   (eller rubrik-typsnitt)
   vs bröd-typsnitt
   

   View Slide

8. Jonas Söderström • 2023
   Långt nere under
   honom bullrade den
   nyvaknade staden;
   
   
   Långt nere under
   honom bullrade den
   nyvaknade staden;
   
   
   Långt nere under
   honom bullrade den
   nyvaknade staden;
   Röda Rummet
   
   
   Röda Rummet
   
   
   Röda Rummet
   
   
   Röda Rummet
   
   
   Röda Rummet
   
   
   Röda Rummet
   Brödtext Display
   

   View Slide

9. Jonas Söderström • 2023
   Star Wars
   LOve actually
   BABBLARNA
   

   View Slide

10. Jonas Söderström • 2023
    Brödtext &
    allmänt
    

    View Slide

11. Jonas Söderström • 2023
    Aalborg
    Två grundtyper
    Aalborg Antikva
    
    
    Serif-typsnitt
    Linjär
    
    
    Grotesk
    
    
    Sans serif
    Anses numer lika lättlästa
    g
    g
    Serif
    Serif
    

    View Slide

12. Jonas Söderström • 2023
    A
    Typsnittsformer
    A
    Linjär
    
    
    Grotesk
    
    
    Sans serif
    Antikva
    
    
    Serif-typsnitt
    
    
    Medieval-
    antikva
    
    
    Garald
    Didon
    
    
    Nyantikva
    A
    Mekan
    
    
    Egyptienne
    
    
    Slab serif
    A
    Real
    
    
    Transantikva
    A
    

    View Slide

13. Jonas Söderström • 2023
    A
    A
    Futura
    
    
    Helvetica
    
    
    Frutiger
    
    
    Garamond
    
    
    Berling
    
    
    Bembo
    
    
    Minion
    
    
    Goudy Old
    Style
    Didot
    
    
    Bodoni
    A
    Rockwell
    
    
    Clarendon
    
    
    Memphis
    
    
    Beton
    
    
    A
    Baskerville
    
    
    Times
    A
    Typsnitt har namn – tidigare ofta efter formgivaren eller uppdragsgivaren (tryckeri/tidning)
    Linjärer har varit populära för skärmar,
    pga sämre upplösning än papper
    

    View Slide

14. Jonas Söderström • 2023
    Olika typsnitt i samma grad
    

    framträder i olika storlek på skärmen.
    Älgx Älgx Älgx
    Monaco 175 p Trebuchet 175 p Adobe Garamond 175 p
    Ä 175 p
    

    View Slide

15. Jonas Söderström • 2023
    Älgbix
    Verdana
    Älgbix
    Älgbix
    Calibri
    Trebuchet
    Älgbix
    Open Sans
    Älgbix
    Lucida
    Grande
    Arial
    Älgbix
    

    View Slide

16. Jonas Söderström • 2023
    Skillnader i bokstavsformer
    skapar olika grad av svärta
    eller ljushet i textbilden
    Man strävar normalt efter en ”lagom” svärta
    

    View Slide

17. Jonas Söderström • 2023
    Långt nere under honom
    bullrade den nyvaknade
    staden; ångvinscharne
    snurrade nere i Stads-
    gårdshamnen, järn-
    stängerna skramlade i
    järnvågen, slussvaktarnes
    pipor visslade,
    ångbåtarne vid
    Skeppsbron ångade,
    Kungsbacksomnibussarn
    e hoppade skallrande
    fram på den kullriga
    stenläggningen;
    Långt nere under
    honom bullrade den
    nyvaknade staden;
    ångvinscharne snurrade
    nere i Stadsgårds-
    hamnen, järnstängerna
    skramlade i järnvågen,
    slussvaktarnes pipor
    visslade, ångbåtarne vid
    Skeppsbron ångade,
    Kungsbacksomnibussar
    ne hoppade skallrande
    fram på den kullriga
    stenläggningen;
    Långt nere under honom
    bullrade den nyvaknade
    staden; ångvinscharne
    snurrade nere i Stads-
    gårdshamnen, järn-
    stängerna skramlade i
    järnvågen, sluss-
    vaktarnes pipor visslade,
    ångbåtarne vid Skepps-
    bron ångade,
    Kungsbacksomni-
    bussarne hoppade
    skallrande fram på den
    kullriga stenläggningen;
    ITC Garamond Adobe Garamond Sectra
    

    View Slide

18. Jonas Söderström • 2023
    Slutna former
    

    eller öppna
    

    View Slide

19. Jonas Söderström • 2023
    oceas
    Slutna former gör bokstäverna svåra att skilja från varandra i små grader
    oceas oceas
    g
    Mabry Myriad
    Open Sans
    Helvetica
    29
    Mabry
    29
    Open Sans
    g
    oceas
    Myriad
    Helvetica
    

    View Slide

20. Jonas Söderström • 2023
    Ill
    Bokstavsformer och bokstavspar bör vara distinkta!
    Ill
    Helvetica Tahoma
    Ill
    Trebuchet
    !"
    Arial Avenir
    nh #$
    Helvetica BBC Reith
    bd bd
    Atkinson
    Hyperlegible
    Ill
    Atkinson Hyperlegible
    ij
    Helvetica Tahoma
    ij
    Mabry
    ij ij
    Atkinson
    Hyperlegible
    %&'#
    Helvetica Trebuchet
    lo b lo b
    Atkinson
    Hyperlegible
    

    View Slide

21. Jonas Söderström • 2023
    • Atkinson Hyperlegible
    

    View Slide

22. Jonas Söderström • 2023
    En annan detalj
    e a s e a s
    Adobe Garamond
    Helvetica
    

    View Slide

23. Jonas Söderström • 2023
    x-höjd
    xnh73 %
    Century Gothic
    xnh55 %
    Adobe Garamond
    

    View Slide

24. Jonas Söderström • 2023
    xnh
    xnh
    xnh
    xnh
    73 %
    69 %
    52 %
    72 %
    Cochin Myriad
    Century Gothic
    Trebuchet
    xnh
    Open Sans
    72 %
    xnh55 %
    Adobe Garamond
    xnh63 %
    Minion
    

    View Slide

25. Jonas Söderström • 2023
    Proportioner
    

    View Slide

26. Jonas Söderström • 2023
    Många sajter/appar
    använder högsmala
    typsnitt (”condensed”)
    
    
    för att få in tillräckligt
    med information på
    smala mobilskärmar.
    Älgbix
    Älgbix
    Älgbix
    Myriad Condensed
    Blair MD ITC
    Myriad Normal
    

    View Slide

27. Jonas Söderström • 2023
    … för rubriker
    

    View Slide

28. Jonas Söderström • 2023
    … men också för knappar
    

    View Slide

29. Jonas Söderström • 2023
    … och en
    smalare för
    opinions-
    artiklar
    NY Times har
    en måttligt
    smal
    rubrikstil för
    nyheter …
    

    View Slide