Morro med Font Dragr

I den nyeste versjonen av Firefox (3.6 Beta) er det støtte for å laste opp filer ved å bruke drag n’ drop rett inn i nettleseren. En som har lekt seg med dette i kombinasjon med @font-face er The CSS Ninja.  Han har laget en web applikasjon for å teste fonter.  Med Font Dragr drar du en hvilken som helst font av typen otf, ttf, svg eller woff inn i nettleseren. Fonten blir rendret direkte!

Jeg har testet greia og det funket helt perfekt. Man må bare huske på å laste ned Firefox 3.6 Beta først. I tillegg fant jeg ut at det ikke var så greit å dra fontene rett fra fontfolderen på PC. Jeg måtte kopiere de til en annen folder først. For Mac’erne vil det funke fint uten videre hassel. Hvis du ikke gidder å teste selv kan du se hvordan det virker i denne filmsnutten.

For å følge opp Typekit-tråden fra tidligere: Sjekk ut Fredrik Mathesons testing av Typekit og Typotheque!
Jeg har forøvrig Typekit invitasjoner igjen dersom det er noen som vil prøve.

En 5 punkts huskeliste for typografi på web

1. Note to self:  95% av informasjonen på web er skriftelig.
2. Tekst på web er flytende og foranderlig. Du har ikke kontroll på den, så design med tanke på det! Bytt ut ipsum lorem og test designet ditt med ekte tekst. Tåler designet både mye og lite tekst? Eller kan man løse det på andre måter, med for eksempel flere maler for innholdsansvarlig å velge mellom? Kanskje kan du bruke flytende kolonner (multi-column layout) som justerer seg etter vidden på browservinduet?
3. “Users don’t read” sa Jacob Nielsen i 1997. Hva er forskjellen på en ”leser” og en ”bruker”? Når man leser på web er man ofte i en annen modus, med ønske om å være produktiv og aktivt søkende etter informasjon. I motsetning til leseren, som er i en mer reflekterende modus når hun eller han leser en bok. Web-brukeren er derfor mer utålmodig og har behov for lett å kunne skanne teksten med blikket.
4. Dette bringer oss videre til lesbarhet. Font størrelsene burde egentlig i dag ha økt i takt med større skjermer og oppløsning. Likevel tviholdes det rundt omkring på knøttliten brødtekst, noe det ikke finnes noen god grunn til. Linjeavstand påvirker også lesbarheten. For kort linjeavstand gjør det slitsomt for øyet å fokusere riktig, for høy linjeavstand gjør at øyet oppfatter teksten mer som en helhetelig form (striper) enn tekst. Informationarchitects.jp anbefaler en linjeavstand på 140% . Flere gode råd om lesbarhet finnes hos informationarchitects.  (Takk, Heidi!)
5. Selv om vi som designere ikke alltid har kontroll på selve tekstinnholdet bør vi likevel kunne reglene for riktig tegnsetting. Vi har tross alt arvet en viktig rolle fra typografene, med sine århundrer lange tradisjoner og stolthet. For eksempel er det lett å glemme at vi har egne anførselstegn på norsk … og vet du forresten hva et utelatelsestegn er? Regler for norsk tegnesetting finner du hos Korrekturavdelingen. 
   

Håper å kunne fylle ut denne huskelista med flere punkter. Kom gjerne med innspill!

Foto: adactio

Typografien har gjenoppstått

Farvel til Arial og Verdana? Det blogges og twittres mye blant typografi-entusiaster om dagen. TypeCon 2009 er nettopp over og et hett tema i år har vært metoder for å få kommersielle fonter ut på webben. Skjermorienterte designere har lenge kjedet seg over det snevre utvalget av ”websafe” fonter. Med tekniske hindere i veien har typografien kanskje ikke alltid fått den oppmerksomheten og kreative fokuset som den fortjener.

De siste årene har mange aktører forsøkt å løse problemet med diverse hacks. Cufon, SIFR og script som lagrer tekst som bilder har gjort det mulig å bruke profilfonter istedet for systemfonter, men ingen standard har blitt satt og dessverre begrenser slike løsninger seg gjerne til bruk i titler.

