# Spatiering vs knibning vs linjeafstand: de tre afstande

[Canonical HTML page](https://gradiently.design/da/guide/tracking-vs-kerning)

Tre ord for tre forskellige mellemrum. Blander du dem sammen, ender du med at rette det forkerte. Her er, hvad hver styrer, hvilken du skal tage fat i først, og tallene, der virker som udgangspunkt.

## The short version

- Spatiering (tracking) ændrer afstanden mellem alle bogstaver i en linje eller tekstblok på én gang.
- Knibning (kerning) ændrer afstanden mellem ét bestemt bogstavpar, som A og V.
- Linjeafstand (leading) er den lodrette afstand mellem tekstlinjer, kaldet line height i CSS og de fleste apps.
- Sæt linjeafstand og spatiering for en hel stil først, og knib derefter kun enkelte par i stor skrift.
- Store overskrifter vil som regel have lidt strammere spatiering og linjeafstand, mens versaler og lille tekst vil have mere spatiering.

Forskellen på **spatiering og knibning** (tracking og kerning) er omfanget. Spatiering justerer afstanden mellem alle bogstaver i en markering, så en hel overskrift åbner sig eller strammes jævnt. Knibning justerer afstanden mellem ét bestemt par, som A og V i WAVE, for at rette et hul, skrifttypen har efterladt. Linjeafstand, den tredje i trioen, har intet at gøre med bogstaver side om side: det er den lodrette afstand fra én tekstlinje til den næste.

| Begreb | Hvad det ændrer | Omfang | Hedder i CSS |
| --- | --- | --- | --- |
| Spatiering | Afstanden mellem alle bogstaver | Et ord, en linje eller et afsnit | `letter-spacing` |
| Knibning | Afstanden mellem ét bogstavpar | To tegn | `font-kerning` (kun til eller fra) |
| Linjeafstand | Afstanden mellem linjer | Et afsnit eller en tekstboks | `line-height` |

De tre afstande på et øjeblik. To virker vandret, én lodret, og kun én arbejder på et enkelt par.

## Hvad er spatiering i typografi

Spatiering er en ensartet ændring. Marker en linje, tilføj spatiering, og hvert mellemrum vokser med samme mængde. Det er værktøjet til at ændre tekstens *tekstur*: luftig og formel eller tæt og slagkraftig. I designapps måles den i tusindedele af en em (Adobe) eller som en procentdel af skriftstørrelsen (Figma), og i CSS som `letter-spacing`, helst skrevet i em, så den skalerer med skriften.

Tre situationer kræver den. Store overskrifter ser som regel løse ud med standardafstanden, så lidt negativ spatiering trækker dem sammen. Versaler ser trykkede ud, fordi store bogstaver er tegnet til at stå ved siden af små, så de har brug for positiv spatiering. Og meget lille tekst, som etiketter og juridiske linjer, læses bedre med en smule mere luft. [Bogstavafstand](https://gradiently.design/da/guide/letter-spacing) gennemgår hvert tilfælde i detaljer.

## Hvad er knibning

Knibning er en lokal reparation. Nogle bogstavpar efterlader et synligt hul eller et sammenstød selv i en velspatieret skrifttype: AV, To, LT, Yo, P efterfulgt af punktum. Skrifttyper indeholder en tabel over disse par og justerer dem automatisk, så i brødtekst kan du lade knibningen være. I overskrifter, logoer og ordmærker kan du stadig få brug for at justere et par eller to i hånden. [Knibning](https://gradiently.design/da/guide/kerning) har den fulde liste over besværlige par og en metode til at rette dem efter øjemål.

## Hvad er linjeafstand i typografi

Det engelske ord leading kommer fra de blystrimler, typografer lagde mellem linjer af metaltyper; på dansk kaldes det også skydning. I dag er det linjehøjden: afstanden fra én grundlinje til den næste. For lidt, og overlængder støder ind i underlængder; for meget, og linjerne glider fra hinanden til separate tanker. Som tommelfingerregel gælder det, at jo længere linjen er, og jo mindre teksten er, desto mere linjeafstand kræver den. [Linjehøjde og linjelængde](https://gradiently.design/da/guide/line-height-and-line-length) forklarer hvorfor.

Et opslag i højformat med en spatieret overlinje i versaler med teksten NY SÆSON over en stramt sat overskrift med teksten Forårskollektionen er landet

Hvor hver indstilling hører hjemme: åben spatiering på overlinjen i versaler, stram spatiering og linjeafstand på overskriften, normal afstand på detaljelinjen.

Et redaktionelt opslag i højformat med en lille spatieret etiket med teksten NUMMER 04 og en titel med teksten Noter fra studiet

Et redaktionelt layout. Den lille skrift, etiketten og undertitlen, læses roligere med rigelig linjeafstand og en smule åben spatiering.

## Hvad du skal ændre først: spatiering, knibning eller linjeafstand

Arbejd fra den største beslutning til den mindste. Linjeafstand og spatiering definerer stilen; knibning rydder op i resten. Ændrer du dem i forkert rækkefølge, ender du med at omgøre dit eget arbejde.

1. **Vælg størrelse og vægt** Afstanden afhænger af begge. Fastlæg dem først, fordi en tungere vægt eller større størrelse kræver andre værdier.
2. **Sæt linjeafstanden** Beslut, hvor tæt linjerne stables. Overskrifter strammere, afsnit løsere.
3. **Sæt spatieringen for stilen** Anvend én spatieringsværdi på hele overskriftsstilen, etiketstilen eller brødtekststilen. Hold den ensartet i hele designet.
4. **Knib de par, der stadig gaber** Kun i stor eller permanent skrift. Kig efter AV, To, LT og lignende par, og juster dem ét ad gangen.
5. **Tjek i den rigtige størrelse** Se resultatet i den størrelse, folk vil se det. Afstand, der ser rigtig ud indzoomet, kan se løs ud på en telefon.

## Startværdier for spatiering og linjeafstand

Dette er fornuftige standarder, ikke love. Skrifttyper er forskellige, og en smal displayskrift opfører sig slet ikke som en bred geometrisk sans. Brug dem til at starte med, og stol så på dit øje.

| Tekstens rolle | Spatiering (CSS) | Spatiering (Adobe-enheder) | Linjeafstand |
| --- | --- | --- | --- |
| Brødtekst, 14 til 20 px | 0 | 0 | 1,4 til 1,6 |
| Overskrift, 48 px og op | -0,01em til -0,03em | -10 til -30 | 1,0 til 1,15 |
| Kæmpe displayskrift, 120 px og op | -0,02em til -0,04em | -20 til -40 | 0,9 til 1,05 |
| Etiketter i versaler | 0,06em til 0,12em | 60 til 120 | 1,2 til 1,3 |
| Lille tekst under 13 px | 0,01em til 0,02em | 10 til 20 | 1,4 til 1,5 |

Spatiering i CSS-em og i Adobes tusindedele af en em siger det samme: 0,05em svarer til 50 enheder. Linjeafstand er vist som et multiplum af skriftstørrelsen.

### Almindelige fejl

- At knibe hvert par, når spatieringen er forkert
- At stramme brødtekstens spatiering for at få flere ord ind
- Standardlinjeafstand på en overskrift i tre linjer
- Versaler uden spatiering
- Forskellig spatiering på hver overskrift i et sæt

### Bedre

- Ret spatieringen først, og knib så det, der er tilbage
- Rediger teksten i stedet
- Træk overskriftens linjeafstand ned til cirka 1,1
- Åbn versaler med 0,06em eller mere
- Én værdi pr. stil, skrevet ned i dine brandregler

## Spatiering, knibning og linjeafstand i CSS

```css
:root {
  font-kerning: normal; /* use the font's own pairs */
}

body {
  font-size: 1.0625rem;
  line-height: 1.55;      /* leading */
  letter-spacing: 0;      /* tracking */
}

h1 {
  font-size: clamp(2.5rem, 6vw, 5rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
}

.eyebrow {
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
```

Skriv `line-height` uden enhed, så den skalerer med skriftstørrelsen, og `letter-spacing` i em af samme grund.

Hold disse værdier ét sted, så hver side bruger samme afstand til samme rolle. Det er kernen i et [typografisk system](https://gradiently.design/da/guide/brand-typography-system). Designer du sociale opslag i stedet for websider, gælder samme idé: beslut afstanden én gang, skriv den ind i dine brandregler, og genbrug den. I Gradiently rummer brandkittet dine skrifttyper til overskrifter og brødtekst, og Designer anvender det, når den sætter nye størrelser op, så skriften forbliver ensartet fra et kvadratisk opslag til en story.

## FAQ

### Hvad er forskellen på spatiering og knibning?

Spatiering ændrer afstanden mellem alle bogstaver i en markering. Knibning ændrer afstanden mellem ét bestemt bogstavpar.

### Er linjeafstand det samme som line height?

Ja, i praksis. Leading eller skydning er det traditionelle trykbegreb, og line height er det, CSS og de fleste designapps kalder afstanden mellem linjer.

### Skal jeg justere spatiering eller knibning først?

Spatiering først. Den sætter den overordnede afstand; knibning retter derefter de få par, der stadig ser ujævne ud, og kun i stor skrift.

### Hvad hedder spatiering i CSS?

`letter-spacing`. Skriv den i em, for eksempel `0.05em`, så den forbliver proportional, når skriftstørrelsen ændres.

### Hvilken linjeafstand skal brødtekst have?

Omkring 1,4 til 1,6 gange skriftstørrelsen til brødtekst og omkring 1,0 til 1,15 til store overskrifter.