# Variable fonter, forklart for designere

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

Én fil, hver vekt imellom, og skrift som tilpasser seg størrelsen du setter den i. Variable fonter endrer hva et typografisk system kan gjøre, hvis du vet hvilke akser du skal gripe til.

## The short version

- En variabel font er én enkelt fontfil som inneholder et sammenhengende spenn av stiler, for eksempel hver vekt fra thin til black, i stedet for én fil per stil.
- Hvert spenn kalles en akse, og de fem standardaksene er vekt, bredde, kursiv, helning og optisk størrelse.
- Variable fonter lar deg velge mellomverdier, som en vekt på 450 eller 650, og finjustere skriften for hver størrelse og bakgrunn.
- Alle de store nettleserne i dag støtter variable fonter, og mange familier på Google Fonts finnes som variable filer.
- En variabel fil kan være større enn én statisk stil, så gevinsten kommer når du bruker flere vekter eller bredder fra samme familie.

**Variable fonter** er fontfiler som inneholder et sammenhengende spenn av stiler i stedet for et fast sett. I stedet for egne filer for Regular, Medium, Semibold og Bold inneholder én variabel fil hver vekt mellom den letteste og den tyngste, og ofte andre spenn også, som bredde eller optisk størrelse. Du velger et hvilket som helst punkt langs hvert spenn, som kalles en akse, så en overskrift kan stå i vekt 680 og en bildetekst i 430 hvis det er det som leses best.

