2.5 Typografi

Typografi er et viktig element i oppgaven min. Mesteparten av informasjonen som skal deles er skriftbasert, og det er derfor viktig at den er lettlest og forståelig. Skjerm er et vanskelig medium å legge til rette for god typografi, da det er slitsomt for øynene å lese på skjermer. 1 Hovedgrunnen til dette er oppløsningen. I tillegg til dette har fontutvalget for skjerm også vært vesentlig mindre enn for trykk.

Som designer kan dette raskt virke litt frustrerende. Leser man seg mer opp på emnet, ser man derimot at det finnes mange muligheter for skjerm også. Oliver Reichenstein i Information Architects (iA), et av de mest fremtredende designbyråene på nett, argumenterte i 2006 for at det ikke er noen unnskyldninger for dårlig typografi på nett. Han trekker frem at typografene under den italienske renessansen hadde kun én font å jobbe med, og at de likevel produserte noen av de vakreste typografiske arbeidene vi har sett. 2 I følge Wikipedia er god typografi å tilrettelegge skrift for å gjøre språket synlig. Dette involverer fontvalg, størrelse, linjelengde, linjeavstand, justering av ordmellomrom og justering av bokstavmellomrom. 3 Det er dermed mye vi kan gjøre for å lage god typografi selv om vi bare har en font å forholde oss til. Heldigvis er realiteten i dag at vi har et betraktelig større utvalg i fonter for skjerm enn vi hadde for bare et par år siden.

Litt skrifthistorie for skjerm

Som tidligere nevnt har oppløsningen for skjermer lenge vært et problem for typografi for skjermer. På skjerm har vi måttet forholde oss til ⅓ av oppløsningen i forhold til trykkmediet. 72 DPI (for mac) eller 96 DPI (for PC) i forhold til minst 300 DPI (dots per inch) for trykk. 4 Dette er en stor forskjell med tanke på hvor liten og detaljert et skriftsnitt ofte er. På skjerm kommer ikke alltid kurvene til sin rett og virker derfor hakkete. Dette har nok vært en av grunnene til at design for skjerm ikke har vært så viktig for skriftdesignere. Da grafiske brukergrensesnitt begynte å bli vanlig, ble alle fontene laget manuelt som bitmap, hvor pikslene enten var av eller på. 5 Dette medførte et enormt merarbeid da alle fontene måtte lages manuelt for hver punkstørrelse, oppløsning og stil. Nå benyttes i stedet skalerbare vektorfiler, hvor datamaskinen regner ut hvordan fonten skal se ut. For å at skriften skal se enda klarere ut, blir også antialiasing og subpixel rendering benyttet. Dette er i praksis at kanter til former som ikke treffer på pixxelgriddet i skjermen blir gjort uklare, og utnytter det at hver piksel på skjermen består av individuelle røde, grønne og blå underpiksler. En font man oppfatter som svart og klar er derfor ikke svart og klar når man ser nærmere på den. Ved et nærmere blikk kan vi se at den har andre farger i forskjellig styrke i kantene. Dette gjør at vi oppfatter skriften som klar selv ved dårlig oppløsning. Denne teknikken har vist seg å øke presisjonen av ordgjenkjennelse med nærmere 17% i følge en undersøkelse gjennomført på Clemsom University i South Carolina. 6 På denne måten har skrift på skjerm stadig blitt bedre å lese.

Eksempel på subpixel rendering på denne siden.

Teknologisk sett skjer det også stadige forbedringer: I 2010 lanserte f.eks. Apple iPhone 4 med «Retina Display» på 326 DPI. 7 Dette vil man nok se stadig mer av i tiden fremover ettersom prosessorer og grafikk-kort blir bedre og klarer å takle denne typen skjermer med mer detaljer.

