# Kerning: sådan retter du hullerne mellem bogstaver

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

De fleste tekster kræver aldrig manuel justering, fordi gode skrifttyper har deres egen kerning. Store overskrifter og ordmærker er anderledes: i den størrelse ses hvert akavet hul. Sådan finder og retter du dem.

## The short version

- Kerning er justering af afstanden mellem ét bestemt bogstavpar, som A og V eller T og o.
- Velskabte skrifttyper indeholder hundredvis eller endda tusindvis af kerningpar, så almindelig brødtekst sjældent kræver manuel kerning.
- Manuel kerning betyder mest i store overskrifter, logoer og ordmærker, hvor ujævne huller bliver synlige.
- Målet med kerning er jævn visuel luft mellem bogstaverne, ikke lige stor målt afstand.
- I CSS slår `font-kerning: normal` skrifttypens indbyggede kerning til, og browsere anvender den som regel som standard.

**Kerning** er justering af afstanden mellem to bestemte bogstaver, så et ord ser jævnt spatieret ud. Nogle formpar efterlader et hul, når de står side om side: diagonalen i et A ved siden af diagonalen i et V, T’ets udhæng over et lille o. Kerning trækker de par tættere sammen, eller skubber en gang imellem et trangt par fra hinanden, til hullerne ser ens ud for øjet. Det er noget andet end spatiering, som ændrer afstanden mellem alle bogstaver i en linje på én gang.

## Hvorfor nogle bogstavpar kræver kerning

Hvert bogstav i en skrifttype sidder i en usynlig boks med lidt indbygget luft i hver side. Det virker for de fleste kombinationer: n ved siden af o, h ved siden af e. Det svigter, hvor formerne er åbne til den ene side. Diagonaler, udhængende arme og runde bogstaver ved siden af lige skaber alle lommer af hvidt, der ligner et manglende bogstav.

| Par | Hvorfor der opstår hul | Typisk løsning |
| --- | --- | --- |
| AV, VA, AW, WA | To diagonaler hælder væk fra hinanden | Træk mærkbart sammen |
| To, Ta, Te, Ty | T’ets arm hænger over tom luft | Skub minusklen ind under armen |
| LT, LY, LV | L’ets fod efterlader et hul ovenover | Træk sammen, ofte meget |
| Yo, Ya, Wo, Vo | Diagonalt versal over en rund minuskel | Skub ind som ved T-parrene |
| P., F., T., Y. | Tegnsætningen sidder under et udhæng | Flyt punktum eller komma ind |
| r og n, r og m | Kan smelte sammen til ét bogstav, når det er stramt | Åbn en smule, hvis de rører hinanden |
| f efterfulgt af ), ? eller ' | f’ets krog støder sammen | Skub lidt fra hinanden |

De par, der giver flest kerningproblemer. Skrifttyper justerer allerede mange af dem; tjek dem alligevel med øjet i overskriftsstørrelse.

Tilfældet med r og n er kilden til en gammel typografvittighed: sæt ordet kerning for stramt, og det læses som keming. Det er en god påmindelse om, at kerning virker i begge retninger.

## Hvornår du skal kerne i hånden

Gode skrifttyper leveres med en kerningtabel, en liste over par og hvor meget hvert skal justeres, så brødtekst og det meste skrift i brugerflader allerede er klaret. Manuel kerning er tiden værd, når skriften bliver stor eller permanent.

