Typografi først

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: kristin@studionetting.no

Mobil: 911 07 367

Husk, god typografi redder ikke dårlig innhold!