Et sted det også har skjedd mye utvikling den siste tiden er i utvalget av fonter for skjermer. I internetts spede barndom var fontinnstillingene definert ut i fra hvilken nettleser du benyttet.  Så, i 1995 introduserte nettleseren Netscape <font>-taggen. 8 Dette gjorde at designere endelig kunne spesifisere hvilke fonter brukerne skulle se nettsider i. Dessverre var brukeren nødt til å ha innstallert fonten designeren hadde spesifisert for å se siden slik den var ment å være. Dette har egentlig vært status på internett frem til CSS3 inkluderte fontnedlasting som en del av spesifikasjonene i 2011. 9 Før dette var det lite designere kunne gjøre for å ha kontroll på font-visningen. Designeren måtte forholde seg til fontene brukerne allerede hadde installert. Dette betydde i praksis at Helvetica (mac), Arial, Verdana, Tahoma, Times New Roman og Courier var fontene man hadde å forholde deg til om du skulle være sikker på at alle fikk sett siden likt. Man spesifiserte fontene i CSS-koden ved å først definere hvilken font man ønsket, deretter hvilken font som skulle brukes om den første ikke var installert, osv. Det at man bare kunne benytte seg av dette lille utvalget av fonter var selvfølgelig vanskelig å godta for designere. Det ble derfor utviklet diverse løsninger for dette problemet. Noen erstattet teksten med bilder (cufon), mens andre erstattet teksten med flash (sIFR). Dette var problematisk på flere måter, da brukerne var avhengig av Flash eller Javascript for å se løsningen slik den var ment å være. Teksten var i flere tilfeller heller ikke mulig å markere, og det hele var mye tyngre å laste ned. Heldigvis har dette endret seg mye med større implementering av CSS3 og inkludering av fonter på nettsider.

Hva er en god skjermfont?

Implementeringen av CSS3 har gjort at designere endelig kan benytte flere fonter på nettsidene sine. Dessverre finnes det ikke så stort utvalg når det gjelder fonter designet for skjerm. De siste årene har det heldigvis kommet flere løsninger spesielt laget for dette formålet.

En god skjermfont må være lettleslig. Hovedproblemet på skjerm er som sagt oppløsningen, og at mindre, mer delikate detaljer forsvinner eller blir for tydelige eller utydelige. Seriffer har derfor en tendens til å bli uklare og forstyrre skriftbildet mer enn det tilfører det noe. Chuck Bigelow, med-designeren til Lucida-familien, forteller at «Serifs should be small things – but on screen they become big – no longer visual cues but noise –distracting chunks of interference.» 10 Det finnes selvfølgelig hederlige unntak også her, men hovedsakelig er det nok smart å unngå dette for leselighetens skyld.

Fonter for skjerm bør ha lav kontrast og lik tykkelse, slik at fonten har en klarest mulig form. 11 Det er også viktig at det er god plass innad i bokstavene, slik at de har tydelige individuelle former. Bokstavmellomrom er også viktig, da enkelte former kan ha en tendens til å gli inn i hverandre. Om dette ikke er tatt høyde for kan for eksempel bokstavene b og o lett komme borti hverandre, noe som er svært forstyrrende for skriftbildet.

Chuck Bigelow anbefaler også å benytte seg av en font med stor x-høyde. 12 Grunnen til dette er at du har såpass få piksler å jobbe med på skjerm, og mesteparten av skriftsnittets informasjon foregår innenfor denne x-høyden. Ved en høyere x-høyde er det dermed mer plass å få denne informasjonen innenfor. Dette gjør at de forskjellige karakterene blir mer definert og blir tydeligere å lese.

Noen fontfamilier spesielt laget for skjerm:

Verdana

Verdana er en av verdens mest brukte fontfamilier for skjem. Den ble designet av Matthew Carter i 1996 og har siden blitt distribuert til nesten 98% av verdens datamaskiner. 13 Fontfamilien ble spesielt designet for å være leselig i små størrelser på skjerm. Det er lagt spesielt vekt på å gjøre lignende karakterer som I, i, J, l og 1, mest mulig identifiserbare og forskjellige. De forskjellige karakterene ble først skissert opp som bitmaps, før Carter svært nøyaktig lagde en outline tilpasset bitmap-tegnene, en omvendt tilnærming enn det som er vanlig for skriftdesign. 14 Avstanden mellom tegnene er spesielt tatt hensyn til for å gjøre fonten mest mulig lettlest. Carter satt opp ett avsnitt med tekst i Verdana, og ett i en annen font, og gikk bakover i rommet til et av avsnittene ble uleselig. Deretter justerte han Verdana i forhold til dette. Verdana finnes i fire skriftsnitt: Verdana (regular), Verdana Bold, Verdana Bold Italic og Verdana Italic.

