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