Slide 1

Slide 1 text

Jonas Söderström • 2023 Typografi Trä ff 16 • Onsdag 8 november Jonas Söderström • Ht 23 • UX Writing • Nackademin

Slide 2

Slide 2 text

Jonas Söderström • 2022

Slide 3

Slide 3 text

Jonas Söderström • 2023 22 november: Ditt bästa exempel? • Något som du är stolt över? Något som du tycker ”Det här blev faktiskt bra” – stort eller smått. • Var inte blyg! (Alla är snälla här.) 🫣

Slide 4

Slide 4 text

Jonas Söderström • 2022 Repetition UX research

Slide 5

Slide 5 text

Jonas Söderström • 2022 Vad undersöker vi? ▸ Hur kan vi öka tiden varje besökare spenderar hos oss? ▸ Undrar om de kan handla nu när vi fl yttat ”köp”- knappen? ▸ Hur gör folk med all frukt? Finns det någon affärsmöjlig- het där? ▸ Vilka saker är viktiga för den som ska hyra båtplats i kommunen? Design / detalj Affär / förutsättningar

Slide 6

Slide 6 text

Jonas Söderström • 2023

Slide 7

Slide 7 text

Jonas Söderström • 2023 Intervju och obser- vation i miljö

Slide 8

Slide 8 text

Jonas Söderström • 2022 Webbtypografi

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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.

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

Jonas Söderström • 2023 Mission Impossible SVINDLANDE HÖJDER

Slide 17

Slide 17 text

Jonas Söderström • 2023 Brödtext och allmänt

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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 Ä

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

Jonas Söderström • 2023 Slutna former eller öppna

Slide 26

Slide 26 text

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 Atkinson Hyperlegible Helvetica 29 Mabry 29 Open Sans g oceas Myriad Helvetica

Slide 27

Slide 27 text

Jonas Söderström • 2023 Ill Bokstavsformer och bokstavspar bör vara distinkta! Ill Helvetica Tahoma Ill Trebuchet nh Arial Avenir nh Ill Atkinson Hyperlegible lo b Helvetica Trebuchet lo b lo b Atkinson Hyperlegible

Slide 28

Slide 28 text

Jonas Söderström • 2023 Bokstavsformer och bokstavspar bör vara distinkta! bd Helvetica BBC Reith bd bd Atkinson Hyperlegible ij Helvetica Tahoma ij Mabry ij ij Atkinson Hyperlegible pq Helvetica BBC Reith pq pq Atkinson Hyperlegible

Slide 29

Slide 29 text

Jonas Söderström • 2023 • Atkinson Hyperlegible

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

Jonas Söderström • 2023 Proportioner

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

Jonas Söderström • 2022 WCAG:s riktlinjer för typografi

Slide 39

Slide 39 text

Jonas Söderström • 2023 WCAG om textstorlek • Minst 16 punkter för huvudsaklig text (brödtext) • 16 punkter ≈ 21 pixlar • Ingen definitiv riktlinje, men en genomgående rekommendation

Slide 40

Slide 40 text

Jonas Söderström • 2023 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.

Slide 41

Slide 41 text

Jonas Söderström • 2023 Maximal radlängd ≈ 56 tecken = två alfabet

Slide 42

Slide 42 text

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, Kungs- backsomnibussarne hoppade skallrande fram på den kullriga sten- lä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 Adobe Garamond 47 / 71 p 1,25 rader August Strindberg: Röda Rummet (1879) ≈ 58 tecken

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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, Kungs- backsomnibussarne hoppade skallrande fram på den kullriga sten- lä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 Adobe Garamond 47 / 71 p 1,35 rader August Strindberg: Röda Rummet (1879) Ju längre rader, desto mer radavstånd

Slide 45

Slide 45 text

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å Adobe Garamond 47 / 1 radavstånd August Strindberg: Röda Rummet (1879) Kortare rader, mindre radavstånd

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

Jonas Söderström • 2023 Rubrik med 0,7 radavstånd (224/194 p)

Slide 49

Slide 49 text

