Nygammal webbteknologi revolutionerar dagens webbdesign

Sedan webbens födelse har webbformgivare haft få alternativ när det gällde val av typsnitt för webben. Innan Netscape lanserade <font> taggen hade man faktiskt ingen möjlighet alls att ange typsnitt. Idag har vi vant oss vid Arial, Times och Verdana. Kanske någon djärv formgivare har gjort något kul med Courier New. Men det har oftast stannat där. Som en sista utväg har man använt bilder för rubriker och knappar för att kunna realisera formgivarens vision. Men detta har de senaste åren avtagit dramatiskt i takt med att man blivit mer medveten om hur detta påverkar synligheten hos sökmotorerna. Alternativa lösningar som SiFR och Cúfon (som vi använder på vår sajt) har på senare tid dykt upp som intressanta alternativ eftersom de inte utgör ett hinder för sökmotorer. Men de har desvärre också haft vissa problem, bl.a: beroende av Flash, svårt att klippa-och-klistra texten samt vissa positions-/marginalproblem.

Men under 2010 upplevde vi hur en nygammal webbteknologi öppnade dörren för att helt fritt kunna välja bland typsnitt. Teknologin kallas för ”font downloading” eller ”embedded font” och innebär att hela fonten laddas ner ifrån servern och kan sedan användas av webbsajten. Det hela går snabbt i bakgrunden. Jag säger att den är nygammal för den har faktiskt funnits sedan Internet Explorer 4.0 som släpptes 1997, men som inte fick vidare spridning p.g.a att inga andra webbläsare då stödde tekniken.

Men nu är det alltså annorlunda. Sedan CSS3 standarden och @font-face stödet har alla av de vanligaste webbläsare börjat använda tekniker och resultatet kan vi nu skåda på många sajter.

Hur gör jag för att använda tekniken?

Kortfattat behöver du hitta ett typsnitt du gillar. Det finns i stort sett två alternativ för detta.

1. Konvertera ett eget typsnitt och lägg upp direkt på din egen webbsida
   Detta kräver att typsnitt är i rätt format. Sedan länkar ni in den på er hemsida. För att komplicera det hela finns det flera olika filformat som stöds av olika webbläsare så för att få komplett stöd hos besökarna behöver man lägga upp tre olika versioner av varje typsnitt. Internet Explorer kräver EOT, Firefox och de flesta andra webbläsare WOFF eller TTF och Safari för Iphone och Ipad kräver SVG.
2. Använda färdiga typsnitt som hostas av olika leverantörer
   Detta är enklare men här är man begränsad av det utbud av typsnitt som leverantören erbjuder. Google Fonts erbjuder ett hundratal typsnitt helt gratis. Typekit erbjuder ännu fler men tar en månadspeng för tjänsten.

När du valt typsnitt länkar du enkelt in typsnitten med javascript och CSS (@font-face). Jag tänkte inte ta upp det i denna bloggpost för det finns många andra bra artiklar på nätet på det.

Fördelar

Den uppenbara fördelen är att den nya tekniken öppnar upp för användandet av allt fler typsnitt och därigenom snyggare och trevligare webbsajter.

Exempel på kreativ användning av typografi på webben.

Och vi kan göra det hjälp av webbstandards utan att behöver använda workarounds som att använda bilder eller flash!

Nackdelar

Hur bra är då tekniken? Kan vi verkligen välja och vraka och köra på? Min erfarenhet är ett ”Nja”. Det finns några fallgropar som man får se upp med:

Licensproblematik

Om du väljer att embedda på din egen sida behöver du se upp med licenserna. De flesta typsnitt bär någon form av licens som reglerar hur typsnittet får användas. Här har det inte varit helt lätt att utröna om man får använda dem för font embedding. Men detta håller också på att ändras. MyFonts.com uppdaterade nyligen sina licenser och erbjuder en särskild anpassad licens för font embedding som är mycket förmånlig. Men alla typsnittsleverantörer hänger inte med. Monotype/ITC ville att vår kund skulle betala 6000 kr för att få använda typsnittet Charlotte Sans på sin hemsida. PER ÅR.

Kvalitet

Tyvärr har jag märkt att kvaliteten på renderingen varierar mellan olika operativsystem och webbläsare.  En översikt av typsnittet Rooney Web i olika operativsystem ser ut så här:

För WinXP användare blir det nästan oläsligt i de små storlekarna. Vi har även haft erfarenhet av att texten klipps av ovanför och under även på mellanstora storlekar på Windows 7. Detta har gett effekten att prickarna ovanför åäö samt krokarna på gyj har klippts av. Lösningen har varit att förstora storleken på typsnittet eller välja ett annat typsnitt.

Prestanda

Typsnittsfilerna måste laddas ner till besökarens dator innan typsnittet kan visas korrekt. De flesta typsnitt som hostas av andra leverantörer (Google Fonts etc) är komprimerade för snabbare nedladdning och ju mer webbsajter som redan använder samma typsnitt så ökar chansen att just det typsnittet redan finns i besökarens cache och kan laddas direkt.

Om du gör sina egna typsnittsfiler (t.ex. med http://www.fontsquirrel.com/fontface) så tänk på att exkludera sådana tecken som du inte planerar att använda (t.ex. kyrilliska etc) och inkludera inte fet/kursiva om du inte planerar att använda de varianterna heller. Då blir filerna mycket mindre.

Slutsats

De nya modernare webbläsarna erbjuder ett rejält kliv framåt för en snyggare webb med roligare typografi. Om det används rätt, dvs. för rubriker och dekorationstext blir det ett riktigt lyft på de flesta sajter. Man bör undvika att använda det på längre texter i mindre storlekar.

Länktips för inspiration:

Texterna på affischerna på denna sajt är helt satta med webbtypografi. Otroligt snyggt!

http://www.voltagefashionamplified.com

Följande sajt står vi på Camelonta bakom och den använder Arial Rounded för rubriksättning:

http://www.iuc-yrkeshogskola.se

SVD.se använder ett eget typsnitt för rubriker:

http://www.svd.se

Mer inspiration:

http://www.extensis.com/en/WebINK/samples/holiday

http://nicewebtype.com/fonts/museo-and-sans

<<- Tillbaka till listan