Typograferingsexperiment
Under en tid kommer vi att utföra en del webbtypograferings-experiment på www.xponent.se. Syftet är att utvärdera TypeKit och se om tjänsten fungerar och gör det den ska. Det vi laborerar med är enbart rubriker och brödtext, navigationen får anstå till dess att vi kommit en bit på väg.
TypeKit är en lösning som möjliggör att visa exakta typsnitt på en webbplats. Normalfallet är att man som designer anger en serie typsnitt för varje text som skall typograferas. När en besökare kommer till webbplatsen, letar besökarens browser igenom sin dator efter de typsnitt som är angivna och använder det första hittade typsnittet i listan för att presentera texten. Finns inga typsnitt skall designern ha angett t.ex. »serif« och då använder browsern ett förutbestämt serif-typsnitt.
TypeKit har en massa typsnitt på servrar runt om i världen. Typsnitten kommer från anslutna designers som licensierat sina typsnitt till TypeKit. Som designer betalar du en avgift/år för att kunna använda deras typsnitt. Nu kan designern direkt peka ut ett typsnitt på TypeKits server och få detta visat på sin sida.
Bodoni är ett av många alternativ
Givetvis så finns det en del äldre webbläsare som inte klarar av att visa TypeKit-fonter, men Safari’s, Firefox’s och Internet Explorer’s senaste versioner fungerar bra med TypeKit.
De typsnitt vi använder för tillfället i vårt experiment hittar du om du klickar på den lilla grå knappen längst ner till höger i webbläsaren.
Dessutom… vi experimenterar lite med skuggor på våra typsnitt samtidigt, vilket inte heller syns i alla webbläsare. Firefox och Safari, vet vi att de kan visa skuggor, har du en webbläsare som klarar det lämna gärna en kommentar nedan. Rubrikerna »Aktuella projekt« och »Vi skriver om« ute till höger skall se lite luddiga ut om det funkar i din webbläsare.
Experimenterandet fortsätter… Efter att ha provkört Typekit i »Trial mode« och gillat det som systemet tillförde har vi nu gått över till skarpt läge och skaffat en portfoliolicens.
Fortfarande provar vi lite olika typsnitt, men nu har vi obegränsad tillgång till fonter och har kunnat typografera menyer, knappar och en del av ledtexterna. Vi har använt Museo Slab i rubrikerna, FF Meta Serif till brödtexten, FF Meta Small Caps för breadcrumbs och ledtetxter, samt FF Netto i menyer och knappar.
Att få möjligheten att typografera en webbplats är riktigt befriande. Att vi använt tre olika typsnitt från FontShop är mer än en tillfällighet. Dels så är Erik Spikermans fonter snygga och ytterligt lättlästa, dels har vi fått ett uppdrag där vi ska implementera FF Meta genomgående för att följa uppdragsgivarens profilprogram. De skärningar av Meta som ingår i Typekit är specialgjorda för webben, vilket syns då läsbarheten är mycket hög även i små grader. Titta speciellt på FF Meta Small Caps som vi använder i 11 pixels storlek och enbart lowercase i breadcrumbs, resultatet är helt enastående med utsökt tecknade texter.
Ny tjänst från Monotype som gör ungefär samma sak som TypeKit, http://webfonts.fonts.com/. Vi har inte provat den ännu, utan bara skaffat oss ett konto. Återkommer med en rapport efter att vi är klara med vårt första TypeKit-uppdrag.
Det vi vet just nu är att det än så länge är en beta-version som Monotype lägger ut. Systemet innehåller för tillfället 2000 fonter, och deras mål är att när allt lanseras kommersiellt kunna erbjuda 7000 fonter ur Monotypes, Linotypes och ITCs kataloger. Det innebär att vi kommer att ha tillgång till en mycket stor del av de fonter som används dagligen av svenska företag och organisationer. Men det kommer också att finnas en mängd mindre kända och inte lika använda fonter tillgängliga från en mängd formgivare som Matthew Carter, Bo Berndal och Erik Spiekermann…
Att använda Typekit behöver inte betyda att man bjuder besökare utan »rätt« webbläsare på en sämre upplevelse. Vi har i vår egen design försökt hitta en typografering som fungera för alla. De två typgraferingarna måste också komplettera varandra tekniskt, då man i vissa webbläsare* får en FOUT, »flash of unstyled text«. Det innebär att texten under en bråkdel av en sekund visas utan Typekit-stöd. Därför måste de två typograferingarna inte ta upp alltför olika stora ytor och gärna vara fonter som liknar varandra.
Vår fallback-lista ser ut så här för H1…
”museo-slab-1″,”museo-slab-2″,Rockwell, ”Lucida Grande”, Arial, Tahoma, Verdana;
Museo Slab och Rockwell är typsnitten som kompletterar varandra här. Vi vet att Rockwell inte tillhör de typsnitt som man generellt kallar för webbfonter, men då de flesta användare har Office-paketet installerat så är det ett trick som fungerar.
Bilden nedan visar hur upplevelsen blir för en besökare som anländer med och utan Typekit-stöd i sin webbläsare. Bilden t.v. är renderad i Flock, bilden till höger i Safari, båda installerade på en Mac (klicka på bilden för pixelperfekt återgivning).
Använder du Typekit eller Monotypes lösning? Lägg en länk i en kommentar, det vore kul att se fler lösningar.
* Webbläsare som ger en FOUT: Firefox och Opera.
Om du vill se vilka typsnitt vi använder för tillfället, besök då http://typekit.com/colophons/rnm3kfh
En gratislösning för att addera »riktig« typografi flöt upp när jag gled över Google Code, http://code.google.com/webfonts. Det var enbart ett tjugotal fonter i biblioteket, men alla var fria att använda under GPL. Och… de var alla formgivna av personer som kan typografi.
Vårt första TypeKit-jobb blev LO’s webbplats för ungdomar, där hela webbplatsen typograferades med Meta (http://typekit.com/colophons/zor1gnz) i olika grader och vikter. Just att vi kunde hålla ner antalet typsnitt till endast 3 gör att laddtiderna för webbplatsen hålls ner.
Hela typograferingen följer den design som finns framtagen för allt LOs ungdomsmaterial (jmfr med deras JOBBA!-broschyr på Issuu). Brödtext och rubriker är helt typograferat enbart med Meta Web Pro, där vi använt Bold och text-transform: uppercase för rubrikerna. Även menyerna är typograferade med Meta Web Pro, där vi också valt att använda text-shadow för att ge dem ett eget utseende.
Type Rendering, ett projekt som tittar på hur man kan få typografering se bra ut i alla webbläsare, på alla plattformar. http://typerendering.com/mix/