# Variabla typsnitt förklarade för designers

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

En fil, varje vikt däremellan och text som anpassar sig efter storleken du sätter den i. Variabla typsnitt förändrar vad ett typografiskt system kan göra, om du vet vilka axlar du ska använda.

## The short version

- Ett variabelt typsnitt är en enda typsnittsfil som innehåller ett kontinuerligt spann av stilar, till exempel varje vikt från tunn till svart, i stället för en fil per stil.
- Varje spann kallas en axel, och de fem standardaxlarna är vikt, bredd, kursiv, lutning och optisk storlek.
- Med variabla typsnitt kan du välja mellanvärden, till exempel vikt 450 eller 650, och trimma texten exakt för varje storlek och bakgrund.
- Alla större webbläsare stöder i dag variabla typsnitt, och många familjer på Google Fonts finns som variabla filer.
- En variabel fil kan vara större än en enskild statisk stil, så vinsten kommer när du använder flera vikter eller bredder från samma familj.

**Variabla typsnitt** är typsnittsfiler som rymmer ett kontinuerligt spann av stilar i stället för en fast uppsättning. I stället för separata filer för Regular, Medium, Semibold och Bold innehåller en variabel fil varje vikt mellan den ljusaste och den tyngsta, och ofta andra spann också, till exempel bredd eller optisk storlek. Du väljer valfri punkt längs varje spann, kallat en axel, så att en rubrik kan ligga på vikt 680 och en bildtext på 430 om det är det som läses bäst.