Jonas Söderström • 2023 VERSALER vs gemener

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

Jonas Söderström • 2023 Kerning Anpassa avståndet mellan speci fi ka bokstavspar L A LA T A TA V V A A 👎 👍

Slide 52

Slide 52 text

Jonas Söderström • 2023 Spärrning Att generellt minska bokstavsavståndet mellan alla bokstäver Knipning Knipning Knipning

Slide 53

Slide 53 text

Jonas Söderström • 2023 22 november: Ditt bästa exempel? • Något som du är stolt över? Något som du tycker ”Det här blev faktiskt bra” – stort eller smått. • Var inte blyg! (Alla är snälla här.) 🫣

Slide 54

Slide 54 text

Jonas Söderström 2023 Textdesign Hur vi gör fi xerad text maximalt läsbar, till exempel i pdf:er eller i presentationer (Powerpoint). Alla exempel med ojämn högermarginal.

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

While the methods and the amount of collaboration required may di ff er, what goes for individuals goes for organizations. Every single time you are faced with a decision, you need to ask “Do we have the right information to make this decision?” If you are continuously making decisions, you need to continuously ensure that those decisions are well-informed. Of course it feels easier to make things without asking questions. It always will. Like everything else uncomfortable in life, if you don’t make a habit out of it and connect it to rewards, you will fi nd excuses to avoid it. Th is is as true for organizations as it is for everyone eating Pringles on the sofa wishing they wanted to motivate.

Slide 57

Slide 57 text

While the methods and the amount of collaboration required may di ff er, what goes for individuals goes for organizations. Every single time you are faced with a decision, you need to ask “Do we have the right information to make this decision?” If you are continuously making decisions, you need to continuously ensure that those decisions are well-informed. Of course it feels easier to make things without asking questions. It always will. Like everything else uncomfortable in life, if you don’t make a habit out of it and connect it to rewards, you will fi nd excuses to avoid it. Th is is as true for organizations as it is for everyone eating Pringles on the sofa wishing they wanted to motivate. Håll ihop tankar och uttryck över radbrytningar.

Slide 58

Slide 58 text

While the methods and the amount of collaboration required may di ff er, what goes for individuals goes for organizations. Every single time you are faced with a decision, you need to ask “Do we have the right information to make this decision?” If you are continuously making decisions, you need to continuously ensure that those decisions are well-informed. Of course it feels easier to make things without asking questions. It always will. Like everything else uncomfortable in life, if you don’t make a habit out of it and connect it to rewards, you will fi nd excuses to avoid it. Th is is as true for organizations as it is for everyone eating Pringles on the sofa wishing they wanted to motivate. Håll ihop tankar och uttryck över radbrytningar. • Mellan preposition och sitt huvudord (i Stockholm) • Mellan verb och verbpartikel (bryta av) • Mellan antals-si ff ra och sitt huvudord (100 slajds) • Mellan bestämd artikel och sitt huvudord (ett bord) • I sammansatta uttryck (project manager) • Efter första ordet i en mening • Efter första ordet i en bisats (… sajten, som …) Bryt inte:

Slide 59

Slide 59 text

Håll ihop tankar och uttryck över radbrytningar. Gäller även rubriker!

Slide 60

Slide 60 text

Två animerade slajds efter denna

Slide 61

Slide 61 text

While the methods and the amount of collaboration required may di ff er, what goes for individuals goes for organizations. Every single time you are faced with a decision, you need to ask “Do we have the right information to make this decision?” If you are continuously making decisions, you need to continuously ensure that those decisions are well-informed. Of course it feels easier to make things without asking questions. It always will. Like everything else uncomfortable in life, if you don’t make a habit out of it and connect it to rewards, you will fi nd excuses to avoid it. Th is is as true for organizations as it is for everyone eating Pringles on the sofa wishing they wanted to motivate. Se om du kan dela stycket i två (eller fl era), för att skapa mer en mer lätthanterlig textmassa. När ett stycke har en kort eller väldigt kort utgångsrad: Leta efter en mening som börjar längre in på raden, och som börjar en ny tanke.

Slide 62

