# Variable fonts, uitgelegd voor ontwerpers

[Canonical HTML page](https://gradiently.design/nl/guide/variable-fonts)

Eén bestand, elk gewicht ertussenin, en letters die zich aanpassen aan de grootte waarop je ze zet. Variable fonts veranderen wat een typografisch systeem kan, als je weet welke assen je moet pakken.

## The short version

- Een variable font is één lettertypebestand dat een doorlopend bereik van stijlen bevat, zoals elk gewicht van thin tot black, in plaats van één bestand per stijl.
- Elk bereik heet een as; de vijf standaardassen zijn gewicht, breedte, cursief, helling en optische grootte.
- Met variable fonts kun je tussenwaarden kiezen, zoals een gewicht van 450 of 650, en tekst precies afstellen op elke grootte en achtergrond.
- Elke actuele grote browser ondersteunt variable fonts, en veel families op Google Fonts zijn beschikbaar als variabel bestand.
- Een variabel bestand kan groter zijn dan één statische stijl, dus de besparing komt wanneer je meerdere gewichten of breedtes uit dezelfde familie gebruikt.

**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](https://gradiently.design/nl/guide/typography-basics) en [merklettertypen](https://gradiently.design/nl/guide/brand-fonts).

## 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.

| As | Tag | Wat het verandert | CSS-eigenschap |
| --- | --- | --- | --- |
| Gewicht | `wght` | Dikte van de streken, van thin tot black | `font-weight` |
| Breedte | `wdth` | Letterbreedtes van smal tot breed | `font-stretch` |
| Optische grootte | `opsz` | Detail, contrast en spatiëring afgestemd op de grootte | `font-optical-sizing` |
| Helling | `slnt` | Een schuine hoek zonder de lettervormen te veranderen | `font-style: oblique` |
| Cursief | `ital` | Schakelt over naar echte cursieve lettervormen | `font-style: italic` |
| Eigen as | bijv. `GRAD`, `SOFT` | Alles wat de ontwerper definieert | `font-variation-settings` |

De vijf geregistreerde assen, plus eigen assen. Niet elk variable font heeft elke as: controleer wat het jouwe bevat.

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](https://fonts.google.com/variablefonts), 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.

Een staand ontwerp met één enkel woord, heel groot gezet op een achtergrond met kleurverloop

Displaygroottes: een as voor optische grootte verscherpt het contrast en sluit de spatiëring naarmate tekst groeit.

Een staand ontwerp met een kop en kleine ondersteunende tekst in dezelfde letterfamilie

Tekstgroottes: dezelfde familie opent en versterkt kleine tekst, zodat die een telefoonscherm overleeft.

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

### De moeite waard

- Je gebruikt drie of meer gewichten of breedtes uit één familie
- Je wilt tussengewichten om tekst op verschillende achtergronden in balans te brengen
- Koppen en kleine tekst delen een familie met een as voor optische grootte
- Je wilt gewicht of breedte animeren in bewegend werk

### Waarschijnlijk niet

- Je gebruikt altijd maar één of twee gewichten
- De statische snede is kleiner en je hebt nooit andere stijlen nodig
- Je tool of platform kan geen aswaarden kiezen
- De variabele versie mist een stijl of taal die je nodig hebt

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](https://gradiently.design/nl/guide/text-on-gradient) 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](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_fonts/Variable_fonts_guide) van MDN behandelt de details.

```css
@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;
}
```

Standaardassen via standaardeigenschappen; eigen assen via `font-variation-settings`. De bereiken in `@font-face` moeten overeenkomen met wat het bestand bevat.

> **Gewicht animeren verschuift tekst** In de meeste lettertypen zijn zwaardere letters ook breder, dus gewicht animeren bij hover laat de omringende tekst verschuiven. Gebruik een lettertype met een grade-as, of bewaar gewichtsanimatie voor losse woorden en koppen.

## Een variabel typografisch systeem opzetten

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. **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. **Stem af op ondergronden** Maak een iets lichter gewicht voor lichte tekst op donker en vergelijk beide op ware grootte met elkaar.
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. **Schrijf het op** Leg het lettertypebestand, de asbereiken en de waarden van elke rol vast in je [stijlgids](https://gradiently.design/nl/guide/brand-style-guide), 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](https://gradiently.design/nl/guide/display-fonts) van 200 px.

## FAQ

### Wat is een variable font?

Een variable font is één lettertypebestand met een doorlopend bereik van stijlen langs een of meer assen, zoals gewicht of breedte, zodat je elke tussenwaarde kunt kiezen in plaats van een paar vaste stijlen.

### Ondersteunen alle browsers variable fonts?

Elke actuele grote browser ondersteunt ze. Kijk op [caniuse](https://caniuse.com/variable-fonts) als je heel oude browsers moet ondersteunen, en neem een reeks fallback-lettertypen op.

### Zijn variable fonts kleiner dan statische lettertypen?

Niet altijd. Eén variabel bestand is meestal groter dan één statische stijl maar kleiner dan meerdere. De besparing komt wanneer je anders drie of meer stijlen zou laden.

### Wat is optische grootte in een lettertype?

Optische grootte is een as die detail, contrast en spatiëring aanpast aan de grootte waarop tekst wordt gezet, waardoor kleine tekst steviger en grote tekst fijner wordt. Browsers passen het automatisch toe met `font-optical-sizing: auto`.