Tekst: Darija S. Hauge.
Oppskrifter for font-styling for responsiv design og tips om gratis webfonter.
Når vi lagde web sider i gamle dager, brukte vi fonter vi hadde til rådighet på maskinene våre: Arial, Verdana, Helvetica… Times New Roman og Comic Sans var også tilgjengelige for alle, men det ga dårlig lesbarhet. Til tross for at vi designere kunne se alle mulige fonter på Mac-ene våre, var det kun vi som kunne se dem. De andre så nettopp Time New Roman eller hva det var som var definert som default. Man kunne også bruke all verdens fonter hvis web-siden var laget i Flash, men sånne sider funker ikke på mobil i våre dager. Man kunne også lage en font som et bilde, men det tar tid å laste ned og det er et hinder for universell utforming og søkemotorer.Det har skjedd mye med webfonter siden da. Nå er det plass for mer kreativitet og funksjonalitet og det koster ikke all verden å kjøpe en web font. Og ikke bare det – det fins mange gratis webfonter som funker bedre enn gamle veteraner. Og de funker på alle digitale flater. Så det er bare å begynne å utforske!
Da skal vi bare legge til at det er ikke bare bare å definere fonter for web. Man må finne riktig font, tenke på styling, skjermstørrelser og type enhet. Om veien fram til webfonter forteller to spesialister fra bransjen: Geir Arne Brevik og Alexander Fjelldal. Les og bli litt smartere med web.
Geir Arne Brevik, front-end utvikler i Making Waves.
– Hva er webfonter?
– Tidligere fungerte bare de fontene brukeren hadde på sin maskin – som Helvetica på Mac og Arial på Windows – på web. Ellers kunne man lage bilde av tekst, men det kan ikke kobles til et publiseringsystem og du kan ikke klippe og lime fra en sånn tekst. Det som har skjedd med webfonter nå, er at fonten følger med nettside på samme måte som bilder følger med. Så i teorien kan man bruke hvilken som helst font. Men det er bare i teorien.
– Hvilke gratis webfonter kan du anbefale?
– Det finnes noen alternativer. Google har Google Fonts – mange gratis fonter å velge mellom. Fontene blir tilgjengelige ved at du setter en liten kodesnutt som henviser til den aktuelle fonten i html-dokumentet ditt.
– Hva er grunnen at mange sider fortsatt velger trygge fonter som Verdana, Arial?
– Jeg tror det til dels er historiske grunner, at folk velger ut fra hva som var tilgjengelig tidligere. Og så er det et lisens-problem. Det kan ta ganske mye tid å få avklart rettighetene til fonter. Og hvis du har en firmaprofil-font, er det ikke sikkert at den er tilgjengelig som webfont.
Det andre er en teknisk grunn: De som lager fonter må tilpasse fonten for skjerm, ellers ser det veldig stygt ut. De må gå gjennom hele fonten og passe på at den ser bra ut på Windows, Android, iPhone og i forskjellige nettlesere. De må gjøre noe som heter font hinting. Det handler om hva slags skjerm man har og hvor tett det er mellom punktene man kan vise.
– Man får ofte et stor profilprogram der kun én side er dedikert til webfonter. Den viser ofte Arial i 4 snitt. Men det har veldig lite å si for reell bruk på web: Definering av fontstørrelse, linjeavstand, osv for ulike skjermer.
– Det er svært tema for seg selv. De funksjonelle kravene til typografi på web er strengere enn på papir, fordi du har så mye større variasjon i bruksområder og skjermstørrelser. Kontrast og lesbarhet er også veldig viktig. En del fonter er laget for skjerm i utgangspunktet. Apple gikk over fra Helvetica som systemfont til en font de har laget selv.
– Hvordan betaler man for en webfont?
– Vanlige fonter for trykk er ofte mye dyrere enn webfonter, fordi du betaler per maskin. Det er mange måter å betale for lisensfonter på. Enten frikjøper du fonten og kan bruke den som du vil. Det er ofte dyrt. Men det finnes mange abonnements-løsninger. Den mest kjente er TypeKit. Du får det med Adobes abonnement. TypeKit har tusenvis av fonter som er lisensiert fra Adobes bibliotek og også fra en del andre fontleverandører. Du betaler for antall sidevisninger og domener. Hvis du har en så stor kunde som for eksempel DNB, vil jeg tippe at det går an å inngå helt egne avtaler.
– Har du noen favoritt webfonter?
– Valg av webfont er avhengig av flere praktiske forhold. Det ene er at det skal stemme med profilfontene. På en funksjonell side som en nettbutikk eller nettbank er teksten først og fremst grensesnitt-tekst og ikke innhold. Da er noen fonter mye tydeligere enn andre. Åpne i formene, god forskjell på sånne ting som stor I og liten L. Source Sans og Fira Sanser begge gode til grensesnitt-tekst og er gratis. På innholdssider som produktsider og artikkelsider har man mye større frihet og der handler det mye mer om tradisjonelle gode typografiske regler: linjelengde, luft, linjeavstand.
– Hva skal man huske på når man definerer fonter til responsiv design?
– Alt er responsiv design nå. Mobil er mer brukt enn vanlige datamaskiner. Hastighetsaspektet er viktig. Veldig store fonter og mange vekter tar tid – fonten kommer saktere fram. Så man bør være obs på det. På Typekit og Google Font kan du velge hvilke tegn man skal laste ned. Da kan du velge bort for eksempel islandske og kinesiske tegn slik at det går fortere. Hastighetsaspektet gjelder ikke for de preinstallerte fontene.
Man må teste særlig på mobil – det går treigere der. Man burde se hvordan det ser ut i praksis – lage en webside hvor man tester fontene og se på forskellige skjermer. Ikke bare sitte på den store dyre Mac-en, men også prøve på en billig Android-telefon. Nettlesere har også noen renderings-forskjeller og man må akseptere at det blir noen forskjell uansett.
– Gode eksempler på lisensfonter?
– Utvalget er veldig mye bredere da.Mange designere vil ha ting på akkurat sin måte, så det er viktig å få utvalget. Poenget er ikke at en font er bedre enn andre, men at du får en font som egner seg til det du skal bruke den til.
– Hvis du er ikke kresen, så kan du bruke Arial. Hvis du er mer kresen så kan du bruke en gratis webfont, og hvis du er bedrift, så kan du kjøpe lisensfont?
– Kresen er feil ord, men opptatt av typografi. Hvor viktig typografi er i settingen man er i? Typekit.com har 800 gratis fonter, du får 25 000 visninger i månden på en webside. Hvis du betaler 50 dollar i året, som er ikke så mye penger, så får du valget mellom 4 200 fonter, du får 500 000 sidevisninger i månden. Det er ikke nok for DNB, men det er nok for de fleste små bedrifter.
– Topp 5 anbefaling på webfonter?
GRATIS:
Google Fonts: https://www.google.com/fonts
Typekit: https://typekit.com (har også betalte foter)
LISENS:
Monokrom: https://monokrom.no
Hoefler &Co: http://www.typography.com
Dalton Maag: https://www.daltonmaag.com/
Alexander Fjelldal, kreativ leder i designbyrået Innoventi i Arendal.
– Bruker du webfonter ofte?
– Jeg bruker webfonter hele tiden. Men da jeg studerte på slutten av 1990-tallet, var web veldig nytt og umodent. Vi lærte ikke så mye og det vi lærte var ikke så veldig brukbart heller. Webfonter er noe jeg har kommet borti på grunn av min egen interesse – og fordi det er det kundene har behov for nå.
– Ofte får man levert et profilprogram med en kort side dedikert til webfonter. Der står det ofte Arial i fire snitt: regular, italic, bold og bold italic. Det står ingenting om styling, som for eksempel anbefalte font-størrelser til forskjellige skjermer. Eller kanskje det bare står én font – Times New Roman, som egner seg til trykk, men ikke funker så godt på web. Hva bør man gjøre for å få et godt utrykk på web?
– Når disse fontene blir nevnt, tyder det ofte på at det er ganske gammel profilmanual og den må videreutvikles. Man bør starte med å finne trykkfontene i moderne webversjon og bestille dem. Jeg kjøper aldri noe som ikke finnes på web nå. Fordi jeg vet at før eller senere skal kunden gjøre noe på web. Fonter som ikke finnes på web er helt uaktuelt.
– Før var det slik at noen ganger måtte man nesten skaffe pirat-versjoner først for å presentere utvalget til kunden og deretter kjøpe den ene som kunden valgte. Kan du teste webfontene før du kjøper dem?
– Ja, nå er dette løst. På fontstack.com kan du leie fonter på times- eller månedsbasis og det er kjempebillig.
– Kan du nevne noen spennende webfonter?
– Det er helt vanvittig produksjon av fonter nå. Jeg kan ikke anbefale noe konkret, men Fontdeck.com er et godt bibliotek for webfonter. Det er ikke gratis, men du får det du betaler for. Mesteparten av det du får gratis, blandt annet Google Fonts, er ganske dårlig.
Bra nye fonter legges ut hver uke på typecache.com. Typefacts.de og typographica.org legger ut oppsummeringer over de beste nye skrifttypene hvert år.
– Hva kan du anbefale til en som er ikke så kresen på fonter? Arial er ofte brukt på web fordi den funker, den er gratis og alle har det lokalt på maskinen sin?
– Da ville jeg gått på Google Fonts og brukt noe fra liste Most Popular. Der har du store solide fonfamilier som Open, Source, Code og Titillium. Det er ikke noe galt med Arial i seg selv, men den er brukt opp. Det er det samme som å bestille kneipbrød på restaurant – du vil ha et godt brød som de har bakt selv.
– Hvordan presenterer du websiden til kunden med riktige fonter? Lager du en prototype?
– På den første skissen viser vi Arial eller Helvetica, fordi da handler det om funksjon og prioritering og fonten skal ikke ha oppmerksomhet. Når vi viser skisser på uttryket, da bruker vi fonter. Det er ikke alltid vi må kjøpe fonter. Vi kan bruke Myfonts.com – der kan du velge en font og skrive relevante ord som «Om oss», «Ansatte» og så videre. Da ser du hvordan ordene ser ut, kan ta screenshot og lime inn i Photoshop eller Sketch for å vise til kunden.
– La oss si man har en blogg eller portfolio side og velger Open – en gratis font fra Google Fonts. Men jobben er ikke ferdig ennå. Man må definere fontstyling til forskjellige skjermer: størrelser , linjeavstand, linjelengde, osv.
– Da er vi inne på et større tema – design av en responsiv nettside. Hvis man har en blogg på WordPress, bør man se på instruksjoner WordPress har for bruk av Google-fonter. Da skal man bare klippe og lime en kode – veldig enkelt. Bygger man siden fra bunnen selv, så må man først få fonter inn i designet sitt – en liten linje med CSS eller JavaScript. Veldig mange bruker Foundation – et rammeverk å bygge CSS og HTML på. Det er nesten som Lego – ferdig skrevne byggesteiner. Videre er det viktig å finne et riktig hierarki av størrelser: overskrifter, ingress, brødtekst og det er mer vanskelig. Overskriften er viktigst og den må se viktigst ut også.
En typisk eksempel på størrelser:
For mobil: 12px brødtekst og 20 px overskrift
For nettbrett: 16 px brødtekst og 24 px overskrift
For desktop: 16 px brødtekst og 30 px oveskrift
Avstanden mellom linjene i brødteksten – typisk 50 prosent av høyden på brødteksten. Hvis tekststørrelsen er 16 px, kan linjeavstand 24px fungere bra. Linjene bør ikke vær lengre enn 2-3 engelske alfabeter, noe mellom 52 og 78 tegn. På mobil kan lineje være cirka like lange.
Når man jobber i Adobe Illustrator det er viktig å huske, at design kan se bra ut der, men i html prototyper så kan det være forskjell på hvordan fontene vises. Man bør teste hele tide på forskjellige enheter og gjerne begynne med mobil.
– Hvordan du tester du webfonter?
I Illustrator lager jeg design i 3 forskellige bredder og eksporterer som png. 640 px bredde for mobil, ca 728 pxfor stående nettbrett og 1280 for desktop. Også tester jeg det på telefon, nettbrett og desktop.