Några ord om typsnitt

Här kommer ett inlägg om saker kan vara värt att tänka på när man väljer vilka typsnitt man inkluderar i sin webbdesign och lite riktlinjer för hur man som utvecklare jobbar med typsnitt för att få en så snabb, snygg och smidig upplevelse av siten som möjligt.

fonts

Välj typsnitt med omsorg

Alla designers har sina egna skäl till varför man väljer en viss uppsättning med typsnitt. Ibland är det rent estetiskt, ibland är det funktionellt och ibland kan det vara så enkelt att ett företag redan har en tydlig grafisk profil som man ska följa där typsnitt redan finns specificerat. Här kommer tre punkter som kan vara bra att ha i åtanke när man väljer sitt typsnitt.

Känsla

Först och främst det självklara – vilken känsla vill man att ens site ska förmedla? Vill man sprida skräck och ilska genom att använda allas hatobjekt Comic Sans MS? Vill man att sidan ska kännas stilren och minimalistisk?

Funktion

Kommer sidan innehålla långa stycken text (som man dessutom vill att besökarna ska läsa) är det viktigt med ett att ha ett tydligt typsnitt för dessa texter. Vill man framhäva rubriker ska typsnittet till dessa vara starkt och ha stor kontrast mot det man valt för övriga texter. Förekommer mycket siffror bör typsnitten som väljs ha tydliga sådana.

Filstorlek

Något som designers inte så ofta har i åtanke men som utvecklare tänker på är att typsnitt kan vara ganska tunga att ladda in. Om man prioriterar en snabb sidladdning så bör man åtminstone se till att typsnittsfilerna inte är allt för stora.

 

Less is more

Det finns mer än en anledning till att inte fylla sin sida med för många typsnitt i en massa olika varianter. Att blanda olika typsnitt till samma ändamål kan ge ett spretigt och oseriöst intryck. Därmed kan det vara bra att skriva alla rubriker med samma typsnitt och all brödtext med ett. Men glöm inte bort varianter av din brödtext för kursiv och fetstilt text. Med tanke på filstorlek och hur lång tid det tar att ladda in en sida är det också klokt att hålla sig till så få varianter som möjligt för att hålla ner antal anrop som görs till servern när sidan laddas.

 

Se till att sidan ser bra ut även utan ditt specialtypsnitt

Även om många användare kanske inte gör det så är det faktiskt möjligt att i vissa webbläsare välja att inte rendera specialtypsnitt. Det är heller inte omöjligt att något går snett vid inladdningen av dina typsnittsfiler. Se därför till att definiera en lista på vilka typsnitt som webbläsaren får falla tillbaka till. Här är en länk till vilka typsnitt som finns tillgängliga att använda i de flesta browsers utan att du behöver inkludera några typsnittsfiler. Välj vilka alternativ av dessa som är mest lika dina specialtypsnitt och rangordna dem efter hur du vill att de ska användas.

 

Använd Fontface

När man ska implementera den design man valt finns det lite olika alternativ på hur man får typsnitten att visas på siten. Vissa av dem är baserade på JavaScript som går till en annan server än din egen för att hämta typsnitten och sedan rendera dem. Om du är intresserad av prestanda och snabba sidladdningar – undvik dessa! Behåll kontrollen genom att lägga typsnittsfilerna på din egen server och läs in dem med fontface.

 

Olika webbläsare beter sig på olika sätt

Webbutvecklare får ständigt kämpa med att olika webbläsare beter sig på olika sätt. Så är det också när det gäller typsnittsfiler. Vissa webbläsare kan bara hantera filer av ett visst format. Därför behöver varje typsnitt finnas tillgängligt i fem olika format: SVG, TTF, WOFF och WOFF2.

 

Är du webbutvecklare vet du om att det finns en webbläsare som vi utvecklare älskar att hata då den beter sig lite extra annorlunda jämfört med sina konkurrenter.

 

Webbläsarnas normala beteende är att de laddar ner och läser in det format av typsnittet som den är bäst på att hantera. I Internet Explorer (okej – äldre versioner av Internet explorer – version 6 till 8 – vilka de flesta användare som tur är har tagit sig ifrån) laddas ALLA typsnittsfiler ner och läses in. Konsekvenserna av detta är alltså att Internet Explorer gör fem gånger så många anrop och läser in ungefär fem gånger så mycket data för att kunna rendera dina typsnitt.

 

FontSquirrel

Så hur gör man då ifall man vill använda ett visst typsnitt och bara har fått det i ett enda filformat från sin designer? Man går till FontSquirrel. Detta är ett fantastiskt verktyg där du laddar upp din typsnittsfil och får tillbaka den i alla de format som du behöver. Allt laddas ner i en ZIP-fil som innehåller dokumentation och exempel på hur du ska använda just dina filer.

 

Benämn typsnitten efter hur de är tänkt att användas

Det exempel på CSS som du får från FontSquirrel innehåller en liten egenhet som man bör rätta till dock. Säg att du laddar upp en fil till FontSquirrel med normal vikt av typsnittet Open Sans och att typsnittsfilen heter “OpenSansNormal”. I det exempel som FontSquirrel genererar kommer din fontface-css definiera din font-family som “OpenSansNormal” med font-weight satt till normal. Om du sedan laddar upp en fil som heter “OpenSansItalicBold” som innehåller en kursiv, fetstilt variant av samma typsnitt så kommer FontSquirrel sätta font-family till “OpenSansItalicBold” och font-weight till normal. Ändra för tydlighetens skull om denna kod så att font-family i bägge typsnittsdefinitioner är satt till “Open Sans”. I det senare fallet, sätt font-weight till bold och font-style till italic.

 

Försök inte använda en vikt av ett typsnitt som du inte har definierat

I ett projekt för några år sedan var jag väldigt konfunderad kring varför ett visst typsnitt såg okej ut i Chrome för OSX, men inte i någon annan webbläsare. I det projektet använde jag siffror för att bestämma vilken vikt ett typsnitt skulle ha i en viss h-tagg. Det visade sig att jag försökte använda en vikt som jag inte hade definierat, vilket lämnade det upp till webbläsaren att försöka tolka vad jag menade. I min standardwebbläsare såg det bra ut, men i alla andra dök det upp diverse konstigheter.

 

Optimera till max

Jag har tjatat lite om att optimera för snabba sidladdningar ovan. Det kommer komma fler blogginlägg på det temat och vikten av det längre fram. Men nu när vi pratar om just typsnitt finns det ett par grejer till man kan göra om man vill jaga bytes i filstorlek och minska antal anrop.

 

Genom att välja en Base64-kodad version av de olika typsnittsformaten kan man inkludera koden för vissa av dem i sin CSS. På så vis garanterar man att CSS-filen och typsnittet läses in samtidigt och man slipper ett anrop till servern.

 

Är man säker på att man inte kommer använda alla tecken som finns tillgängliga i originaluppsättningen av typsnittet kan man välja att exkludera de tecken man inte är intresserad av. Ifall du väljer att göra detta – var noggrann med att dokumentera vilka tecken du valt att plocka bort. Annars finns det risk för att andra konstiga tecken uppstår på din site när webbläsaren försöker hitta substitut för vad som saknas i din typsnittsfil och ingen begriper vad de kommer ifrån.

 

Det var några av mina lärdomar och tankar kring området typsnitt. Hör gärna av er om ni inte delar mina åsikter, tycker att jag har missat något väsentligt eller har några frågor.

 

PELLE