7 tips for god typografi på nett 25

Diskusjonar om typografi på nett handlar som regel om seriffar eller ikkje seriffar, minimumsstorleik og kontrast. Men, typografi er så mykje meir. I følgje Wikipedia er typografi: “læra om bokstavar og grafiske element, og bruken av dei.” Så typografi er ikkje bare skrifta sett for seg sjølv, men den må sjåast i samanheng med det som er rundt.

I bloggposten “Web design is 95% typography” seier Oliver Reichenstein “Å optimalisera typografien er å optimalisera lesbarheiten, tilgjengelegheiten, brukarvenlegheiten og overordna visuell balanse. Å organisera tekstblokker og kombinera dei med bilete,- er det ikkje det grafiske designerar, brukarvenlegheitsspesialistar, informasjonsarkitektar gjer?”

Så korleis lagar du god typografi?

1. Skrifttype

Tradisjonelt har det vore mest vanleg med sans serif skrifttypar som t.d Arial på nettet, men med betre skjermoppløysning treng ikkje seriffar å vera eit problem. Skal du ha eit seriøst og klassisk uttrykk kan serif skrifttypar vera med på å understøtta dette.
New York Times brukar seriffar:
nytimes
Smashing Magazine brukar sans serif:

smashingmagazine_home

Skrift i nettlesaren vert rendra på brukaren sin maskin, så for å ha kontroll på utsjånaden kan det lønna seg å velja ein av skrifttypane som finst på dei fleste maskinar; kva for nokre desse er varierar, blant dei som plar nemnast er Arial, Georgia, Tahoma, Times New Roman og Verdana.

2. Skriftstorleik

Både for lita og for stor skrift kan forverra lesbarheiten. Mellom 13 – 15 pixlar plar gi god lesbarheit for brødtekst. Meir om dette kan du finna i blogginnlegget til Jostein (frå 2004, men framleis aktuelt) “Mysteriet skriftstørrelse“. Test ut skriftstorleiken på den skrifttypen du har valt. Bruk for eksempel www.typetester.org. Dette er eit fint lite verktøy der du kan testa ut ulike skrifttypar, storleikar, avstandar o.l og som lar deg samanlikna tre stilar i slengen (i tillegg kan du henta ut css’en for valt stil).

Eksempel frå Typetester på tekst i 10, 13 og 15 pixlar:

typetester_storleik

3. Lengda til ei tekstlinje (Engelsk: Measure)

Å finna ei linjelengde som passar er viktig for lesbarheiten. Mark Boulton anbefalar mellom 52 – 78 teikn i lengde (omlag 2 – 3 alfabet i valt skrifttype) for optimal lesbarheit. I eksemplet nedanfor, henta frå Wikipedia er det omlag 77 teikn per linje. Wikipedia køyrer ein flytande layout, noko som gjer at tekstlinjene vert mykje lengre når vindauget fyller heile skjermen og det vert då vanskelegare å følgja linjene med blikket.

linjelengde3

4. Mellomrom mellom bokstavar/ord (Norsk: Sperring/kniping, Engelsk: Tracking)

Vanlegvis har den som har utvikla skrifttypen teke seg av denne jobben, og det kan vera eit godt utgangspunkt å bruka den sperringa/knipinga som vert sett automatisk. Ein kan få behov for å justera denne om ein brukar veldig stor eller veldig lita skrift. På Typografi.no vert det påpeikt at stor skrift krev mindre bokstavmellomrom fordi bokstavane i seg sjølv har mykje åpent rom i seg, mindre skrift treng meir. Under ser du eksempel frå Typetester.org der teksten til venstre har mindre skrift og auka mellomrom mellom bokstavane, teksten i midten er normal og teksten til høgre har større skrift og minska avstand mellom bokstavane.

typetester_mellomrom

5. Linjeavstand (Norsk: Skytning, Engelsk: Leading)

Linjeavstanden vert definert som avstanden mellom botnlinjene til to tekstlinjer. Skrifttypar har som regel ein standard skytning som gjer at overliggjarar og underliggjarar ikkje rører kvarandre. Tekstblokker krev positiv skytning, medan korte tekstar og overskrifter kan ha negativ skytning.  Mark Boulton brukar som tommelfingerregel at skytninga bør vera større enn mellomrommet mellom orda for at auget naturleg skal følgja linja bortover horisontalt og ikkje nedover linjene. Typografi.no seier om skytning at sans serif fontar vanlegvis krev litt meir avstand enn serif fontar og at lange linjer krev meir avstand enn korte. Vidare meiner dei at omlag 1,3 gangar skriftstorleiken i avstand kan vera eit utgangspunkt, men at ein må prøva seg fram til det som ser bra ut.

Eksemplet under frå Typetester viser til venstre: Georgia 13 pixlar med linjeavstand 13 pixlar, i midten viser Georgia 13 pixlar med 16 pixlar linjeavstand og til høgre Arial 13 pixlar med 17 pixlar linjeavstand.

typetester_linjeavstand

6. Farge og kontrast mot bakgrunn

Som kjent gir svart skrift på kvit bakgrunn god kontrast. Er du i tvil om du har god nok kontrast kan du testa dette med Colour Contrast Check som lar deg sjekka om tekstfargen og bakgrunnsfargen har god nok kontrast opp mot WCAG 2.0 krava. Jeff Croft frå BlueFlavor gjer i sin SlideShare-presentasjon om elegant web typografi merksam på at kvit/svart kontrasten er større på skjerm enn på papir og at mange derfor føretrekk off-black/koksgrå på kvit bakgrunn og lysegrå skrift på svart bakgrunn, som for eksempel Apple gjer.

apple_kontrast2

7. Hierarki

Det er viktig å tenka på disposisjonen og laga ein skala av fontar som du kan bruka gjennomgåande. Bruk ein stil for overskrifter, ein for underoverskrifter, ein for brødtekst og ein for lenkjer og så vidare.  Dette gjer det lett å få oversikt og skanna gjennom teksten. På informationarchitects.jp er det enkelt å sjå kva som er overskrift, ingress og kva som lenkjer vidare inn til heile teksten.

hierarki

Syns du dette var interessant og vil veta meir? Smashing Magazine har laga ein oversikt over nyttige verktøy for å laga flott typografi for web’en: 50 Useful Design Tools For Beautiful Web Typography

Etter at me fekk pussa opp bloggen vår har me hatt mange diskusjonar i NetLife Research om korleis den fungerar. Fornøyeleg nok gjekk den største diskusjonen på om me skulle bruka Arial eller Georgia :-) Eg trur me med fordel kan justera typografien på bloggen vår for å gjera den lettare å skanna og lettare å lesa.

Kva synst du, og har du nokre tips?