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

1. Brukeropplevelse
Yggdrasil 2015
av Kristin Kokkersvold, Studio Netting
Typografi først

2. The web is 95% typography
Oliver Reichenstein, 2006
h"ps://ia.net/know-­‐how/the-­‐web-­‐is-­‐all-­‐about-­‐typography-­‐period

3. Da og nå
2006 2015

4. Typografi først

5. Mars april
Grunnleggende anatomi
Seriff
x-­‐høyde
Grunnstrek
Hårstrek
Underlengde
Overlengde
Versal
Minuskel

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. Hinting
Bildet
er
lånt
fra:
h"ps://www.typotheque.com/arJcles/hinJng

8. Typografi er
kommunikasjon

9. Identitet

10. Forskjellige skrifttyper
Serif Sans-serif
Slab-serif Script
Display Monospace

11. Hvordan velge?
• Visuell profil? Erstatningsfont for web?
• Merkevare og verdier
• Type innhold

12. Hold det enkelt
• Hold deg til en eller to skriftsnitt
• Kontrast
• Kombinasjon av en sans-serif og serif
• Forskjellige vekter fra samme familie

14. §
Universell utforming
W C A G 2 . 0 A A
h"p://uu.difi.no/

15. 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

16. Design innholdet
i nettleseren

17. Sette teksten
• Fontstørrelse
• Linjelengde
• Linjehøyde
• Hierarki
• Gruppering
• Luft
> eksempel

23. Typografiske grep

24. Mellomrom
Uten kerning:
Optisk kerning:
75% sperring:

25. 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:

26. Tekstbokser
• Korte linjer, lavere linjehøyde
• Lys tekst på mørk bakgrunn

27. Versaler
TEKST KUN I VERSALER KAN VÆRE
TUNGT Å LESE. MEN KAN FUNGERE
PÅ OVERSKRIFTER ELLER KORTE
TEKSTER.

28. Fet og kursiv
• Fet og kursiv senker lesbarheten
• Unngå falsk bold og kursiv

29. Ligaturer

30. 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;
}

31. 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;
}

32. Responsivt
• Små skjermer = kortere linjelengder
• Kontekst

33. Bønn til skribenten
• Bruk riktige HTML-koder
• Bruk riktig tegn
• Begrens kursiv og bold

34. Beyond the basics
• Javascript for full kontroll, f.eks. type.js
• Baseline grid for web

35. 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

36. 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

37. Takk for meg!
Twitter: @kekkakokkers
Epost: kristin@studionetting.no
Mobil: 911 07 367
Husk, god typografi redder ikke dårlig innhold!