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.

God lesbarhet og tekstflyt

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!

 

Det koster penger

Husk fonter koster penger også på nettsider. Samme som lisenser for bruk i trykksaker er det lisens for bruk av fonter på nettsider. Husk å sjekke fonten du skal bruke både i forhold til bruk - om det er en engangskostand pr domene (ganske vanlig) eller om det er besøks/trafikk relatert prising, eller om det er en årlig avgift. Google har et stort bibliotek av gode webfonter som er gratis å bruke. Vi anbefaler å ta en titt der når du setter igang designprosessen.

 

 

 

*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?

  • news-page

    Er dere klare for ny nettside?

    Spar ekstra kostnader med denne 7 punkts sjekklisten


    Gjennom en årrekke har vi hjulpet små og store foretak til å bli synlige på nett. Ofte er noe av det viktigste i en slik prosess en bevisstgjørelse hos kunden på hva de bør tenke på når de skal på nett. Nedenfor har vi laget en forenklet sjekkliste som ofte er noe vi spør våre kunder om når de skal lage en webside for første gang. 

    Fortsett til innlegget
  • news-page

    Googlemaps koster penger?

    Kart fra google er ikke lenger "allemannseie". Søkemotorgiganten sin karttjeneste har endret vilkårene. Hva betyr dette for våre kunder?

    Fortsett til innlegget