Nå ser det imidlertid ut til å løsne. Nye standardiserte løsninger er på vei. Firefox har i sin siste versjon (Firefox 3.5) lagt inn en CSS regel som tillater å benytte fonter som ikke er installert på sluttbrukerens maskin. Med @font-face kan man lenke til fonter på samme måte som man kan med bilder! Både Opera og Safari støtter font.face, men dessverre ikke Internet Explorer og Googles nettleser, Chrome.

Et lite skår i gleden er at ikke bare den lykkelige designeren, men også kreti og pleti av sluttbrukere får tilgang på fontfilene når disse brukes på web. Dette er fontprodusentene fint lite interessert i. Noen som har forsøkt å løse dette er folkene bak Typekit. Typekit er en plattform som gir tilgang på både gratisfonter og kommersielle fonter samtidig som rettighetene ivaretas. Slik jeg har forstått det fungerer det i praksis slik at du logger deg inn, velger en font, ”styler” med en CSS-editor og genererer et javascript. Alt i et oversiktelig og enkelt brukergrensesnitt. Typekit er enda ikke lansert, men utvalgte brukere har fått teste en betaversjon.

W3C (World Wide Web Consortium), som godkjenner nye web standarder, vil kanskje gå god for et nytt forslag kalt .webfont. Dette formatet består av en komprimert fil hvor browseren, utifra meta-data, avgjør om fonten skal vises eller ikke. Microsoft har også foreslått sitt eget format EOT (Embedded OpenType) som standard, men med patentbeskyttet kode man må betale for. Ikke populært…

Det blir spennende å se hvilken retning webtypografien vil gå, både teknisk og kreativt. Kanskje sier vi farvel til Arial og Verdana, men må regne med å si hallo til Comic Sans? Grøss…

Takk til Kristoffer Dyrkorn for å ha sett igjennom teksten og kommet med fine innspill!

The Typescript is the message…

“Comic Sans walks into a bar, bartender says, ‘We don’t serve your type.”

Bok: ”Mental Model – Aligning design strategy with human behavior” av Indi Young

Det begynte bra, med en beskrivelse av en metode som virket både enkel og genial. Mental model er et verktøy for å bli kjent med brukerne dine og deres grunner til å handle som de gjør. Gjennom grundige intervjuer avdekker man menneskers handlings- og tenkemønstre rundt oppgaver de utfører. På den måten ser man lettere hvilken funksjonalitet det er behov for i et produkt og hvilke som er overflødige.

Jo lenger inn i boken jeg kommer, jo mer går det opp for meg at dette er en fryktelig omstendelig prosess som helst krever at du har et eget forskerteam for hånden og et hav av tid. Når det er sagt, er boka veldig praktisk lagt opp, med gode eksempler og grundige beskrivelser. Brukt tidlig i en utviklingsprosess får man et godt grunnlag til en langsiktig designstrategi.

Jeg sitter igjen med følelsen av at som grafisk designer er dette er en grei metode å kjenne til, på lik linje med andre IA-metoder. Det ville kanskje holdt å lese noen av de innledende kapitlene, slik forfatteren anbefaler for de som ikke skal bruke metoden selv.

Bok: ”Web Form Design – Filling out the blanks” av Luke Wroblewski

En hel bok om å designe forms?

Denne boka er en tankevekker på hvor viktig det er å lose brukerne trygt gjennom den kjedelige oppgaven det kan være å fylle ut skjemaer på nett. Litt avhengig av hva slags webside vi snakker om (nettbutikk, offentlige tjenester, nettbank etc.) kan det være forretnings-kritisk at en bruker klarer å gjennomføre en registrering.

Den interaksjonen som foregår er også det nærmeste man kommer en dialog mellom brukeren/kunden og organisasjonen bak, og er derfor essensiell for oppfattelsen av merkevaren.

Jeg synes boka er utrolig praktisk. For det første gir den endel gode argumenter for faktisk å ta seg tid til å gjøre en grundig jobb rundt utforming og programmering av skjemaer. Den gir deg også tall og fakta til å støtte dine designavgjørelser på. I tillegg gir boka en god oversikt over hvilke tilstander som kan oppstå underveis (feedback fra systemet) som man bør ha tenkt igjennom og designet.

”Web Form Design – Filling in the Blanks” er en bok som er verd å bruke tid på å lese. Bruk den senere som oppslagsverk til neste gang du skal designe skjemaer. Du er garantert å gjøre mange lettere til sinns og mindre frustrerte