Formatet kom som en del av OpenType-spesifikasjonen i 2016 og støttes nå av alle de store nettleserne og de viktigste designverktøyene. Denne guiden dekker hva aksene gjør, når variable fonter er verdt å bruke, og hvordan du setter dem opp i CSS. For det større bildet av å velge skrift, se [grunnleggende typografi](https://gradiently.design/nb/guide/typography-basics) og [merkevarefonter](https://gradiently.design/nb/guide/brand-fonts).

## Aksene i variable fonter og hva hver av dem gjør

En akse er en designdimensjon som skriftdesigneren har tegnet i ytterpunktene, og fonten interpolerer alt imellom. Fem akser er registrert i OpenType-spesifikasjonen og har standardkoder på fire bokstaver. Skriftdesignere kan legge til egne akser, som skrives med store bokstaver.

| Akse | Kode | Hva den endrer | CSS-egenskap |
| --- | --- | --- | --- |
| Vekt | `wght` | Strektykkelse, fra thin til black | `font-weight` |
| Bredde | `wdth` | Fra smale til brede bokstaver | `font-stretch` |
| Optisk størrelse | `opsz` | Detaljer, kontrast og avstand tilpasset størrelsen | `font-optical-sizing` |
| Helning | `slnt` | En skrå vinkel uten å endre bokstavformene | `font-style: oblique` |
| Kursiv | `ital` | Bytter til ekte kursive bokstavformer | `font-style: italic` |
| Egendefinert | f.eks. `GRAD`, `SOFT` | Alt designeren definerer | `font-variation-settings` |

De fem registrerte aksene, pluss egendefinerte. Ikke alle variable fonter har alle akser: sjekk hva din inneholder.

Egendefinerte akser er der fonter får personlighet. Roboto Flex har en grade-akse (`GRAD`) som endrer strekvekten uten å endre bokstavbredden. Fraunces har `SOFT` for rundere avslutninger og `WONK` for de mer egenrådige bokstavformene. Recursive har aksene `MONO` og `CASL`, som flytter den fra sans til monospace og fra lineær til uformell. Du kan utforske alle på [Google Fonts](https://fonts.google.com/variablefonts), som lar deg filtrere på variable familier.

## Hvorfor optisk størrelse betyr mest

Vekt får oppmerksomheten, men optisk størrelse er ofte den nyttigste aksen. Blysats ble skåret separat for hver størrelse: små størrelser hadde kraftigere streker, større x-høyde og løsere avstand, mens store størrelser var finere, med mer kontrast og tettere avstand. Digitale fonter mistet det da én kontur ble skalert til alle størrelser. En `opsz`-akse henter det tilbake.

Et stående design med ett enkelt ord satt svært stort på en gradientbakgrunn

Displaystørrelser: en akse for optisk størrelse skjerper kontrasten og strammer avstanden når skriften vokser.

Et stående design med en overskrift og liten støttetekst i samme skriftfamilie

Tekststørrelser: den samme familien åpner opp og styrker liten skrift, så den tåler en mobilskjerm.

Med `font-optical-sizing: auto` (standard i nettlesere) tilpasser en font med `opsz`-akse seg skriftstørrelsen du setter. Du trenger ikke gjøre noe annet enn å velge en font som har aksen. Det er særlig nyttig i design med en stor overskrift og liten støttetekst i én familie, altså de fleste innlegg til sosiale medier og landingssider.

## Når variable fonter er verdt å bruke

### Verdt det

- Du bruker tre eller flere vekter eller bredder fra én familie
- Du vil ha mellomvekter for å balansere skrift på ulike bakgrunner
- Overskrifter og liten tekst deler en familie med akse for optisk størrelse
- Du vil animere vekt eller bredde i bevegelsesarbeid

### Sannsynligvis ikke

- Du bruker bare én eller to vekter
- Det statiske snittet er mindre, og du trenger aldri andre stiler
- Verktøyet eller plattformen din kan ikke velge akseverdier
- Den variable versjonen mangler en stil eller et språk du trenger

Filstørrelsen er den ærlige avveiningen. En variabel fil bærer dataene for hver stil, så den er som regel større enn én statisk vekt, men mindre enn flere. Laster et nettsted bare Regular og Bold, kan to statiske filer godt være lettere. Laster det fire vekter og en kursiv, vinner som regel én variabel fil, og du får hver vekt imellom på kjøpet.

Mellomvekter er nyttigere enn de høres ut. Lys tekst på en mørk eller fargerik grunn ser tyngre ut enn samme vekt på hvitt, så du kan sette hvit tekst på en gradient i 460 i stedet for 500 for at den optisk skal matche en mørk-på-lys-versjon. Effekten er diskret, men det er den som får et typografisk system til å føles finstemt. [Tekst på gradient](https://gradiently.design/nb/guide/text-on-gradient) forklarer det større lesbarhetsproblemet.

## Slik bruker du variable fonter i CSS

Deklarer fonten én gang med et spenn for hver akse, og bruk deretter vanlige egenskaper som `font-weight` og `font-stretch`. Grip til `font-variation-settings` bare for egendefinerte akser, fordi den overstyrer alle akser på én gang og ikke arves på en vennlig måte. MDNs [guide til variable fonter](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_fonts/Variable_fonts_guide) dekker detaljene.

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

Standardakser gjennom standardegenskaper, egendefinerte akser gjennom `font-variation-settings`. Spennene i `@font-face` må stemme med det filen inneholder.

> **Animert vekt flytter teksten** I de fleste fonter er tyngre bokstaver også bredere, så å animere vekten ved hover får teksten rundt til å flytte seg. Bruk en font med grade-akse, eller spar vektanimasjon til frittstående ord og overskrifter.

## Sette opp et variabelt skriftsystem

1. **Sjekk aksene** Åpne prøvesiden til fonten og noter hver akse og spennet dens. Bekreft at språkene og tegnene du trenger, er med i den variable versjonen.
2. **Definer roller, ikke vekter** Bestem vekter per rolle: brødtekst, utheving, underoverskrift, overskrift, etikett. Et system med fem finstemte verdier slår ni standardverdier brukt på måfå.
3. **Juster for grunnen** Lag en litt lettere vekt for lys tekst på mørk grunn, og sjekk begge mot hverandre i ekte størrelse.
4. **La optisk størrelse jobbe** Behold `font-optical-sizing: auto` med mindre du har en grunn til å låse den, og sjekk overskrifter og bildetekster side om side.
5. **Skriv det ned** Noter fontfilen, aksespennene og verdiene for hver rolle i [merkevarehåndboken](https://gradiently.design/nb/guide/brand-style-guide), så ingen må bygge dem opp igjen etter hukommelsen.

Variable fonter belønner tilbakeholdenhet. Poenget er ikke å bruke hver verdi, men å velge de få nøyaktige som får skriften din til å leses godt overalt der den dukker opp, fra et avsnitt på 16 px til en [displayoverskrift](https://gradiently.design/nb/guide/display-fonts) på 200 px.

## FAQ

### Hva er en variabel font?

En variabel font er én fontfil som inneholder et sammenhengende spenn av stiler langs én eller flere akser, som vekt eller bredde, slik at du kan velge en hvilken som helst verdi imellom i stedet for noen få faste stiler.

### Støtter alle nettlesere variable fonter?

Alle de store nettleserne i dag støtter dem. Sjekk [caniuse](https://caniuse.com/variable-fonts) hvis du må støtte svært gamle nettlesere, og ta med en reservefont i fontstakken.

### Er variable fonter mindre enn statiske fonter?

Ikke alltid. Én variabel fil er som regel større enn én statisk stil, men mindre enn flere. Gevinsten kommer når du ellers ville lastet tre eller flere stiler.

### Hva er optisk størrelse i en font?

Optisk størrelse er en akse som tilpasser detaljer, kontrast og avstand til størrelsen teksten settes i, slik at liten tekst blir kraftigere og stor tekst finere. Nettlesere bruker den automatisk med `font-optical-sizing: auto`.