Formatet kom som en del av OpenType-specifikationen 2016 och stöds nu av alla större webbläsare och de viktigaste designverktygen. Den här guiden går igenom vad axlarna gör, när variabla typsnitt är värda att använda och hur du sätter upp dem i CSS. För helheten kring att välja typsnitt, se [typografins grunder](https://gradiently.design/sv/guide/typography-basics) och [varumärkestypsnitt](https://gradiently.design/sv/guide/brand-fonts).

## Axlar i variabla typsnitt och vad var och en gör

En axel är en designdimension som typsnittsformgivaren har ritat i sina ytterlägen, och typsnittet interpolerar allt däremellan. Fem axlar är registrerade i OpenType-specifikationen och har standardiserade taggar på fyra bokstäver. Formgivare kan lägga till egna axlar, som skrivs med versaler.

| Axel | Tagg | Vad den ändrar | CSS-egenskap |
| --- | --- | --- | --- |
| Vikt | `wght` | Linjernas tjocklek, från tunn till svart | `font-weight` |
| Bredd | `wdth` | Bokstavsbredd från smal till bred | `font-stretch` |
| Optisk storlek | `opsz` | Detaljer, kontrast och avstånd trimmade för storleken | `font-optical-sizing` |
| Lutning | `slnt` | En sned vinkel utan att bokstävernas former ändras | `font-style: oblique` |
| Kursiv | `ital` | Byter till äkta kursiva bokstavsformer | `font-style: italic` |
| Egen | t.ex. `GRAD`, `SOFT` | Allt som formgivaren definierar | `font-variation-settings` |

De fem registrerade axlarna, plus egna. Inte alla variabla typsnitt har alla axlar: kontrollera vad ditt innehåller.

Egna axlar är där typsnitt får personlighet. Roboto Flex har en grade-axel (`GRAD`) som ändrar linjetjockleken utan att bokstavsbredden ändras. Fraunces har `SOFT` för rundare ändar och `WONK` för sina mer egensinniga bokstavsformer. Recursive har axlarna `MONO` och `CASL` som flyttar det från sans till monospace och från linjärt till ledigt. Du kan utforska dem alla på [Google Fonts](https://fonts.google.com/variablefonts), där du kan filtrera på variabla familjer.

## Varför optisk storlek spelar störst roll

Vikten får uppmärksamheten, men optisk storlek är ofta den mest användbara axeln. Blytyper skars separat för varje storlek: små storlekar hade kraftigare linjer, större x-höjd och luftigare avstånd, stora storlekar var finare, med mer kontrast och tätare avstånd. Digitala typsnitt förlorade det när en enda kontur skalades till alla storlekar. En `opsz`-axel ger tillbaka det.

En stående design med ett enda ord satt mycket stort mot en gradientbakgrund

Displaystorlekar: en axel för optisk storlek skärper kontrasten och drar ihop avstånden när texten växer.

En stående design med en rubrik och liten stödtext i samma typsnittsfamilj

Textstorlekar: samma familj öppnar upp och stärker liten text så att den klarar en telefonskärm.

Med `font-optical-sizing: auto` (standard i webbläsare) justerar sig ett typsnitt med en `opsz`-axel efter den teckenstorlek du sätter. Du behöver inte göra något annat än att välja ett typsnitt som har axeln. Det är särskilt användbart i designer med en stor rubrik och liten stödtext i en familj, vilket gäller de flesta sociala inlägg och landningssidor.

## När variabla typsnitt är värda att använda

### Värt det

- Du använder tre eller fler vikter eller bredder från en familj
- Du vill ha mellanvikter för att balansera text mot olika bakgrunder
- Rubriker och liten text delar en familj med en axel för optisk storlek
- Du vill animera vikt eller bredd i rörelsearbete

### Förmodligen inte

- Du använder bara en eller två vikter
- Den statiska varianten är mindre och du behöver aldrig andra stilar
- Ditt verktyg eller din plattform kan inte välja axelvärden
- Den variabla versionen saknar en stil eller ett språk du behöver

Filstorleken är den ärliga kompromissen. En variabel fil bär data för varje stil, så den är oftast större än en statisk vikt men mindre än flera. Om en webbplats bara laddar Regular och Bold kan två statiska filer mycket väl vara lättare. Laddar den fyra vikter och en kursiv vinner oftast en variabel fil, och du får varje vikt däremellan på köpet.

Mellanvikter är mer användbara än de låter. Ljus text på mörk eller färgstark botten ser tyngre ut än samma vikt på vitt, så du kan sätta vit text på en gradient i 460 i stället för 500 för att optiskt matcha en version med mörk text på ljus botten. Effekten är subtil, men det är den som får ett typografiskt system att kännas trimmat. [Text på gradient](https://gradiently.design/sv/guide/text-on-gradient) förklarar det bredare läsbarhetsproblemet.

## Så använder du variabla typsnitt i CSS

Deklarera typsnittet en gång med ett spann för varje axel, och använd sedan vanliga egenskaper som `font-weight` och `font-stretch`. Ta bara till `font-variation-settings` för egna axlar, eftersom den skriver över alla axlar på en gång och inte ärvs på ett smidigt sätt. MDN:s [guide till variabla typsnitt](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_fonts/Variable_fonts_guide) går igenom detaljerna.

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

Standardaxlar via standardegenskaper, egna axlar via `font-variation-settings`. Spannen i `@font-face` måste stämma med vad filen innehåller.

> **Animerad vikt flyttar texten** I de flesta typsnitt är tyngre bokstäver också bredare, så om du animerar vikten vid hover förskjuts texten runt omkring. Använd ett typsnitt med en grade-axel, eller spara viktanimation till enstaka ord och rubriker.

## Så sätter du upp ett variabelt typsystem

1. **Kontrollera axlarna** Öppna typsnittets presentationssida och notera varje axel och dess spann. Bekräfta att de språk och tecken du behöver ingår i den variabla versionen.
2. **Definiera roller, inte vikter** Bestäm vikter per roll: brödtext, betoning, underrubrik, rubrik, etikett. Ett system med fem trimmade värden slår nio standardvärden som används på måfå.
3. **Trimma för bottnar** Skapa en något lättare vikt för ljus text på mörk botten och jämför båda med varandra i verklig storlek.
4. **Låt optisk storlek göra sitt** Behåll `font-optical-sizing: auto` om du inte har en anledning att låsa den, och jämför rubriker och bildtexter sida vid sida.
5. **Skriv ner det** Anteckna typsnittsfilen, axelspannen och varje rolls värden i din [varumärkesmanual](https://gradiently.design/sv/guide/brand-style-guide), så att ingen behöver bygga om dem ur minnet.

Variabla typsnitt belönar återhållsamhet. Poängen är inte att använda varje värde, utan att välja de få exakta som får din text att läsas bra överallt där den syns, från ett stycke på 16 px till en [displayrubrik](https://gradiently.design/sv/guide/display-fonts) på 200 px.

## FAQ

### Vad är ett variabelt typsnitt?

Ett variabelt typsnitt är en enda typsnittsfil med ett kontinuerligt spann av stilar längs en eller flera axlar, till exempel vikt eller bredd, så att du kan välja valfritt värde däremellan i stället för några få fasta stilar.

### Stöder alla webbläsare variabla typsnitt?

Alla större webbläsare stöder dem i dag. Kolla [caniuse](https://caniuse.com/variable-fonts) om du behöver stödja mycket gamla webbläsare, och ange en reservlista med typsnitt.

### Är variabla typsnitt mindre än statiska?

Inte alltid. En variabel fil är oftast större än en statisk stil men mindre än flera. Vinsten kommer när du annars skulle ladda tre eller fler stilar.

### Vad är optisk storlek i ett typsnitt?

Optisk storlek är en axel som justerar detaljer, kontrast och avstånd efter storleken texten sätts i, så att liten text blir kraftigare och stor text finare. Webbläsare tillämpar den automatiskt med `font-optical-sizing: auto`.