De toekomst van typografie op je website: Variable fonts

Als internetbureau ontkom je niet aan de laatste trends. Dagelijks houden we de ontwikkelingen op het gebied van webkleuren, illustratie, fotografie en ook typografie in de gaten. Zodat we onze opdrachtgevers altijd de nieuwste technieken kunnen bieden. Één van de ontwikkelingen op het gebied van typografie is het ontstaan van 'variabele fonts'. In dit artikel lees je wat het is en hoe we het gebruiken.

De afgelopen jaren zien we dat variable fonts een opmars maken. Grote namen als Google, Microsoft en Adobe houden zich hier mee bezig. Variable fonts zijn simpel gezegd: “lettertype variaties binnen één lettertypebestand”. Dit zijn Lettertypes die zich in grootte, breedte en lengte  aanpassen aan de (digitale) witruimte waarin ze gepresenteerd worden. En dit kan heel groot worden.

Met je neus op je scherm

We spenderen veel tijd achter beeldschermen en veel van die tijd lezen (of scannen) we teksten. Veel teksten op het web zijn echter niet geoptimaliseerd voor het web. Leesteksten zijn veelal te klein, met name op mobiele websites, waardoor gebruikers het scherm van smartphone heel dicht tegen hun neus aan moeten drukken. In het openbaar vervoer zien we mensen zich in bizarre houdingen vouwen om een Buzzfeedlijst over 10 bekende Nederlanders met aambeien te kunnen lezen. Bovendien doen we dit met krampachtige, voorovergebogen nekken. Grotere en duidelijkere typografie, die zich automatisch aanpast aan het scherm waarop je leest, is daarom niet alleen beter leesbaar, maar ook goed voor je houding.

“Variable type is voor typografie wat responsive design was voor webdesign.”

Meerdere gewichten in één font

Naast verschillende grootte, breedte en lengte kennen lettertypes ook verschillende “gewichten”. Dit zijn bijvoorbeeld de “bold”,”regular” en “italic” variant van een lettertype. Tot nu toe moesten al deze gewichten ingeladen worden door de website of app waardoor sites traag en log werden. Een oplossing hiervoor was: een enkel regulier gewicht inladen om op basis hiervan de browser met behulp van code zelf een dikke of schuingedrukte versie te laten genereren. Deze “gewichten” noem je Faux (dat is dus Frans voor vals of nep), omdat ze niet zo bedoeld zijn door de ontwerpers van een lettertype ze zijn gegenereerd door code. Variable fonts ondervangen dit probleem. In een variable font bestand kan een letterontwerper zo veel gewichten kwijt als wensbaar is.

Verschillende fonts voor verschillende apparaten

Variable fonts kunnen zelfs nog een stapje verder gaan. Behalve grootte en gewicht kun je met een variable font bestand zelfs een geheel lettertype variabel maken. Zo kan tekst op het schermformaat van een desktop in Times New Roman zijn en op een Apple watch in Arial en toch hetzelfde bestand zijn. Alles voor optimale leesbaarheid.

De mogelijkheden met variable fonts zijn groot. De techniek staat echter nog in de kinderschoenen en het valt te bezien hoe de ondersteuning voor variable fonts zal zijn. Dat de grote techbedrijven er mee bezig zijn is in iedere geval hoopgevend.