Skifte beite? Gresset er grønnere hos oss
Sammen sprenger vi grenser for hva web kan være. Vi ser spesielt etter: Tekstforfattere, prosjektledere, designere og interaksjonsdesignere.
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:
Smashing Magazine brukar sans serif:
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:
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.
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.
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.
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.
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.
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?
Bent, 15.04.2009 10:51
Fin sak, Martha! :)
Sebastian Steinmann, 15.04.2009 11:16
Siden vi snakker om typografi her må jeg bare påpeke bruk av whitespace også :
Synes deres H3 kan gjøres bedre. Kanskje bare jeg som synes det, men h3 er gjerne sterkt knyttet til paragrafen under og typografien bør derfor speile dette. 15px over og under gjør at den henger litt i løse luften.
John, 15.04.2009 11:48
mener du har glemt et viktig prinsipp for god lesbarhet på nett:
- Skriv med et språk folk er vant med å lese :-)
Espen Liland, 15.04.2009 13:07
Må si meg enig med Mr. Steinmann her. Har alltid vært av den oppfatning at overskrifter som
h3bør ha ca. samme avstand til underliggende brødtekst som brødteksten selv har mellom sine linjer.Hadde ikke foraktet en litt mindre
font-sizepå brødteksten heller. Arial fra 14px og oppover er både stygt og ikke spesielt lettlest, så der må jeg nok si meg brennende uenig med deg: “Mellom 13 – 15 pixlar plar gi god lesbarheit for brødtekst” :)Kenneth Dreyer, 15.04.2009 19:21
Må si meg enig med John her. Nynorsk er i mine øyne fryktelig tungt å lese, da jeg ikke er vant til det. Vanligvis overser jeg nynorske artikler, men denne var faktisk ganske bra.
Hvor mange i % av den norske befolkning bruker nynorsk fremfor bokmål?
Pingback: → Nynorsk ikke brukervennlig? - Webforumet.no - Webmaster forum
Kåre G, 16.04.2009 10:59
Fine tips, og jeg er stor fan av å skrive på god nynorsk!
Veldig få har problemer med å lese det, og det gir en personlighet til teksten som er vanskelig å få til på riksmål.
Det å skrive slik at det skinner igjennom at det er kjøtt og blod bak bokstavene er en undervurdert faktor på nett.
John, 18.04.2009 11:33
Kåre, selv om du har et romantisk forhold it nynorsk, forandrer ikke det saken at bruk av nynorsk skremmer majoriteten fra å lese artikkelen din. Uansett hvor bra krevet artikkelen er oppbygd, med riktig type bokstaver og linjeavstand – nynorsk forverrer lesbarheten.
Hein Haraldson Berg, 20.04.2009 09:00
Et innspill til dette med linjeavstand. Det er riktig som du sier at dette defineres som avstanden mellom bunnlinjene til to tekstlinjer. I mer tradisjonelle typesettingsverktøy kalles disse gjerne baselines, og tekst bør i størst mulig grad følge en baseline grid.
Men her er det snakk om typografi på nett. Bunnlinjene er derfor ikke verdt noe som helst. Med CSS’ line-height-egenskap blir tekst midstilt innenfor linjehøyden. Sagt veldig forenklet får da en tekst satt i 12px med 20px linjehøyde 4px luft over og under, istedenfor 8px luft over. (Nå bruker jeg konsekvent ems og enhetsløse linjehøyder i CSS for mengdetekst, men det er ikke så viktig. :-)
Sjekk for øvrig dette bildet jeg snekra sammen for lenge sida, som illustrerer det godt.
Kenneth Dreyer, 20.04.2009 10:31
Kåre, du sier veldig få har problemer med å lese nynorsk.. Er dette noe du baserer på din egen vennekrets? For i min vennekrets (Østlandet) vil jeg påstå de fleste har problemer med å lese nynorsk og gjerne går lange omveier for å unngå det. Jeg tror rett og slett dette er en smakssak, hvor majoriteten ville foretrukket bokmål om de kunne velge. Og når man da er inne på brukervennlighet så gjelder det vel å gå for det flerparten foretrekker, gjør det ikke? Isåfall vinner bokmål, uansett hvor forelsket og vårkåte minoriteten blir av nynorsk!
Hein Haraldson Berg, 20.04.2009 10:48
Det dere sier syns jeg godt dere kan få dokumentere, Kenneth og John. Ikke bare påstandene om ett skriftspråk er mer lesbart enn det andre, men om det i det hele tatt har noe å si.
Jeg er også usikker på hva dette har med typografi i seg selv å gjøre? Lesbarhet og typografi glir ofte over i hverandre, men i dette tilfellet syns jeg ikke dette er en relevant diskusjon i det hele tatt.
Kåre G, 20.04.2009 11:09
Kenneth: Det er forskjell på hva folk foretrekker og hva folk har problemer med. Jeg tror du undervurderer vennekretsen din. Med mindre de er veldig unge og har “Spynorsk Mordbok” i ranselen tror jeg ikke typografi-interesserte velger bort denne artikkelen pga. språket.
–
Brukervennlighet handler ikke om å la være å utfordre brukeren.
Kenneth Dreyer, 20.04.2009 12:29
Så du at om man utfordrer brukeren er man brukervennlig, Kåre?
Kenneth Dreyer, 20.04.2009 13:01
(Til informasjon så klarer jeg hverken skrive bokmål eller nynorsk, da det går litt fort i svingene når jeg skriver) :)
Martha, 20.04.2009 14:24
Takk for mange kommentarar! Det var ikkje meininga at det skulle utvikla seg til ein måldebatt, men det er i alle fall hyggeleg at de har lese posten trass i/på grunn av at den er på nynorsk:-) Tolkar det som at det er eit interessant tema.
@Sebastian Steinmann: Heilt enig i innspelet om H3 og skal setja bloggsjefen vår på saken.
@Espen Liland: Arial frå 14 pixlar og oppover kan kanskje vera stort, men som eg seier så er det viktig å “testa ut skriftstorleiken på den skrifttypen du har valt.” Og sjå det saman med både valt skrifttype, storleik, linjeavstand, linjelengde osv. Ein bør òg sjå på teksten i samanheng med det som er rundt; kva type side det er, kven som er i målgruppa osv.
@Hein Haraldson Berg: Der lærte eg noko nytt!
Martin Gjesdal, 20.04.2009 14:41
Jeg hadde tenkt å kommentere typografi her, hvor min eneste kommentar var at jeg er glad man har innsett at blant de vanlige serifene, egner Garamond seg bedre enn Times New Roman på skjerm.
Så var det måldebatten, hehe. Jeg har selv skydd unna nynorsk på skolen så godt jeg kan. Likevel har jeg ingen problemer med å lese nynorsk og jeg synes det gir tekster en etterlangtet karakter. Bokmål er korrekt og utbredt, men kjedelig.
Nynorskere: held fram! (bare ikkje tving meg til å skriva det)
Kenneth Dreyer, 20.04.2009 15:11
Hein Haraldson Berg, du etterlyser dokumentasjon. Kan dessverre ikke komme med noen dype rapporter, men en rask spørreundersøkelse beviser at jeg har rett: http://www.webforumet.no/forum/generell-snakk-og-svada/4836-hva-foretrekker-du-av-bokm-l-og-nynorsk.html
Kent, 20.04.2009 15:46
Flott artikkel.
«Nynorsk er ikke brukervennlig» dette er et argument eg har sett mer og mer rundt om på nettet i det siste, og er et populistisk argument for at nynorsk ikke er godt nok for menigmann.
@ Kenneth Dreyer
«men en rask spørreundersøkelse beviser at jeg har rett»
Du mener altså at 19 personer på Webforumet.no (som jeg aldri har hørt om før) er ansett som bevis?
Kenneth Dreyer, 20.04.2009 16:05
Jeg har igrunn innsett nå at enkelt personer ikke kan overbevises om at nynorsk for folk flest, ikke er brukervennlig. Har dessverre ikke tid til å gjennomføre noe større undersøkelse med hundretusenvis av deltagere, men det er jammen på tide at noen gjør det slik at vi får avlivet denne diskusjonen en gang for alle med litt håndfast fakta.
Webforumet er selvfølgelig ikke ansett som noe håndfast bevis, men forumets brukere kommer fra alle landets kanter og er i forskjellige aldersgrupper. Jeg er overbevist om at hva som avstemmes der inne ikke vil være så langt ifra hva som ville blitt resultatet om man kjørte en undersøkelse over hele landet.
Et av argumentene som går igjen er at nynorsk låter bedre enn bokmål, noe jeg forsåvidt ikke har vurdert de to opp mot hverandre. Men at folk flest foretrekker å lese bokmål synes jeg det er rart at folk i det heletatt argumenterer i mot. Det er greit nok at det finnes enkeltpersoner som foretrekker nynorsk, men faktumet er at flertallet i Norge foretrekker bokmål.
Hein Haraldson Berg, 21.04.2009 13:20
Og enda mer interessant: Har skriftspråket blitt mer relevant siden i går, i forhold til typografi som denne artikkelen handler om? De to skriftspråkene vil sannsynligvis benytte samme typografi, hvorfor er dette relevant?
Kåre G, 21.04.2009 19:29
jeg tror en kan oppnå bedre brukerOPPLEVELSER ved å bryte prinsipper om brukerVENNLIGHET. av og til.
Pingback: → Nynorsk er ikke bra for et brukervennlig nettsted | Kenneth Dreyer
Martin Berglund, 24.04.2009 08:12
Angående store fontstørrelser på web. Wilson Miner, som blant annet har jobbet med Apples nettdesign, har skrevet en meget nyttig bloggpost der han forklarer hvorfor hans typografi er så stor.
Anbefaler alle å lese posten: http://www.wilsonminer.com/posts/2008/oct/20/relative-readability/
Svein Ølnes, 25.04.2009 08:54
Interessant tema, men litt synd at det delvis sporar av i diskusjon om målform. Så til alle som har store problem med nynorsk: Stopp å lesa her!
Kan typografiproblema på nettet (for me har vel ein del problem?) ha noko å gjera med at me stort sett har kvitta oss med typografane? Alle kan vera typografar i den forstand at alle har verktøya tilgjengelege, men få har kunnskapar til å bruka verktøya godt.
Eg trudde elles at tracking gjeld mellomrom mellom ord eller grupper av bokstavar, og at kerning er uttrykket for bokstavmellomrom?
Må elles leggja til at eg ikkje har spesielle kunnskapar om dette feltet, men tykkjer det er svært interessant. Kan tilrå boka Thinking with Type av Ellen Lupton som ei fin innføringsbok i typografi.
Pingback: → Skrifttypar på nett - Future of Web Design | IAllenkelhet