Variable fonts, uitgelegd voor ontwerpers

Variable fonts zijn lettertypebestanden die een doorlopend bereik van stijlen bevatten in plaats van een vaste set. In plaats van aparte bestanden voor Regular, Medium, Semibold en Bold bevat één variabel bestand elk gewicht tussen het lichtste en het zwaarste, en vaak ook andere bereiken, zoals breedte of optische grootte. Je kiest elk punt langs elk bereik, een as genoemd, zodat een kop op gewicht 680 kan staan en een bijschrift op 430 als dat het best leest.

Het formaat kwam in 2016 als onderdeel van de OpenType-specificatie en wordt nu ondersteund door elke actuele grote browser en de belangrijkste ontwerptools. Deze gids behandelt wat de assen doen, wanneer variable fonts de moeite waard zijn, en hoe je ze instelt in CSS. Voor het grotere plaatje van letters kiezen, zie basis van typografie en merklettertypen.

De assen van variable fonts en wat elk doet

Een as is een ontwerpdimensie die de letterontwerper op de uitersten heeft getekend; het lettertype interpoleert alles ertussen. Vijf assen zijn geregistreerd in de OpenType-specificatie en hebben standaardtags van vier letters. Letterontwerpers kunnen hun eigen assen toevoegen, die in hoofdletters worden geschreven.

In eigen assen krijgen lettertypen persoonlijkheid. Roboto Flex heeft een grade-as (GRAD) die het gewicht van de streken verandert zonder de letterbreedte te veranderen. Fraunces heeft SOFT voor rondere uiteinden en WONK voor zijn eigenzinnigere lettervormen. Recursive heeft de assen MONO en CASL, die het van schreefloos naar monospace en van lineair naar casual brengen. Je kunt ze allemaal verkennen op Google Fonts, waar je op variabele families kunt filteren.

Waarom optische grootte het belangrijkst is

Gewicht krijgt de aandacht, maar optische grootte is vaak de nuttigste as. Loden letters werden voor elke grootte apart gesneden: kleine groottes hadden stevigere streken, grotere x-hoogtes en ruimere spatiëring; grote groottes waren fijner, met meer contrast en krappere spatiëring. Digitale lettertypen raakten dat kwijt toen één omtrek naar elke grootte werd geschaald. Een opsz-as brengt het terug.

Met font-optical-sizing: auto (de standaard in browsers) past een lettertype met een opsz-as zich aan de lettergrootte aan die je instelt. Je hoeft niets te doen behalve een lettertype te kiezen dat de as heeft. Dat helpt vooral bij ontwerpen met een grote kop en kleine ondersteunende tekst in één familie, en dat zijn de meeste social posts en landingspagina’s.

Wanneer variable fonts de moeite waard zijn

Bestandsgrootte is de eerlijke afweging. Een variabel bestand draagt de gegevens voor elke stijl, dus het is meestal groter dan één statisch gewicht maar kleiner dan meerdere. Laadt een site alleen Regular en Bold, dan zijn twee statische bestanden mogelijk lichter. Laadt een site vier gewichten en een cursief, dan wint één variabel bestand meestal, en je krijgt elk gewicht ertussenin er gratis bij.

Tussengewichten zijn nuttiger dan ze klinken. Lichte tekst op een donkere of kleurrijke ondergrond oogt zwaarder dan hetzelfde gewicht op wit, dus je kunt witte tekst op een kleurverloop op 460 zetten in plaats van 500, zodat die optisch overeenkomt met een versie van donker op licht. Het effect is subtiel, maar het is wat een typografisch systeem afgestemd laat aanvoelen. Tekst op een kleurverloop legt het bredere leesbaarheidsprobleem uit.

Zo gebruik je variable fonts in CSS

Declareer het lettertype één keer met een bereik voor elke as, en gebruik daarna gewone eigenschappen zoals font-weight en font-stretch. Pak font-variation-settings alleen voor eigen assen, omdat het elke as tegelijk overschrijft en niet op een prettige manier wordt overgeërfd. De gids over variable fonts van MDN behandelt de details.

@font-face {
  font-family: "Brand Sans";
  src: url("/fonts/brand-sans-variable.woff2") format("woff2");
  font-weight: 100 900;   /* the wght range in the file */
  font-stretch: 75% 125%; /* the wdth range, if it has one */
  font-display: swap;
}

body {
  font-family: "Brand Sans", system-ui, sans-serif;
  font-weight: 420;
  font-optical-sizing: auto;
}

h1 {
  font-weight: 720;
  font-stretch: 90%;
}

.on-dark {
  font-weight: 390; /* light on dark reads heavier */
}

/* Custom axes go through font-variation-settings. */
.soft {
  font-variation-settings: "SOFT" 100, "WONK" 1;
}

Een variabel typografisch systeem opzetten

1. 1

   Controleer de assen

   Open de specimenpagina van het lettertype en noteer elke as en zijn bereik. Controleer of de talen en tekens die je nodig hebt in de variabele versie zitten.

2. 2

   Definieer rollen, geen gewichten

   Bepaal gewichten per rol: lopende tekst, nadruk, tussenkop, kop, label. Een systeem van vijf afgestemde waarden is beter dan negen standaardwaarden die willekeurig worden gebruikt.

3. 3

   Stem af op ondergronden

   Maak een iets lichter gewicht voor lichte tekst op donker en vergelijk beide op ware grootte met elkaar.

4. 4

   Laat optische grootte haar werk doen

   Houd font-optical-sizing: auto aan, tenzij je een reden hebt om het vast te zetten, en bekijk koppen en bijschriften naast elkaar.

5. 5

   Schrijf het op

   Leg het lettertypebestand, de asbereiken en de waarden van elke rol vast in je stijlgids, zodat niemand ze uit het hoofd opnieuw opbouwt.

Variable fonts belonen terughoudendheid. Het gaat er niet om elke waarde te gebruiken, maar om precies die paar te kiezen waarmee je tekst goed leest op elke plek waar ze verschijnt, van een alinea van 16 px tot een displaykop van 200 px.