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

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

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

Jonas Söderström

January 24, 2023
Tweet

More Decks by Jonas Söderström

Other Decks in Design

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 • 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.
  3. 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
  4. 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
  5. 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
  6. 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
  7. 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
  8. Jonas Söderström • 2023 Älgbix Verdana Älgbix Älgbix Calibri Trebuchet

    Älgbix Open Sans Älgbix Lucida Grande Arial Älgbix
  9. 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
  10. 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
  11. 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
  12. 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
  13. Jonas Söderström • 2023 En annan detalj e a s

    e a s Adobe Garamond Helvetica
  14. 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
  15. 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
  16. Jonas Söderström • 2023 … och en smalare för opinions-

    artiklar NY Times har en måttligt smal rubrikstil för nyheter …