Variabla teckensnitt
16 Jan 2019
Variabla teckensnitt
Variabla teckensnitt är ett relativt nytt sätt att visa teckensnitt på webbsidor. Artikeln ger en översikt över tekniken, och diskuterar för- och nackdelar samt användningsområden.
Artikeln tar också upp skillnaden mellan vanliga och variabla teckensnitt, och relaterade ämnen som browser support.
OBS: För att testa demot nedan krävs en modern och uppdaterad webbläsare!
See the Pen Variable font demo by Frida Nyvall (@fridanyvall) on CodePen.
Vad är variabla teckensnitt?
Variabla teckensnitt, eller “variable fonts” som de kallas på engelska, är ett gemensamt initiativ från Apple, Google, Microsoft och Adobe för att göra det möjligt att rendera flera olika varianter av ett typsnitt från en enda fil.
Eftersom initiativet stöds av så många stora företag, har tekniken implementerats relativt snabbt i de mest använda webbläsarna.
Normala vs. Variabla
Normala teckensnitt
Teckensnitt kan finnas i olika varianter. Till exempel består familjen Roboto nedan av 12 olika varianter. Det finns också en komprimerad version med ytterligare 6 varianter.
Varianter av Roboto och Roboto Condensed
Varje variant har vanligtvis ett eget namn, som “Light” eller ”Bold”. Dessa namn beskriver varianten, men bestämmer också vilket värde varianten ska ha på t.ex. bredd (ett värde mellan 1 och 999) eller vikt (ett procenttal mellan 50 och 200). När man använder normala teckensnitt har användaren endast tillgång till de fördefinierade varianterna.
För att använda en variant av teckensnittet, måste filen med varianten läggas till webbsidan. Det innebär att webbsidans vikt ökar, vilket i sin tur påverkar webbsidans sk. performance (hur snabbt sidan laddar) negativt. Därför används oftast bara ett par varianter av en font på en webbsida. Att lägga till alla 12 varianter av Roboto skulle t.ex. vara mycket negativt för en webbsidas laddningstid.
Att endast ha tillgång till en handfull teckensnittsvarianter istället för alla innebär en begränsning för webbdesigners kreativitet.
Variabla teckensnitt
Variabla teckensnitt innehåller information för alla teckensnittsvarianter i en och samma fil. Istället för att låsa sig till fördefinierade varianter med specifika värden som definierar ”Light” eller ”Bold”, har användaren tillgång till alla värden inom typsnittets definierade värdespann.
Ett variabelt teckensnitt kan också inkludera varianter med andra egenskaper. En variabel version av Roboto skulle t.ex. även kunna inkludera varje version av Roboto Condensed.
Ett variabelt teckensnitt ger tillgång till fler teckensnittsvarianter, vilket öppnar fler möjligheter att skapa mer varierande design. Det gör det enklare att justera typografin för att passa olika syften och situationer, eftersom webbdesignen inte längre begränsas till specifika fördefinierade variationer.
Performance
Även om en variabel teckensnittsfil kan vara ganska stor sett till vikt eftersom den innehåller så mycket data, borde den bli något lättare jämfört med att ladda de normala teckensnittsvarianterna som separata filer.
Vinster i laddningstid är främst något som webbsidor som använder många olika teckensnitt har nytta av. För all användning är det dock rekommenderat att se till så att filerna är så små som möjligt.
Användares upplevda laddningstid kan förbättras med variabla teckensnitt eftersom alla varianter laddas in på sidan samtidigt. Text kommer därför inte att hoppa till när webbläsaren går från en automatiskt genererad fetstil till att använda den riktiga teckensnittsfilen.
Optical-sizing
Förutom förbättrningar i performance kan variabla teckensnitt innehålla ändringar av tecknen som förbättrar läsligheten givet vissa situationer. Exempel på sådana situationer är vilken plattform som används, skärmens bredd, skärmens position eller andra begränsningar i textens omgivning.
Denna funktion kallas för optical-sizing. I skrivande stund är detta endast tillgängligt i senaste versionen av Firefox.
Custom Axes
Ett variabelt teckensnitt kan också ha egendefinierade sk. ”custom” parametrar. Dessa sätts av teckensnittets designer och kontrollerar en detalj i teckensnittets utseende. Till exempel kan en custom axis kontrollera de stansade partierna i ett teckensnitt:
Ändrar värdet på custom axis "Daffness"
Browser support
Variabla teckensnitt stödjs i de senaste versionerna av de mest använda webbläsarna: Edge, Firefox, Chrome, Safari iOS, Safari, Android och Opera. Notera att MacOS version 10.13 eller högre krävs för vissa plattformar.
För närvarande stödjs tekniken i de flesta moderna webbläsare, som används av ca. 78% av alla Internetanvändare.
Fallbacks
För webbläsare som inte stödjer tekniken kan man använda ett vanligt teckensnitt som backup. För mer information om hur variabla teckensnitt kan implementeras, läs artikeln ”How to Implement Variable Fonts on the Web” på vår techblogg.
Var kan jag hitta variabla teckensnitt?
Jämfört med antalet vanliga teckensnitt finns det fortfarande inte särskilt många variabla teckensnitt att välja mellan. Antalet kommer förmodligen att öka i takt med att tekniken blir vanligare.
- Axis-praxis är en webbsida för att visa och testa variabla teckensnitt.
- v-fonts.com är en annan webbsida dedikerad till att hitta och testa variabla teckensnitt.
- Det här är ett Google doc som listar tillgängliga variabla teckensnitt och info om dem.
Prissättning
Precis som med vanliga teckensnitt kan licensen för variabla teckensnitt variera. Eftersom de innehåller information för att skapa alla tänkbara variationer av ett teckensnitt, brukar priset vara jämförbart med att köpa alla teckensnitt i familjen.
Nyfiken på hur man implementerar variabla teckensnitt?
Läs artikeln “How to Implement Variable Fonts on the Web” på vår teknikblogg.
