Wikinggruppen i E-handel, SEO, Webbutveckling

Teckensnitt på nätet

Typografi & Internet - Vilka teckensnitt kan man egentligen använda på nätet?
Typografi & Internet – Vilka teckensnitt kan man egentligen använda på nätet?

Vilka teckensnitt kan man egentligen använda på nätet? Hur går det till? Vilka är riskerna och nackdelarna? I detta inlägg tänkte vi på Wikinggruppen berätta om hur det fungerar med olika typer av teckensnitt när man utvecklar på webben.

Webbsäkra fonter

Med webbsäkra fonter, eller säkra teckensnitt för nätet, så menar man teckensnitt som fungerar för vem som helst att se. Detta leder in på den kanske viktigaste frågan rörande teckensnitt på nätet, nämligen den att alla inte alltid ser det vi bygger på nätet såsom vi tänkt, om vi inte använder så kallad webbsäkra fonter.

Ett teckensnitt som används på en webbsida måste nämligen finnas i datorn, telefonen eller surfplattan som besöker webbplatsen. Annars ersätts det av ett annat teckensnitt. Detta medför ofta att sidor inte riktigt visas som man tänkt. Det kan t ex bero på att olika teckensnitt är olika stora. Något som ofta ställer till med besvärliga designproblem, där utseendet kan påverkas kraftigt av att ett teckensnitt byts ut.

Bilden nedan visar till exempel hur de vanligaste teckensnitten på nätet skiljer sig från varandra. För att illustrera skillnaden har vi lagt text på ytor som är statiska i sin storlek, vilket är mycket vanligt förekommande och en vanlig orsak till designmässiga missöden på grund av just teckensnitt.

Verdana, Arial, Sans-serif
Verdana, Arial, Sans-serif

 

I bilden ovan ser vi tydligt hur några av de vanligast förekommande teckensnitten på nätet skiljer sig från varandra, i ett och samma grafiska gränssnitt.

Verdana – det vanligaste teckensnittet på nätet

Verdana är utan tvekan det vanligaste förekommande teckensnittet på nätet. Arial är också ett mycket vanligt förekommande teckensnitt och Sans Serif (eller MS Sans Serif, Microsofts variant av teckensnittet som används ovan) är oftast det teckensnitt som webbsidor ”faller tillbaka på” om tidigare angivna inte finns. Vad betyder då detta?

Vad menas med teckensnitt att falla tillbaka på?

När man designar webb så anger man ofta flera faktorer för teckensnitt, för att på bästa sätt se till att alla datorer, telefoner och surfplattor har något av teckensnitten att tillgå. Som tidigare nämnt måste teckensnittet som ska visas på en webbplats finnas i datorn (enheten) som ska visa sidan. I många fall kan det därför se ut så här:

  • Om Verdana finns, använd det (primärt)
  • Om Verdana inte finns, men Arial finns, använd det (2:a alternativet)
  • Om varken Verdana eller Arial finns, använd sans-serif (3:e alternativet)

På så vis frågar man i tur och ordning efter de teckensnitt man vill använda och förhoppningen är ju naturligtvis att det primära alternativet ska finnas att tillgå.

Google Web font, Fontsquirrel – nya webbfonter?

