Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
Brukeropplevelse
Yggdrasil 2015
av Kristin Kokkersvold, Studio Netting
Typografi først
The web is 95% typography
Oliver Reichenstein, 2006
h"ps://ia.net/know-­‐how/the-­‐web-­‐is-­‐all-­‐about-­‐typography-­‐p...
Da og nå
2006 2015
Typografi først
Mars april
Grunnleggende anatomi
Seriff	
  
x-­‐høyde	
  
Grunnstrek	
  
Hårstrek	
  
Underlengde	
  
Overlengde	
  
Versal...
De tre bukkene Bruse
Det var engang tre bukker som
skulle gå til seters og gjøre seg
fete, og alle tre så hette de Bukken
...
Hinting
Bildet	
  er	
  lånt	
  fra:	
  h"ps://www.typotheque.com/arJcles/hinJng
Typografi er
kommunikasjon
Identitet
Forskjellige skrifttyper
Serif Sans-serif
Slab-serif Script
Display Monospace
Hvordan velge?
•  Visuell profil? Erstatningsfont for web?
•  Merkevare og verdier
•  Type innhold
Hold det enkelt
•  Hold deg til en eller to skriftsnitt
•  Kontrast
•  Kombinasjon av en sans-serif og serif
•  Forskjelli...
§
Universell utforming
W C A G 2 . 0 A A
h"p://uu.difi.no/	
  
