# Sperring, kerning og linjeavstand: tre ulike mellomrom

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

Tre ord for tre ulike mellomrom. Blander du dem, retter du feil avstand. Her er hva hvert begrep styrer, hva du bør justere først og gode startverdier.

## The short version

- Sperring endrer avstanden mellom alle bokstaver i en linje eller tekstblokk samtidig.
- Kerning endrer avstanden mellom ett bestemt bokstavpar, som A og V.
- Linjeavstand er den loddrette avstanden mellom tekstlinjer, kalt line height i CSS og mange apper.
- Sett linjeavstand og sperring for hele stilen først, og juster deretter enkeltpar bare i stor skrift.
- Store overskrifter trenger vanligvis litt tettere sperring og linjeavstand, mens versaler og liten tekst trenger større bokstavavstand.

Forskjellen mellom **sperring og kerning** er omfanget. Sperring justerer avstanden mellom alle bokstaver i et utvalg, så hele overskriften åpnes eller strammes jevnt. Kerning justerer avstanden mellom ett bestemt par, som A og V i WAVE, for å rette et hull skriften etterlot. Linjeavstand, det tredje begrepet, gjelder ikke bokstaver ved siden av hverandre: det er den loddrette avstanden mellom tekstlinjene.

| Begrep | Hva det endrer | Omfang | Navn i CSS |
| --- | --- | --- | --- |
| Sperring | Avstand mellom alle bokstaver | Et ord, en linje eller et avsnitt | `letter-spacing` |
| Kerning | Avstand mellom ett bokstavpar | To tegn | `font-kerning` (bare på eller av) |
| Linjeavstand | Avstand mellom linjer | Et avsnitt eller en tekstboks | `line-height` |

De tre avstandene i oversikt. To virker vannrett, én loddrett, og bare én gjelder et enkelt par.

## Hva sperring er i typografi

Sperring er en jevn endring. Velg en linje og øk sperringen, så vokser alle mellomrom like mye. Det endrer tekstens *uttrykk*: luftig og formelt eller tett og kraftig. Designapper måler det i tusendeler av en em (Adobe) eller prosent av skriftstørrelsen (Figma). I CSS heter det `letter-spacing`, helst skrevet i em så det skalerer med skriften.