För att röra till det så ska vi nu nämna att det finns tekniker för att använda teckensnitt som inte finns i datorn (enheten) som ska visa innehållet. Google har t ex utvecklat Google Web fonts (http://www.google.com/webfonts), vilket är en tjänst som baseras på att man väljer ett teckensnitt, hämtar en kod från Google och därmed kan använda lite udda teckensnitt på sin webbplats.

Men. Ja, det är inget litet men. När man väljer att använda denna typ av teknik så ska man vara väl medveten om att man frångår generella principer för hur webbläsare fungerar. Innebörden rent praktiskt är att detta fungerar hyfsat i de flesta nya webbläsare, men avvikelser är inte ovanliga. I många fall kommer olika enheter att falla tillbaka på 2:a och 3:e alternativet som anges, då de inte har stöd för att utläsa teckensnittet som man med hjälp av Google Web fonts använt för sin webbplats.

Det finns flera tjänster, liknande Google Web fonts, däribland http://www.fontsquirrel.com/. Man marknadsför naturligtvis dessa tjänster som om de skulle fungera felfritt i alla miljöer, men det är dessvärre inte hela sanningen. Det finns otaliga, oberäkneliga brister som kan uppstå när man använder denna typ av tjänster. Dessutom finns risker med att man tillåts ladda upp det teckensnitt man har i sin dator och vill använda på sin webbplats, då teckensnitten ofta är skyddade av upphovsrätt.

Göra bilder för rubriker, med egna teckensnitt

En variant, som länge använts för att uppnå effekten av typografi på nätet är att man gör bild av exempelvis rubriker. På så vis kan man profilera sig med specifika teckensnitt, helt oberoende av vad mottagaren har för teckensnitt att tillgå i sin dator.

Men detta medför andra nackdelar. Text är det som bygger relevans för våra webbsidor och det som främst ger oss möjlighet att placera oss högt upp i Googles sökresultat när någon letar efter det vi skriver om. Rubriker är ett av de viktigaste elementen för att bygga denna relevans. Om vi omvandlar rubrikernas text till bild så förlorar vi stora delar av den kraft som rubrikerna ger oss i vårt SEO-arbete. Det är därför inte alltid en lyckad lösning att göra bild av text.

Webbsäkra fonter

Det talas ofta om webbsäkra fonter och bland dessa brukar en mängd, på nätet vanligt förekommande teckensnitt nämnas. Men sanningen är inte riktigt den som den allmänna bilden ger.

Webbsäkra fonter är egentligen två stycken. De benämns Serif och Sans Serif. Om vi anger någon av dessa så har vi i princip talat om ifall teckensnittet ska ha fötter eller ej.

Serif

Sans Serif

Det vanligaste på nätet är att använda linjära teckensnitt (Sans serif), alltså utan fötter. Detta av den enkla anledningen att det länge ansetts mer lättläst än seriftypsnitt på bildskärmar. I tryckt text är det precis tvärt om. Där är seriftypsnitt vanligare och av någon anledning anses dessa mer lättlästa i tryckt format.

Microsoft Windows, Apple OS X, Linux, Android, iOS

Alla dessa olika miljöer har olika teckensnitt i sin standarduppsättning av sådana. Det betyder att de har olika förutsättningar för att visa de teckensnitt vi vill använda på våra webbplatser och att de med stor sannolikhet faller tillbaka på olika teckensnitt, när det vi angett inte finns. Microsoft har sin variant av Sans serif, likaså Apple och Linux (som också är basen för Android, vilket miljontals människor har i sin telefon). Det är just här problemet med typografi ligger, när det kommer till hur teckensnitt kan användas på nätet.

Har vi bara två teckensnitt att välja på?

När man ska använda andra teckensnitt än Sans serif och Serif så gäller följande.

Man måste kontrollera att de olika teckensnitt man sätter upp i sin lista (primärt, 2:a, 3:e etc enl ovan) har ungefär samma mått, då textstorleken kommer att anges som densamma, oavsett vilket av dem besökaren får visat på sin skärm.

Som bilden ovan visade så har olika teckensnitt, i samma textstorlek, olika höjd och olika bredd på sina tecken. Detta medför ofta stora svårigheter när det kommer till design och tyvärr också problem för mottagaren av informationen, då det ofta missas i utvecklingsprocessen att kontrollera hur de olika teckensnitten som webbplatsen har att falla tillbaka på faktiskt fungerar i den skapade designen.

Så, har du stött på en webbplats som ser konstig ut, där text löper utanför ramar i designen? Utvecklaren har förmodligen glömt att ta hänsyn till dessa aspekter.

Står du i valet och kvalet för hur du ska använda typografi på din webbplats? I så fall hoppas vi att denna artikel ska kunna vara till nytta och ge lite grundläggande inblick i hur teckensnitt fungerar på nätet!

Har du frågor? Kommentera gärna! Vi diskuterar gärna vidare i frågan här i bloggen!

Mail

Lämna ett svar

Din e-postadress kommer inte publiceras.

Nyhetsbrev

Anmäl er till vårt inspirerande nyhetsbrev som kommer en gång i månaden.