Å 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/
