Insikt_ 2020.06.09
Snabbare webb med Variable Fonts
Variable Fonts är inget nytt. Redan 2016 lanserades det nya typsnittsformatet av Google, Apple, Microsoft och Adobe. Ett nytt format som möjliggör att en enda typsnittsfil innehåller mängder av varianter av ett typsnitt. Men nu från och med maj 2020 finns fullt stöd för detta i nästan alla webbläsare.
Ett av de viktigaste kriterierna för en bra webb är att den laddar snabbt. Inte minst för användarupplevelsen, men lika mycket för hur din webbplats rankas av Google. Hos oss på digitala byrån Wonderfour är Page Speed något vi jobbar med dagligen för att jaga bästa möjliga prestanda. Vi vet att för många av våra kunder kan ett högt betyg i Googles egna Page Speed Insights betyda stor ökning av trafik, billigare CTR för AdWords och ökad konvertering.
En vanlig bov i sammanhanget är de typsnitt (teckensnitt/fonter) som används på webbplatsen. Ju fler typsnitt som används, desto tyngre sajt. Men det är inte bara mängden typsnitt som påverkar – antal skärningar, alltså varianter av typsnittet som används påverkar också. Ett typsnitt med många skärningar; thin, light, regular, medium, bold, extra bold osv. gör det enklare att skapa ett bra och tilltalande gränssnitt. Men fram tills nu har varje av dessa skärningar hanterats som ett eget typsnitt i en egen fil. Så också med varianter av dessa som kursiv. Och då alla dessa filer oftast måste laddas in i användarens webbläsare innan sidan kan laddas klart kan det snabbt skapa en fördröjning, kanske den fördröjning som gör att besökaren vänder i dörren eller att Google upplever att en konkurrents webbplats bör visas högre upp i sökresultatet.
Men från och med i maj 2020 kan vi alltså utnyttja potentialen i Variable Fonts utan att vara oroliga över att stöd saknas i merparten av de moderna webbläsarna. Och för de webbläsare som inte erbjuder stöd för detta går det enkelt att skapa en fallback.
Väldigt förenklat går det att via CSS styra storlek, vikt, bredd och lutning på en Variable Font (variabel font eller v-font). Det går alltså bra att själv bestämma exakt hur ”fet” eller hur kursiv/lutad en variant av typsnittet ska vara. Eftersom detta hanteras via CSS går det också bra att animera texten. Fritt fram att leka alltså, men som alltid när en ny teknik börjar användas kan det vara bra att vara måttfull.
Förutom den stora fördelen med att potentiellt spara hundratals kilobyte eller till och med flera megabyte vid inladdningen av din webbplats samt att det med Variable Fonts plötsligt blir ok att använda fler typsnitt och skärningar finns ytterligare en stor fördel – typografisk kontroll. När det tidigare i bästa fall funnits några skärningar av ett typsnitt finns nu närmast oändligt antal varianter. Känns Roboto Medium 500 inte tillräckligt fet, samtidigt som Roboto Bold 700 blir för fet? Inga problem, du kan nu med exakta tal från 1-200 styra exakt hur tunn, fet eller lutad texten ska vara.
Okej, det här låter ju toppen, vad är haken? Haken är antalet typsnitt som idag är utvecklade för att fungera som Variable Fonts. Ännu så länge är de få. Microsoft har några, Adobe några fler och Google (såklart) flest. Men i det fall att du kan tänka dig att använda några av dessa typsnitt, då är Variable Fonts ett självklart val i nästa webbprojekt. För alla älskar vi ju snabba sajter med bra typografi!
Läs mer om Variable Fonts i denna matiga artikel:
Introduction to variable fonts on the web
Behöver ni hjälp med strategi, design, ux eller webbutveckling i ert nästa digitala projekt? Vi är digitalbyrån Wonderfour i Stockholm och vi har sedan 2010 hjälpt våra kunder att lyckas digitalt.
Vill du veta mer? Prata med Lena Fischer, Head of New Business, på +46 70 710 83 43 / lena@wonderfour.se