Georgia

Georgia er også en fontfamilie designet av Matthew Carter. Det er en seriff-font spesielt designet for skjermbruk i mindre størrelser. X-høyden er spesielt høy i forhold til andre seriff-fonter som f.eks. Times New Roman, men fremdeles mindre enn Verdana. Som Verdana har denne fonten en kraftig forskjell mellom regular og bold. Et av hovedproblemene som oppstod underveis i utviklingen av fonten var at seriffene virket unødvendig tykke, da de til tider ble like tykk som resten av karakteren. Et annet problem var at tallene virket forvirrende. «The variations were so slight that it looked like a mistake,» forteller Carter. 15 Derfor overdrev han forskjellen ved å lage tallene som «old style karakterer», noe som i ettertid har blitt ett av kjennetegnene til Georgia. Georgia består av Georgia (regular), Georgia Bold, Georgia Bold Italic og Georgia Italic.

Azuro

Azuro er en fontfamilie for skjerm designet av Georg Seifert i 2011. Leselighet for skjerm var hovedfokus gjennom hele prosessen. «Azuro is probably the first type family whose appearance on screen was extensively tested on MS Windows, Mac OS and Apple iOS already during the earliest stages of the design process, and whose design was informed by the results of this continuous testing» 16 Det som skal skille Azuro fra Verdana og Arial, er at den har mer personlighet. I følge designeren Georg Seifert er dette mer for leselighetens skyld enn det estetiske. Skriftformen er basert på skjelettet til seriff-fonter, samtidig som den henter elementer fra håndskrift på de tegnene som har en tendens til å ligne andre. Hver eneste strek og kurve har gjennom hele prosessen blitt nøye sjekket mellom disse forskjellige plattformene og finjustert. 17 Dette ble gjort for å sikre at fonten skal fungere bra på tvers av de fleste brukte enheter. Fonten består av 4 forskjellige skriftsnitt: Basic, Italic, Bold og Italic Bold.

Droid-familen

Droid familien ble designet av Steve Matteson i Ascender i 2006 i samarbeid med Google. Målet var å lage en lettleselig kvalitetsfont for mobile plattformer. 18 Skriften er i tillegg optimalisert for bruk i nettlesere, menyer og annen skjermbasert tekst. Det har opprinnelig blitt laget 7 fonter i denne familien, og den blir stadig forbedret og utvidet. Per dags dato består Droid-familien av snittene Droid Sans (regular, bold), Droid Sans Mono (regular, bold) og Droid Serif (regular, italic, bold, bold italic). I tillegg er det utviklet en Handset Condensed family som et tilleggssnitt. 19  I motsetning til Azuro var målet at den ikke skulle ha så mye personlighet. Designerne ønsket at den skulle være «nyttig, komfortabel å lese, og ikke på noen måte distraherende» 20. For å nå flest mulig, samarbeidet de også med en partner i Kina om en kinesisk, japansk og koreansk versjon av Droid-familien. Hele Droid-familien, med unntak av condensed-versjonen, er åpen og tilgjengelig for dem som vil bruke dem.

Et eksempel som viser noen av tegnene som er lettest å forveksle i de forskjellige fontente

Avstand og skriftstørrelse

Information Architects nettside er kjent som en nettside med fokus på typografi. I motsetning til mange andre sider på nett, virker skriftstørrelsen her stor. Den er relativ, slik at den endres etter skjermstørrelsen, men for de største skjermene ligger den rundt 16 px. Dette føles svært behagelig å lese, og det er nok hakket større enn man ville satt en bok. Men kanskje dette er nødvendig for tydelig typografi på nett?

