# Kerning: juster mellomrommene mellom bokstaver

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

Det meste av tekst trenger ingen manuell justering, fordi gode skrifter har innebygd kerning. Store overskrifter og ordmerker er annerledes: der synes alle skjeve mellomrom. Slik finner og retter du dem.

## The short version

- Kerning er justering av avstanden mellom ett bestemt bokstavpar, som A og V eller T og o.
- Gode skrifter inneholder hundrevis eller tusenvis av kerningpar, så vanlig brødtekst trenger sjelden manuell kerning.
- Manuell kerning betyr mest i store overskrifter, logoer og ordmerker, der ujevne mellomrom blir synlige.
- Målet med kerning er jevn visuell luft mellom bokstavene, ikke lik målt avstand.
- I CSS slår `font-kerning: normal` på skriftens innebygde kerning, og nettlesere bruker den vanligvis som standard.

**Kerning** er justering av avstanden mellom to bestemte bokstaver så et ord ser jevnt satt ut. Noen former etterlater et hull ved siden av hverandre: diagonalen i en A ved diagonalen i en V, eller armen på en T over en liten o. Kerning trekker disse parene nærmere, eller skyver iblant et tett par fra hverandre, til mellomrommene ser like ut for øyet. Det skiller seg fra generell bokstavavstand, som endrer avstanden mellom alle bokstavene i en linje samtidig.

## Derfor trenger noen bokstavpar kerning

Hver bokstav i en skrift ligger i en usynlig boks med litt innebygd luft på hver side. Det fungerer for de fleste kombinasjoner: n ved o, h ved e. Det svikter der formene er åpne på én side. Diagonaler, overhengende armer og runde bokstaver ved rette skaper alle lommer av hvitt som ser ut som en manglende bokstav.

| Par | Hvorfor det blir et hull | Vanlig løsning |
| --- | --- | --- |
| AV, VA, AW, WA | To diagonaler heller bort fra hverandre | Trekk dem merkbart sammen |
| To, Ta, Te, Ty | Armen på T henger over tomrom | Legg den lille bokstaven inn under armen |
| LT, LY, LV | Foten på L etterlater et hull over seg | Trekk dem sammen, ofte mye |
| Yo, Ya, Wo, Vo | Diagonal stor bokstav over en rund liten | Legg dem inn som T-parene |
| P., F., T., Y. | Tegnsetting ligger under et overheng | Flytt punktum eller komma innover |
| r og n, r og m | Kan smelte sammen til én bokstav hvis de står tett | Åpne litt hvis de berører hverandre |
| f fulgt av ), ? eller ’ | Kroken på f kolliderer | Skyv dem litt fra hverandre |

Parene som skaper flest kerningproblemer. Skrifter justerer allerede mange av disse; sjekk dem likevel med øyet i overskriftsstørrelse.

Tilfellet med r og n er opphavet til en gammel typografspøk: sett ordet kerning for tett, så leses det som keming. Det minner om at kerning virker i begge retninger.

## Når du bør bruke manuell kerning

Gode skrifter leveres med en kerningtabell, en liste med par og hvor mye hvert skal justeres, så brødtekst og det meste av grensesnitttekst er allerede ivaretatt. Manuell kerning er verdt tiden når teksten blir stor eller varig.