- **Overskrifter over cirka 60 px på skærm**, hvor et hul på 2 px bliver synligt.
- **Logoer og ordmærker**, som bliver set tusindvis af gange i alle størrelser. [Design af ordmærker](https://gradiently.design/da/guide/wordmark-design) går videre.
- **Rene versaler**, hvor diagonaler som A, V, W og Y oftere står ved siden af hinanden.
- **Linjer på plakater og thumbnails**, hvor tre eller fire ord bærer hele designet.
- **Gratis skrifttyper eller displayskrifter med tynde kerningtabeler**, som kan efterlade almindelige par ujusterede.

En stående plakat med ordet WAVE sat stort i versaler med jævn afstand mellem bogstaverne

Et ord bygget næsten udelukkende af diagonaler, det sværeste tilfælde for spatiering. Tjek, at W, A og V ligger jævnt, før du eksporterer.

Et stående opslag om et arrangement med overskriften Tonight at The Yard sat stort over en gradient

To, Th og Ya optræder alle i én kort overskrift. I den størrelse er hvert par et blik værd før eksport.

## Sådan kerner du en overskrift eller et ordmærke med øjet

Målet er jævnt *areal* mellem bogstaverne, ikke lige stor målt afstand. To lige stammer, som H og I, kræver mest luft imellem sig. En lige ved siden af en rund, som H og O, kræver lidt mindre. To runde, som O og C, kræver mindst. Diagonaler og udhæng kræver den største korrektion af alle.

1. **Fastlæg spatieringen først** Beslut linjens samlede afstand, før du rører ved parrene. Kerner du en linje og ændrer så spatieringen, er halvdelen af dit arbejde spildt.
2. **Arbejd i treere** Se på tre bogstaver ad gangen, og juster det midterste, så de to huller på hver side af det matcher. Ryk så ét bogstav videre.
3. **Vend det på hovedet** Vend ordet, eller se det spejlvendt. Når du ikke længere kan læse det, ser du former og huller i stedet for bogstaver.
4. **Slør eller knib øjnene sammen** Et let slør gør mellemrummene til grå klatter. Enhver klat, der er mærkbart lysere eller mørkere end naboerne, er et par, der skal rettes.
5. **Tjek det lille og stort** Se ordet i den størrelse, det skal bruges i, og i den mindste størrelse, det vil optræde i. Et ordmærke, der kun er kernet i plakatstørrelse, kan klumpe sammen i favicon-størrelse.
6. **Lad det ligge, og se igen** Kom tilbage efter en pause. Kerning med øjet glider, hvis du stirrer for længe, og friske øjne opdager det par, du klemte for meget.

De fleste designværktøjer lader dig kerne ved at placere markøren mellem to bogstaver og skubbe med en tastaturgenvej. I Adobes programmer er enheden en tusindedel af en em, så en værdi på minus 40 flytter parret 4 % af skriftstørrelsen tættere sammen, uanset hvad størrelsen er.

## Metrisk og optisk kerning

Mange layoutværktøjer tilbyder to automatiske tilstande. **Metrisk** kerning bruger de par, skriftdesigneren har bygget ind i skrifttypen. **Optisk** kerning ignorerer dem og beregner afstanden ud fra konturerne af hvert bogstav. Metrisk er det bedste standardvalg til en velskabt skrifttype, fordi et menneske har truffet de beslutninger. Optisk kan redde en skrifttype med en dårlig eller manglende kerningtabel og hjælper, når du blander to skrifttyper i ét ord.

### Undgå

- At kerne brødtekst bogstav for bogstav
- At måle huller med en lineal
- At kerne, før spatieringen er fastlagt
- At stramme, til bogstaverne rører hinanden
- At stole på en gratis skrifttypes afstande uden at tjekke

### Gør

- Overlad brødtekst til skrifttypens egen kerning
- Bedøm med øjet, tre bogstaver ad gangen
- Fastlæg spatieringen, og ret så enkelte par
- Bevar en hårfin luft, især mellem r og n
- Tjek AV, To, LT og Yo i hver overskrift

## Kerning i CSS

Browsere anvender en skrifttypes kerning automatisk på det meste tekst, men du kan gøre det eksplicit. Egenskaben [font-kerning](https://developer.mozilla.org/en-US/docs/Web/CSS/font-kerning) slår de indbyggede par til eller fra. CSS har ingen egenskab til at justere ét bestemt par, så til en enkelt overskrift eller et logo er den sædvanlige vej at pakke et bogstav ind i en span og skubbe det med en negativ margen eller bogstavafstand.

```css
/* Use the font's own kerning pairs everywhere */
body {
  font-kerning: normal;
}

/* Hand kerning one pair in a large headline: <h1>A<span class="k-av">V</span>A</h1> */
.k-av {
  margin-inline-start: -0.06em;
}

/* Monospaced code should never be kerned */
code, pre {
  font-kerning: none;
}
```

Brug em-enheder til manuelle justeringer, så korrektionen skalerer med skriften. Kern kun overskrifter i hånden, aldrig brødtekst.

Vil du ændre afstanden i en hel linje frem for ét par, er det spatiering, som sættes med `letter-spacing`. [Spatiering og kerning](https://gradiently.design/da/guide/tracking-vs-kerning) forklarer, hvordan de to spiller sammen med linjeafstand, og [bogstavafstand](https://gradiently.design/da/guide/letter-spacing) giver startværdier til versaler, etiketter og overskrifter.

Mere om at få stor skrift til at se bevidst ud finder du i [displayskrifter](https://gradiently.design/da/guide/display-fonts) og [grundlæggende typografi](https://gradiently.design/da/guide/typography-basics). På en gradient eller en tekstureret baggrund er afstanden kun halvdelen af læsbarheden: et velkernet ord kan stadig gå i stykker, hvor farven bag det skifter. En Gradiently Mark flytter sit roligste område om bag dine ord og vælger lys eller mørk tekstfarve pr. linje, så en omhyggeligt spatieret overskrift læses jævnt fra første til sidste bogstav.

## FAQ

### Hvad er kerning i typografi?

Kerning er justering af afstanden mellem to bestemte bogstaver, som A og V, så et ord ser jævnt spatieret ud.

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

Kerning ændrer afstanden mellem ét bogstavpar. Spatiering ændrer afstanden mellem alle bogstaver i en linje eller tekstblok på én gang.

### Skal jeg kerne brødtekst?

Sjældent. Gode skrifttyper indeholder deres egne kerningpar, som klarer brødtekst fint. Gem manuel kerning til overskrifter, logoer og stor displayskrift.

### Skal jeg bruge metrisk eller optisk kerning?

Brug metrisk til en velskabt skrifttype, da dens par er sat af skriftdesigneren. Prøv optisk, når en skrifttypes indbyggede kerning er dårlig, eller du blander skrifttyper.

### Hvordan kerner jeg tekst i CSS?

`font-kerning: normal` slår skrifttypens indbyggede par til. For at justere ét par pakker du et bogstav ind i en span og skubber det med en lille negativ margen i em-enheder.