Selv sier Oliver Reichenstein «The font size you are reading right now is not big. It’s the text size browsers display by default. It’s the text size browsers were intended to display. […] It looks big at first, but once you use it you quickly realize why all browser makers chose this as the default text size». 21 En naturlig forklaring på hvorfor tekst bør vises i denne størrelsen er avstand. De fleste av oss sitter mellom 50 og 60 cm fra skjermen. 22 Dette er vesentlig lengre vekke enn når vi leser bøker. Som D Bnonn Tennant sier i sin artikkel om skriftstørrelse: «De fleste holder ikke magasiner på en armlengdes avstand…» 23. Han hevder også at 16px tekst har omtrent samme skriftstørrelse som tekst i en bok eller et magasin om vi tar avstand med i beregningen.

Craig Mod, designer for det populære sosiale magasinet Flipboard på iPad, har også erfart dette og overført tanken om avstand til iPad. Nettbrett brukes på en annen måte enn datamaskiner, avstanden mellom øynene og skriften her er mye mer variabel. Craig Mod har identifisert 3 hovedavstander: nær, medium og fjern, eller «seng», «kne» og «frokost» som han også kaller det. 24  Ved å lage en mal for skjermlesing kalt Bibliotype, presenterer han hvordan denne tilnærmingen til avstand kan fungere. Etter å ha prøvd det ut en stund selv må jeg si meg enig. Som leser er det mye mer behagelig å få innholdet definert i forhold til avstanden du har, spesielt på nettbrett som har et såpass vidt bruksområde. Når jeg sitter og leser i sofaen har jeg et annet lesemønster og avstand enn når jeg sitter ved frokostbordet og spiser, og dette gjør kanskje at designere kanskje bør tilpasse typografien for disse forskjellige situasjonene også?

Hva kan jeg ta med meg videre?

Etter å ha sett nærmere på typografi for skjerm ser jeg mer og mer hvor viktig det er med en god typografisk løsning i prosjektet mitt. Dette er noe jeg bør fokusere på, og prøve ut løsninger i mange forskjellige settinger og på ulike skjermer. Jeg bør nok i første omgang fokusere på de 4 skjermfontene jeg har sett nærmere på her, men også et lite utvalg av andre fonter jeg kommer over som er laget for skjermbruk. Aspektet med størrelse og avstand er noe jeg synes er spesielt interessant, da dette kan være en god måte å gjøre innholdet lettere tilgjengelig og lettere å lese i forskjellige brukssituasjoner.

Videre lesing:

Fotnoter:

  1. The technology of text. (nedlastet 17. november 2011)
  2. The Web is all about Typography. Period. Information Architects. (nedlastet 11. november 2011.
  3. (nedlastet 17. november 2011)
  4. Dots Per Inch. Wikipedia. (nedlastet 17. november 2011)
  5. The technology of text. (nedlastet 17. november 2011)
  6. Lee Gugerty et al.,(2004) ”Sub-pixel Addressing Improves Performance,” ACM Transactions on Applied Perception , Vol. 1, no. 2 pp. 81–101.
  7. iPhone 4. Wikipedia. (nedlastet 11. november 2011)
  8. Web typography. WIkipedia. (nedlastet 11. novemeber 2011)
  9. CSS3 Webfonts. W3C (nedlastet 11. november 2011)
  10. The best faces for the screen. (nedlastet 11. november 2011)
  11. The Anatomy of Web Fonts Article. Sitepoint. (nedlastet 17. november 2011)
  12. The best faces for the screen. (nedlastet 11. november 2011)
  13. Verdana. Wikipedia. (nedlastet 17. november 2011)
  14. Georgia & Verdana. (nedlastet 17. november 2011)
  15. Quirky serifs aside, Georgia fonts win on Web – Style – International Herald Tribune (11. november 2011)
  16. Azuro – a new typeface for reading on screens. (nedlastet 17. november 2011)
  17. Azuro – a new typeface for reading on screens. (nedlastet 17. november 2011)
  18. Droidfonts. (nedlastet 11. november 2011)
  19. Droidfonts (nedlastet 11. november 2011)
  20. Droidfonts. About. (nedlastet 17. november 2011)
  21. The 100% Easy-2-Read Standard (nedlastet 11. november 2011)
  22. Computer Vision Syndrome (nedlastet 17. november 2011)
  23. 16 pixels body copy – anything less is a costly mistake (nedlastet 11. november 2011)
  24. A simpler page. A list a part. (nedlastet 17. november 2011)