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
2. Jonas Söderström • 2023 A Läsning är ingen naturlig aktivitet
3. Jonas Söderström • 2023 Läsning och förståelse är målet Typogra fi är verktygen
4. Jonas Söderström • 2023 Vilket typsnitt är bäst? Storlek? Hur långa rader? Grunderna
5. Jonas Söderström • 2023 ”En undersökning visar …” Ta det med en nypa salt.
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.
7. Jonas Söderström • 2023 Display-typsnitt (eller rubrik-typsnitt) vs bröd-typsnitt
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
9. Jonas Söderström • 2023 Star Wars LOve actually BABBLARNA
10. Jonas Söderström • 2023 Brödtext & allmänt
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
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
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
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
15. Jonas Söderström • 2023 Älgbix Verdana Älgbix Älgbix Calibri Trebuchet Älgbix Open Sans Älgbix Lucida Grande Arial Älgbix
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
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
18. Jonas Söderström • 2023 Slutna former 
 eller öppna
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
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
21. Jonas Söderström • 2023 • Atkinson Hyperlegible
22. Jonas Söderström • 2023 En annan detalj e a s e a s Adobe Garamond Helvetica
23. Jonas Söderström • 2023 x-höjd xnh73 % Century Gothic xnh55 % Adobe Garamond
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
25. Jonas Söderström • 2023 Proportioner
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
27. Jonas Söderström • 2023 … för rubriker
28. Jonas Söderström • 2023 … men också för knappar
29. Jonas Söderström • 2023 … och en smalare för opinions- artiklar NY Times har en måttligt smal rubrikstil för nyheter …