Upload
kristin-kokkersvold
View
799
Download
3
Embed Size (px)
Citation preview
Brukeropp leve l se
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-‐period
Da og nå
2006 2015
Typografi først
Mars april
Grunnleggende anatomi
Seriff
x-‐høyde
Grunnstrek
Hårstrek
Underlengde
Overlengde
Versal
Minuskel
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.
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 • Forskjellige vekter fra samme familie
§ 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 0 O o
Stor familie
Størrelseog vekt
A X X X X X X
B X X
C X X X X X
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: "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:
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-variant-ligatures: common-ligatures; /* for iOS
and Safari 6 */ font-variant-ligatures: common-ligatures;
}
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;
}
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å 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
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
Takk for meg!
Twitter: @kekkakokkers Epost: [email protected]
Mobil: 911 07 367
Husk, god typografi redder ikke dårlig innhold!