- **Overskrifter over omtrent 60 px på skjerm**, der et mellomrom på 2 px blir et synlig hull.
- **Logoer og ordmerker**, som blir sett tusenvis av ganger i alle størrelser. [Design av ordmerker](https://gradiently.design/nb/guide/wordmark-design) går videre.
- **Bare versaler**, der diagonaler som A, V, W og Y oftere møtes.
- **Tekst på plakater og miniatyrbilder**, der tre eller fire ord bærer hele designet.
- **Gratis- eller displayskrifter med korte kerningtabeller**, der vanlige par kan være ujusterte.

En stående plakat med det engelske ordet WAVE i store versaler med jevn bokstavavstand

Det engelske ordet WAVE består nesten bare av diagonaler, det vanskeligste tilfellet for avstand. Sjekk at W, A og V passer jevnt sammen før eksport.

Et stående arrangementsinnlegg med overskriften I kveld på The Yard i stor skrift på en gradient

To, Th og Ya finnes alle i den engelske overskriften «Tonight at The Yard». I denne størrelsen bør hvert par sjekkes før eksport.

## Slik justerer du kerning i overskrifter og ordmerker med øyet

Målet er jevnt *areal* mellom bokstavene, ikke lik målt avstand. To rette stammer, som H og I, trenger mest plass mellom seg. En rett ved en rund, som H og O, trenger litt mindre. To runde, som O og C, trenger minst. Diagonaler og overheng trenger mest korrigering av alt.

1. **Sett generell bokstavavstand først** Bestem den samlede avstanden i linjen før du justerer par. Å kernjustere en linje og deretter endre generell bokstavavstand gjør om på halve arbeidet.
2. **Arbeid med tre om gangen** Se på tre bokstaver om gangen og juster den midterste så mellomrommene på hver side matcher. Flytt så ett tegn videre.
3. **Snu ordet opp ned** Vend ordet eller se det speilvendt. Når du ikke lenger kan lese det, ser du former og mellomrom fremfor bokstaver.
4. **Gjør det uskarpt eller mys** Litt uskarphet gjør mellomrommene til grå felter. Et felt som er merkbart lysere eller mørkere enn naboene, viser et par som må rettes.
5. **Sjekk lite og stort** Se ordet i størrelsen det skal brukes, og i den minste størrelsen det skal vises. Et ordmerke bare kernjustert i plakatstørrelse kan klumpe seg i favicon-størrelse.
6. **La det ligge og se igjen** Kom tilbake etter en pause. Kerning med øyet sklir ut hvis du stirrer for lenge, og friske øyne finner paret du presset for tett.

De fleste designverktøy lar deg justere kerning ved å plassere markøren mellom to bokstaver og flytte dem med en hurtigtast. I Adobe-apper er enheten en tusendel av en em, så minus 40 flytter paret nærmere med 4% av skriftstørrelsen, uansett størrelse.

## Metrisk eller optisk kerning

Mange layoutverktøy tilbyr to automatiske moduser. **Metrisk** kerning bruker parene skriftdesigneren bygde inn i skriften. **Optisk** kerning ignorerer dem og beregner avstand fra konturen til hver bokstav. Metrisk er et bedre standardvalg for en god skrift, fordi et menneske tok disse valgene. Optisk kan redde en skrift med dårlig eller manglende kerningtabell, og hjelper når du blander to skrifter i ett ord.

### Unngå

- Kernjustere brødtekst bokstav for bokstav
- Måle mellomrom med linjal
- Kernjustere før generell bokstavavstand er satt
- Stramme til bokstavene berører hverandre
- Stole på avstanden i en gratis skrift uten å sjekke

### Gjør

- La skriftens egen kerning ta seg av brødteksten
- Vurder med øyet, tre bokstaver om gangen
- Sett generell bokstavavstand, og rett så enkeltpar
- Behold en hårfin åpning, særlig mellom r og n
- Sjekk AV, To, LT og Yo i hver overskrift

## Kerning i CSS

Nettlesere bruker skriftens kerning automatisk i det meste av tekst, men du kan angi det eksplisitt. Egenskapen [font-kerning](https://developer.mozilla.org/en-US/docs/Web/CSS/font-kerning) slår de innebygde parene av eller på. CSS har ingen egenskap for justering av ett bestemt par, så for én overskrift eller logo er det vanlig å pakke en bokstav i en span og flytte den med negativ marg eller bokstavavstand.

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

Bruk em-enheter for manuelle justeringer så korrigeringen skalerer med skriften. Kernjuster bare overskrifter manuelt, aldri brødtekst.

Vil du endre avstanden i en hel linje fremfor ett par, er det generell bokstavavstand, satt med `letter-spacing`. [Generell bokstavavstand og kerning](https://gradiently.design/nb/guide/tracking-vs-kerning) forklarer hvordan de virker sammen med linjeavstand, og [bokstavavstand](https://gradiently.design/nb/guide/letter-spacing) gir startverdier for versaler, etiketter og overskrifter.

For mer om å få stor skrift til å se bevisst satt ut, se [displayskrifter](https://gradiently.design/nb/guide/display-fonts) og [grunnleggende typografi](https://gradiently.design/nb/guide/typography-basics). På en gradient eller teksturert bakgrunn er avstand bare halve leseligheten: et godt kernjustert ord kan fortsatt brytes opp der fargen bak endres. En Mark fra Gradiently flytter sitt roligste område bak ordene og velger lys eller mørk tekst per linje, så en nøye justert overskrift leses jevnt fra første til siste bokstav.

## FAQ

### Hva er kerning i typografi?

Kerning er justering av avstanden mellom to bestemte bokstaver, som A og V, slik at et ord ser jevnt satt ut.

### Hva er forskjellen på kerning og generell bokstavavstand?

Kerning endrer mellomrommet i ett bokstavpar. Generell bokstavavstand endrer mellomrommene mellom alle bokstavene i en linje eller blokk samtidig.

### Trenger jeg å kernjustere brødtekst?

Sjelden. Gode skrifter har egne kerningpar som håndterer brødtekst godt. Spar manuell kerning til overskrifter, logoer og stor displayskrift.

### Bør jeg bruke metrisk eller optisk kerning?

Bruk metrisk for en god skrift, siden parene ble satt av skriftdesigneren. Prøv optisk når skriftens innebygde kerning er dårlig, eller du blander skrifter.

### Hvordan justerer jeg kerning i CSS?

`font-kerning: normal` slår på skriftens innebygde par. For å justere ett par pakker du en bokstav i en span og flytter den med en liten negativ marg i em-enheter.