Slide 62 text

While the methods and the amount of collaboration required may di ff er, what goes for individuals goes for organizations. Every single time you are faced with a decision, you need to ask “Do we have the right information to make this decision?” If you are continuously making decisions, you need to continuously ensure that those decisions are well-informed. Of course it feels easier to make things without asking questions. It always will. Like everything else uncomfortable in life, if you don’t make a habit out of it and connect it to rewards, you will fi nd excuses to avoid it. Th is is as true for organizations as it is for everyone eating Pringles on the sofa wishing they wanted to motivate. Se om du kan dela stycket i två (eller fl era), för att skapa mer en mer lätthanterlig textmassa. När ett stycke har en kort eller väldigt kort utgångsrad: Leta efter en mening som börjar längre in på raden, och som börjar en ny tanke.

Slide 63

Slide 63 text

While the methods and the amount of collaboration required may di ff er, what goes for individuals goes for organizations. Every single time you are faced with a decision, you need to ask “Do we have the right information to make this decision?” If you are continuously making decisions, you need to continuously ensure that those decisions are well-informed. Of course it feels easier to make things without asking questions. It always will. Like everything else uncomfortable in life, if you don’t make a habit out of it and connect it to rewards, you will fi nd excuses to avoid it. Th is is as true for organizations as it is for everyone eating Pringles on the sofa wishing they wanted to motivate. Även om det vita utrymmet på slutraden är litet: se om det fi nns någon mening som börjar nära slutet av en rad.

Slide 64

Slide 64 text

While the methods and the amount of collaboration required may di ff er, what goes for individuals goes for organizations. Every single time you are faced with a decision, you need to ask “Do we have the right information to make this decision?” If you are continuously making decisions, you need to continuously ensure that those decisions are well-informed. Of course it feels easier to make things without asking questions. It always will. Like everything else uncomfortable in life, if you don’t make a habit out of it and connect it to rewards, you will fi nd excuses to avoid it. Th is is as true for organizations as it is for everyone eating Pringles on the sofa wishing they wanted to motivate. Nytt stycke med kort utgångsrad! Fortfarande gäller att dela upp texten efter tanke-innehållet. Bryt inte mellan två meningar som hänger tätt ihop.

Slide 65

Slide 65 text

While the methods and the amount of collaboration required may di ff er, what goes for individuals goes for organizations. Every single time you are faced with a decision, you need to ask “Do we have the right information to make this decision?” If you are continuously making decisions, you need to continuously ensure that those decisions are well-informed. Of course it feels easier to make things without asking questions. It always will. Like everything else uncomfortable in life, if you don’t make a habit out of it and connect it to rewards, you will fi nd excuses to avoid it. Th is is as true for organizations as it is for everyone eating Pringles on the sofa wishing they wanted to motivate. Två alternativ: indrag i början av raden, eller lite extra avstånd mella styckena.

Slide 66

Slide 66 text

While the methods and the amount of collaboration required may di ff er, what goes for individuals goes for organizations. Every single time you are faced with a decision, you need to ask “Do we have the right information to make this decision?” If you are continuously making decisions, you need to continuously ensure that those decisions are well-informed. Of course it feels easier to make things without asking questions. It always will. Like everything else uncomfortable in life, if you don’t make a habit out of it and connect it to rewards, you will fi nd excuses to avoid it. Th is is as true for organizations as it is for everyone eating Pringles on the sofa wishing they wanted to motivate. Två alternativ: indrag i början av raden, eller lite extra avstånd mella styckena.

Slide 67

Slide 67 text

While the methods and the amount of collaboration required may di ff er, what goes for individuals goes for organizations. Every single time you are faced with a decision, you need to ask “Do we have the right information to make this decision?” If you are continuously making decisions, you need to continuously ensure that those decisions are well-informed. Of course it feels easier to make things without asking questions. It always will. Like everything else uncomfortable in life, if you don’t make a habit out of it and connect it to rewards, you will fi nd excuses to avoid it. Th is is as true for organizations as it is for everyone eating Pringles on the sofa wishing they wanted to motivate. Två alternativ: indrag i början av raden, eller lite extra avstånd mellan styckena.

