Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Typografi først

3.299 visualizaciones

Publicado el

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

Publicado en: Diseño
  • Sé el primero en comentar

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!

×