Webfonter hva er lurt

Skrevet av Frode Bjerved

Å jobbe med font og skrifttyper i webdesign.

Det er en kjent sak at designere elsker å bruke forskjellige skrifttyper for å fremheve og tydliggjøre innholdet. Før var det vanskeligere å få til dette på web, fordi man ikke hadde noen god måte som nettleseren kunne tolke skrifttyper på. Derfor var man ofte begrenset av vanlige “systemfonter*”

Heldigvis er de dager over, det skyldes at man i større grad har blitt enige om hvordan nettleseren skal kunne håndtere skrift. Så når vi som designere og utviklere kan “glemme” hvordan man i alle dager skal få nettleseren til å korrekt vise skrifttypen, blir fokuset igjen på hvordan skal man best formidle teksten via skrift på digitale flater. På skjerm har det lenge vært en trend å ha liten skriftstørrelse for å kompensere for mindre desktop skjermer; den tiden er over, og godt er det.

Det er mange designprinsipper som er grunnlag for å skape god lesbarhet og flyt i tekstbilde. Jeg har tatt utgangspunkt i en engelsk artikkel på bloggen til Invision. De presentere noen  gode og enkle “regler” som kan være et utgangspunkt når man designer for skjerm.

 

REGLENE:

Brødtekst i webdesign kan fort være litt større enn du tror, vi har gått fra å bruke 10 - 12px, til at vi nå ser flere og flere sider som bruker 14-16 px som standard, eller enda større. Det viktigste er å prøve på litt ulike skjermer- teksten skal være behagelig å lese. Lengre tekster er mer behagelig å lese dersom den har litt størrelse og god linjeavstand. Vi kan definere størrelser basert på noen regler:

Største overskrift kan være 180-200% størrelse av brødtekst

Mindre overskrifter:  130 -150% av brødtekst

Enda mindre overskrifter:   100 - 125% av brødtekst (og eks i bold for å skille dem ut)

Liten tekst / bildetekst :70-75% av brødteksten

Linjeavstand (line-height i css):  120 - 160% av brødtekst størrelsen (16 px brødtekst = 24 px linjehøyde), men generelt - mindre tekst må ha mer linjeavstand. En god regel er at du får plass til en liggende “h” mellom linjene for å sørge for en minimum god lesbar linjeavstand. 

Husk å få luft i bunn på alle tekstblokkene (i css ofte 16px/1em margin i bunn). 

Husk at mengen ord og bokstaver har noe å si for lesbarheten. For lange setninger gir ikke god leserflyt. Litt avhengig av språk kan man si noe om ca antall tegn pr linje. For engelsk er det 50-75 tegn pr linje for maksimal lesbarhet. Dette kan være en pekepinn, men husk at vi på norsk har lengre ord og trenger ofte derfor litt flere tegn pr linje.

Dette var de får punktene som kan gi en start på designprosessen, men dere må fremdeles være designere. Reglene sier ingenting om kerning, luft, kontrast, flyt, serifer vs sans , grotesker, osv. Det overlater jeg til deres ekspertise! Lykke til!

 

*systemfont- et sett med skrifttyper som er lagt inn i operativssystemer i Windows og OS for mac, som kommer ferdig instalert.

 

Kilder

Hele artikkelen i invision blogg: http://blog.invisionapp.com/typography-tips/

Andre http://mikeyanderson.com/optimal_characters_per_line

Verktøy: http://www.pearsonified.com/typography/


 

Sharing is caring

Del artikkelen på sosiale medier

Mer digitalprat

nysgjerrig eller inspirert?