Metode for å velge
Lesbarhet Fleksibilitet Skjerm Det lille
ekstra
x-høyde
Åpenhet
Under- og
overlengder
Mellom-
rom
1 l I...
Design innholdet
i nettleseren
Sette teksten
•  Fontstørrelse
•  Linjelengde
•  Linjehøyde
•  Hierarki
•  Gruppering
•  Luft
> eksempel
Typografiske grep
Mellomrom
Uten kerning:
Optisk kerning:
75% sperring:
Bokstav-mellomrom
p {
text-rendering: optimizeLegibility; /* optional: for older
browsers */
-moz-font-feature-settings: "...
Tekstbokser
•  Korte linjer, lavere linjehøyde
•  Lys tekst på mørk bakgrunn
Versaler
TEKST KUN I VERSALER KAN VÆRE
TUNGT Å LESE. MEN KAN FUNGERE
PÅ OVERSKRIFTER ELLER KORTE
TEKSTER.
Fet og kursiv
•  Fet og kursiv senker lesbarheten
•  Unngå falsk bold og kursiv
Ligaturer
Ligaturer
h1, h2, h3, h4, h5, h6 {
text-rendering: optimizeLegibility; /* optional: for older
browsers */
-webkit-font-var...
Andre typografiske grep
Dårlig nettleser-støtte, prøv dropcap.js
p+p {
text-indent: 1.5;
}
p:first-child:first-line {
font-...
Responsivt
•  Små skjermer = kortere linjelengder
•  Kontekst
Bønn til skribenten
•  Bruk riktige HTML-koder
•  Bruk riktig tegn
•  Begrens kursiv og bold
Beyond the basics
•  Javascript for full kontroll, f.eks. type.js
•  Baseline grid for web
Ti huskeregler
1.  Velg en lesbar skrifttype
2.  Skriften skal stå til innholdet
3.  God skriftstørrelse
4.  Linjelengde p...
Verktøy og ressurser
•  Typecast.com
•  Type on screen og Thinking with type av Ellen Lupton
•  Utviklerverktøyet i nettle...
Takk for meg!
Twitter: @kekkakokkers
Epost: kristin@studionetting.no
Mobil: 911 07 367
Husk, god typografi redder ikke dårl...
Typografi først
Typografi først
Typografi først
Typografi først
Typografi først
Typografi først
Prochain SlideShare
Chargement dans…5
×
Prochain SlideShare
Yggdrasil 2015 Smidig i alle ledd – gjør det riktig da for %#¤/!!
Suivant
Télécharger pour lire hors ligne et voir en mode plein écran

3

Partager

Télécharger pour lire hors ligne

Typografi først

Télécharger pour lire hors ligne

Foredrag holdt på Yggdrasil 14. april 2015

”Content is still king”, og noen hevder at web er 95% typografi. Hvordan presenterer du innholdet ditt?

Typografi er verktøykassen for å formidle tekstene våre. Det begynner å bli endel år siden fasiten var sans-serif og 12 piksler. Vi har fått et hav av typesnitt og nettbrukeren har beveget seg fra desktop til mobil.

Hvordan designer man lesbare nettsider med en tydelig visuell identitet? Kristin går igjennom tekst-anatomi og hierarki , fontvalg og praktiske tips til bedre lesbarhet og tilgjengelighet

Typografi først

  1. 1. Brukeropplevelse Yggdrasil 2015 av Kristin Kokkersvold, Studio Netting Typografi først
  2. 2. The web is 95% typography Oliver Reichenstein, 2006 h"ps://ia.net/know-­‐how/the-­‐web-­‐is-­‐all-­‐about-­‐typography-­‐period  
  3. 3. Da og nå 2006 2015
  4. 4. Typografi først
  5. 5. Mars april Grunnleggende anatomi Seriff   x-­‐høyde   Grunnstrek   Hårstrek   Underlengde   Overlengde   Versal   Minuskel  
  6. 6. De tre bukkene Bruse Det var engang tre bukker som skulle gå til seters og gjøre seg fete, og alle tre så hette de Bukken Bruse. På veien var det en bro over en foss, som de skulle over, og under den broen bodde et stort, fælt troll, med øyne som tinntallerkener, og nese så lang som et riveskaft. Først så kom den yngste Bukken Bruse og skulle over broen. Tripp trapp, tripp trapp, sa det i broen. Hvem er det som tripper på mi bru? skrek trollet. Å, det er den minste Bukken Bruse; jeg skal til seters og gjøre meg fet, sa bukken, den var så fin i målet. Nå kommer jeg og tar deg, sa trollet. De tre bukkene Bruse Det var engang tre bukker som skulle gå til seters og gjøre seg fete, og alle tre så hette de Bukken Bruse. På veien var det en bro over en foss, som de skulle over, og under den broen bodde et stort, fælt troll, med øyne som tinntallerkener, og nese så lang som et riveskaft. Først så kom den yngste Bukken Bruse og skulle over broen. Tripp trapp, tripp trapp, sa det i broen. Hvem er det som tripper på mi bru? skrek trollet. Å, det er den minste Bukken Bruse; jeg skal til seters og gjøre meg fet, sa bukken, den var så fin i målet. Nå kommer jeg og tar deg, sa trollet.
  7. 7. Hinting Bildet  er  lånt  fra:  h"ps://www.typotheque.com/arJcles/hinJng
  8. 8. Typografi er kommunikasjon
  9. 9. Identitet
  10. 10. Forskjellige skrifttyper Serif Sans-serif Slab-serif Script Display Monospace
  11. 11. Hvordan velge? •  Visuell profil? Erstatningsfont for web? •  Merkevare og verdier •  Type innhold
  12. 12. Hold det enkelt •  Hold deg til en eller to skriftsnitt •  Kontrast •  Kombinasjon av en sans-serif og serif •  Forskjellige vekter fra samme familie
  13. 13. § Universell utforming W C A G 2 . 0 A A h"p://uu.difi.no/  
  14. 14. Metode for å velge Lesbarhet Fleksibilitet Skjerm Det lille ekstra x-høyde Åpenhet Under- og overlengder Mellom- rom 1 l I 0 O o Stor familie Størrelse og vekt A X X X X X X B X X C X X X X X
  15. 15. Design innholdet i nettleseren
  16. 16. Sette teksten •  Fontstørrelse •  Linjelengde •  Linjehøyde •  Hierarki •  Gruppering •  Luft > eksempel
  17. 17. Typografiske grep
  18. 18. Mellomrom Uten kerning: Optisk kerning: 75% sperring:
  19. 19. Bokstav-mellomrom p { text-rendering: optimizeLegibility; /* optional: for older browsers */ -moz-font-feature-settings: "kern=1"; /* pre-Firefox 14+ */ -webkit-font-feature-settings: "kern"; -moz-font-feature-settings: "kern"; /* Firefox 14+ */ font-feature-settings: "kern"; /* standard */ font-kerning: normal; /* Safari 7+, Firefox 24+, Chrome 33(?)+, Opera 21+*/ } For manuell kerning: •  sjekk type.js, lettering.js eller kerning.js Aktivere kerning: h1 { text-transform:uppercase; letter-spacing: 2px; } Sperre overskrift:
  20. 20. Tekstbokser •  Korte linjer, lavere linjehøyde •  Lys tekst på mørk bakgrunn
  21. 21. Versaler TEKST KUN I VERSALER KAN VÆRE TUNGT Å LESE. MEN KAN FUNGERE PÅ OVERSKRIFTER ELLER KORTE TEKSTER.
  22. 22. Fet og kursiv •  Fet og kursiv senker lesbarheten •  Unngå falsk bold og kursiv
  23. 23. Ligaturer
  24. 24. Ligaturer h1, h2, h3, h4, h5, h6 { text-rendering: optimizeLegibility; /* optional: for older browsers */ -webkit-font-variant-ligatures: common-ligatures; /* for iOS and Safari 6 */ font-variant-ligatures: common-ligatures;  }
  25. 25. Andre typografiske grep Dårlig nettleser-støtte, prøv dropcap.js p+p { text-indent: 1.5; } p:first-child:first-line { font-weight: bold; }
  26. 26. Responsivt •  Små skjermer = kortere linjelengder •  Kontekst
  27. 27. Bønn til skribenten •  Bruk riktige HTML-koder •  Bruk riktig tegn •  Begrens kursiv og bold
  28. 28. Beyond the basics •  Javascript for full kontroll, f.eks. type.js •  Baseline grid for web
  29. 29. Ti huskeregler 1.  Velg en lesbar skrifttype 2.  Skriften skal stå til innholdet 3.  God skriftstørrelse 4.  Linjelengde på mellom 50-80 ord 5.  Linjeavstand 6.  Mellomrom mellom bokstaver og ord 7.  Grupper innhold 8.  Luft 9.  Kursiv, fet og versaler senker lesbarhet 10.  Test, test og test
  30. 30. Verktøy og ressurser •  Typecast.com •  Type on screen og Thinking with type av Ellen Lupton •  Utviklerverktøyet i nettleseren din •  Google Fonts, Typekit and MyFonts •  Typografi.no: norske begreper •  Golden Ratio Calculator http://www.pearsonified.com/typography/ •  Typography Cheatsheet http://www.typewolf.com/cheatsheet
  31. 31. Takk for meg! Twitter: @kekkakokkers Epost: kristin@studionetting.no Mobil: 911 07 367 Husk, god typografi redder ikke dårlig innhold!
  • monicabeckstrom

    May. 25, 2015
  • tormodg

    Apr. 16, 2015
  • toraelisabethmellbye

    Apr. 16, 2015

Foredrag holdt på Yggdrasil 14. april 2015 ”Content is still king”, og noen hevder at web er 95% typografi. Hvordan presenterer du innholdet ditt? Typografi er verktøykassen for å formidle tekstene våre. Det begynner å bli endel år siden fasiten var sans-serif og 12 piksler. Vi har fått et hav av typesnitt og nettbrukeren har beveget seg fra desktop til mobil. Hvordan designer man lesbare nettsider med en tydelig visuell identitet? Kristin går igjennom tekst-anatomi og hierarki , fontvalg og praktiske tips til bedre lesbarhet og tilgjengelighet

Vues

Nombre de vues

3 733

Sur Slideshare

0

À partir des intégrations

0

Nombre d'intégrations

1 401

Actions

Téléchargements

12

Partages

0

Commentaires

0

Mentions J'aime

3

×