Att välja typsnitt till den responsiva webbplatsen

Typsnitt har genom alla tider väckt mycket känslor. De är en stark bärare av ett kommunikativt budskap och det är inte konstigt att kända varumärken använder typsnitt som sin främsta identitetsbärare genom sin logotyp. Ericsson gör det, IKEA gör det, Coca-Cola gör det, Disney gör det och så vidare.

Men hur ska man tänka när det kommer till typsnitt på den egna webbplatsen? Gäller fortfarande de standarder som var aktuella runt år 2000 då de flesta valde Arial eller Verdana till sin webbplats? Och hur ska man tänka kring den responsiva webbplats som ska kunna läsas från en mängd olika digitala enheter så som mobil, surfplatta, smartphone, smartTV och spelkonsollen?

En sak att fundera på vad gäller den responsiva webbplatsen är att sajten behöver ladda snabbt. Hur påverkas då den responsiva webbplatsen av olika typsnittslösningar?

Nedan redogör jag för några tankegångar, för- och nackdelar och ger förslag på olika lösningar. Jag avslutar också med ett test där jag tittar på hur snabbt en sajt laddar med olika typsnittslösningar (standard och en onlinetjänst).

STANDARDTYPSNITT FÖR DEN RESPONSIVA WEBBPLATSEN

Din webbplats ska kunna läsas från en mängd olika enheter så som mobil, desktop och surfplatta. Om du vill välja bland standardtypsnitt som kommer att finnas installerade på dessa enheter kan du välja på följande i listan:

  • Arial/Helvetica
  • Courier/Courier New
  • Georgia
  • Times/Times New Roman
  • Trebuchet MS
  • Verdana

Dessa anses vara mobilsäkra typsnitt. Äldre versioner av Android kommer dock att byta ut serif fonts till Droid Serif och sans-serif till Droid Sans.

FÖRETAGETS EGNA TYPSNITT

Med tjänster som https://typekit.com/ har vi länge kunnat erbjuda företagets egna typsnitt på webbplatsen. Typekit är en onlinetjänst där man prenumerar på ett typsnitt som då läses upp på den egna webbplatsen. På så sätt behöver besökaren inte ha det specifika typsnittet installerat på sin dator för att få se det på webben (eller i mobilen).

Ett annat alternativ är också att lägga upp det egna typsnittet på webbservern och låta webben läsa därifrån. Oavsett tillvägagångssätt finns det både för- och nackdelar.

Prenumeration på en onlinetypsnittstjänst kostar en liten summa, men du kan aldrig vara säker på att tjänsten är uppe och rullar 24-7 eller att det inte blir någon delay på typsnittsrenderingen på din webbplats. Speciellt problem med å,ä och ö kan uppstå emellanåt.

Att lägga typsnittet på sin egen webbserver är då lite säkrare men å andra sidan kan det vara kostsamt att köpa loss ett typsnitt för detta ändamål.

Ett alternativ till ovanstående är att välja ett typsnitt från http://www.google.com/fonts (en gratis prenumerationstjänst från Google) och primärt köra det som en onlineprenumeration med fallbacklösning på den egna servern. Man kan alltså ladda ner typsnittet och lägga upp det på den egna servern. Dock bör man kolla på rättigheterna och i de flesta fall kreditera fontdesignern på sin egen webbplats.

MEN TILLGÄNGLIGHETSASPEKTERNA DÅ? ”GOD LÄSBARHET PÅ WEBBEN”

Vilket typsnitt är egentligen lättast att läsa på skärmen? Detta är en omdebatterad fråga och det beror på vem du frågar, i vilket land du ställer frågan och vad läsarna är vana vid sedan tidigare. Det beror inte bara på typsnittets form utan också på storlek, avstånd mellan bokstäverna, färgval, hur lång texten är etc. Det finns många aspekter att ta hänsyn till.

Ett förslag är att välja ett vanligt standardtypsnitt till brödtexter men våga leka lite med rubrikerna. Korta rubriker kan absolut fungera med ett specifikt framtaget företagstypsnitt men det bästa är förstås att testa detta på användarna innan man bestämmer sig.

Webbriktlinjerna eller WCAG 2.0 säger inget om vilket typsnitt som ska användas mer än att det ska vara god läsbarhet.

HUR PÅVERKAS DEN RESPONSIVA WEBBPLATSEN AV OLIKA TYPSNITTSLÖSNINGAR?

Vi vet att en responsiv webbplats ska kunna besökas från många olika enheter och att laddningstiden kan ha stort effekt på upplevelsen. En webbplats har ungefär 4 sekunder på sig att väcka en besökares intresse. En webbplats som besöks via mobilen kanske mindre än så. Hur påverkas då laddningstiden beroende på vilka typsnitt vi använder? Är det skillnad på om typsnittet finns installerat i besökarens digitala enhet eller inte.

Svar ja, det är stor skillnad! Tänk på en hel webbplats med script, grafik, dataanrop etc. som allt ska summeras till den totala laddningstiden. Är det då värt det lilla extra att krångla till det med unika typsnitt? Kanske – om typsnittet är så tungt för varumärkets totala identitet. Men det tål ju att tänkas på.

Här är resultatet av mina tester: 

Test 1

Standardtypsnittet Arial på både rubrik och brödtext. Typsnittet finns installerat på besökarens enhet.

Laddningstid: 140 msk

Test 2

Googles onlinefont (som att prenumerera), Roboto Condensed på rubrik, Lato på brödtext

Laddningstid: 730 msk (!)

Test 3

Kombination av Googles onlinefont och standardtyspnitt, Roboto Condensed på rubrik och Arial på brödtext

Laddningstid: 336 msk

 

TAKE AWAYS

  •  Välj ett typsnitt som ger en skön läsupplevelse, fråga gärna användarna
  •  Egna typsnitt påverkar hur snabbt sidan kommer att ladda
  •  Välj ett standardtypsnitt som är mobilsäkert för brödtexten
  •  En kombination av eget typsnitt på rubriker och standard på brödtext kanske räcker för att ändå bära upp varumärkets identitet

BRA LÄNKAR

http://www.webpagetest.org/ (testa hur snabbt en sida laddar)

http://developers.google.com/speed/pagespeed/insights/ (få tips på vad du kan göra för att förbättra laddningstiden på din sida)

http://www.webbriktlinjer.se/r/39-ge-webbplatsen-en-god-lasbarhet/ (om riktlinjer för god läsbarhet)