Slide 68

Slide 68 text

While the methods and the amount of collaboration required may di ff er, what goes for individuals goes for organizations. Every single time you are faced with a decision, you need to ask “Do we have the right information to make this decision?” If you are continuously making decisions, you need to continuously ensure that those decisions are well-informed. Of course it feels easier to make things without asking questions. It always will. Like everything else uncomfortable in life, if you don’t make a habit out of it and connect it to rewards, you will fi nd excuses to avoid it. Th is is as true for organizations as it is for everyone eating Pringles on the sofa wishing they wanted to motivate.

Slide 69

Slide 69 text

While the methods and the amount of collaboration required may di ff er, what goes for individuals goes for organizations. Every single time you are faced with a decision, you need to ask “Do we have the right information to make this decision?” If you are continuously making decisions, you need to continuously ensure that those decisions are well-informed. Of course it feels easier to make things without asking questions. It always will. Like everything else uncomfortable in life, if you don’t make a habit out of it and connect it to rewards, you will fi nd excuses to avoid it. Th is is as true for organizations as it is for everyone eating Pringles on the sofa wishing they wanted to motivate. Finns det något mer vi kan göra?

Slide 70

Slide 70 text

While the methods and the amount of collaboration required may di ff er, what goes for individuals goes for organizations. Every single time you are faced with a decision, you need to ask “Do we have the right information to make this decision?” If you are continuously making decisions, you need to continuously ensure that those decisions are well-informed. Of course it feels easier to make things without asking questions. It always will. Like everything else uncomfortable in life, if you don’t make a habit out of it and connect it to rewards, you will fi nd excuses to avoid it. Th is is as true for organizations as it is for everyone eating Pringles on the sofa wishing they wanted to motivate. Jag använder ofta kursiv för att signalera citat eller titlar, men också för en medelstark betoning. Finns det mer vi kan göra?

Slide 71

Slide 71 text

While the methods and the amount of collaboration required may di ff er, what goes for individuals goes for organizations. Every single time you are faced with a decision, you need to ask “Do we have the right information to make this decision?” If you are continuously making decisions, you need to continuously ensure that those decisions are well-informed. Of course it feels easier to make things without asking questions. It always will. Like everything else uncomfortable in life, if you don’t make a habit out of it and connect it to rewards, you will fi nd excuses to avoid it. Th is is as true for organizations as it is for everyone eating Pringles on the sofa wishing they wanted to motivate. Typogra fi är tonläge.

Slide 72

Slide 72 text

While the methods and the amount of collaboration required may di ff er, what goes for individuals goes for organizations. Every single time you are faced with a decision, you need to ask “Do we have the right information to make this decision?” If you are continuously making decisions, you need to continuously ensure that those decisions are well-informed. Of course it feels easier to make things without asking questions. It always will. Like everything else uncomfortable in life, if you don’t make a habit out of it and connect it to rewards, you will fi nd excuses to avoid it. Th is is as true for organizations as it is for everyone eating Pringles on the sofa wishing they wanted to motivate. Från detta …

Slide 73

Slide 73 text

While the methods and the amount of collaboration required may di ff er, what goes for individuals goes for organizations. Every single time you are faced with a decision, you need to ask “Do we have the right information to make this decision?” If you are continuously making decisions, you need to continuously ensure that those decisions are well-informed. Of course it feels easier to make things without asking questions. It always will. Like everything else uncomfortable in life, if you don’t make a habit out of it and connect it to rewards, you will fi nd excuses to avoid it. Th is is as true for organizations as it is for everyone eating Pringles on the sofa wishing they wanted to motivate. … till detta.

Slide 74

Slide 74 text

Jonas Söderström • 2023 Testa text, SEO Uppgift 3 Bild på webb, Mer UX-text = ni får inlämningsuppgift Vecka 46 Onsdag November 15 Flöden, UX-process Vecka 47 Måndag November 20 Onsdag November 22 Några digitala egenheter, Ditt bästa exempel Måndag November 13