Tre situasjoner krever det. Store overskrifter virker ofte løse med standardavstand, så litt negativ sperring samler dem. Versaler virker trange, siden de er laget for å stå ved siden av små bokstaver, og trenger positiv sperring. Svært liten tekst, som etiketter og juridiske linjer, leses bedre med litt mer luft. [Bokstavavstand](https://gradiently.design/nb/guide/letter-spacing) dekker hvert tilfelle.

## Hva kerning er

Kerning er en lokal reparasjon. Noen bokstavpar gir synlige hull eller kollisjoner selv i en god skrift: AV, To, LT, Yo og P fulgt av punktum. Skrifter har en tabell med slike par og justerer dem automatisk, så brødtekst trenger vanligvis ingen håndjustering. I overskrifter, logoer og ordmerker må du kanskje justere ett eller to par. [Kerning](https://gradiently.design/nb/guide/kerning) har hele listen og en metode for retting på øyemål.

## Hva linjeavstand er i typografi

Det engelske ordet leading kommer fra blystrimlene trykkere la mellom linjer av metalltyper. I dag betyr det linjehøyde: avstanden fra én grunnlinje til neste. For liten, og over- og underlengder krasjer; for stor, og linjene driver fra hverandre som separate tanker. Vanligvis trenger lengre linjer og mindre tekst mer linjeavstand. [Linjehøyde og linjelengde](https://gradiently.design/nb/guide/line-height-and-line-length) forklarer hvorfor.

Et stående innlegg med sperret overlinje NY SESONG over den tett satte overskriften Vårkolleksjonen er inne

Hvor innstillingene hører hjemme: åpen sperring i overlinjen med versaler, tett sperring og linjeavstand i overskriften, normal avstand i detaljlinjen.

Et stående redaksjonelt innlegg med en liten sperret etikett UTGAVE 04 og tittelen Notater fra studioet

Et redaksjonelt oppsett. Den lille teksten, etiketten og undertittelen, virker roligere med romslig linjeavstand og litt åpen sperring.

## Hva du endrer først: sperring, kerning eller linjeavstand

Jobb fra største valg til minste. Linjeavstand og sperring definerer stilen; kerning rydder opp i resten. Feil rekkefølge gjør at du må gjøre eget arbeid om igjen.

1. **Velg størrelse og vekt** Avstanden avhenger av begge. Sett dem først, siden større eller tyngre skrift trenger andre verdier.
2. **Sett linjeavstand** Bestem hvor tett linjene skal ligge. Overskrifter tettere, avsnitt luftigere.
3. **Sett sperring for stilen** Bruk én verdi til hele overskrifts-, etikett- eller brødtekststilen. Hold den konsekvent i designet.
4. **Juster parene som fortsatt har hull** Bare i stor eller varig skrift. Se etter AV, To, LT og lignende, og juster ett par om gangen.
5. **Sjekk i faktisk størrelse** Se resultatet slik folk skal se det. Avstand som virker riktig innzoomert, kan se løs ut på mobilen.

## Startverdier for sperring og linjeavstand

Dette er fornuftige utgangspunkt, ikke lover. Skrifter er ulike, og en smal overskriftsskrift oppfører seg helt annerledes enn en bred geometrisk sans serif. Begynn her og stol så på øyet.

| Tekstrolle | Sperring (CSS) | Sperring (Adobe-enheter) | Linjeavstand |
| --- | --- | --- | --- |
| Brødtekst, 14 til 20 px | 0 | 0 | 1,4 til 1,6 |
| Overskrift, 48 px og oppover | -0,01em til -0,03em | -10 til -30 | 1,0 til 1,15 |
| Svært stor skrift, 120 px og oppover | -0,02em til -0,04em | -20 til -40 | 0,9 til 1,05 |
| Etiketter med versaler | 0,06em til 0,12em | 60 til 120 | 1,2 til 1,3 |
| Liten tekst under 13 px | 0,01em til 0,02em | 10 til 20 | 1,4 til 1,5 |

Sperring i CSS-em og Adobes tusendeler av en em betyr det samme: 0,05em er 50 enheter. Linjeavstand vises som et multiplum av skriftstørrelsen.

### Vanlige feil

- Kerning av hvert par når sperringen er feil
- Tettere sperring i brødtekst for å få plass til ord
- Standard linjeavstand på en trelinjers overskrift
- Versaler uten sperring
- Ulik sperring på hver overskrift i en serie

### Bedre

- Rett sperringen først, juster så parene som gjenstår
- Rediger heller teksten
- Reduser overskriftens linjeavstand til rundt 1,1
- Åpne versaler med 0,06em eller mer
- Én verdi per stil, nedskrevet i merkevarereglene

## Sperring, kerning og linjeavstand 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` uten enhet så den skalerer med skriftstørrelsen, og `letter-spacing` i em av samme grunn.

Hold verdiene samlet så hver side bruker samme avstand til samme rolle. Det er kjernen i et [typografisystem](https://gradiently.design/nb/guide/brand-typography-system). Lager du innlegg fremfor nettsider, gjelder samme idé: bestem avstandene én gang, skriv dem i merkevarereglene og gjenbruk dem. I Gradiently holder merkevaresettet overskrifts- og brødtekstskrifter. Designer bruker det når den lager nye størrelser, så skriften holder sammen fra kvadratisk innlegg til Story.

## FAQ

### Hva er forskjellen mellom sperring og kerning?

Sperring endrer avstanden mellom alle bokstaver i et utvalg. Kerning endrer avstanden mellom ett bestemt bokstavpar.

### Er leading det samme som line height?

Ja, i praksis. Leading er det tradisjonelle engelske trykkbegrepet, mens line height er navnet i CSS og mange designapper for avstanden mellom linjer.

### Bør jeg justere sperring eller kerning først?

Sperring først. Den setter totalavstanden; kerning retter så de få parene som fortsatt virker ujevne, og bare i stor skrift.

### Hva heter sperring i CSS?

`letter-spacing`. Skriv verdien i em, som `0.05em`, så den forblir proporsjonal når skriftstørrelsen endres.

### Hvilken linjeavstand bør brødtekst ha?

Rundt 1,4 til 1,6 ganger skriftstørrelsen for brødtekst og rundt 1,0 til 1,15 for store overskrifter.