Kerning: juster mellomrommene mellom bokstaver

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.

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 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.

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. 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. 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. 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. 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. 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. 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.

Kerning i CSS

Nettlesere bruker skriftens kerning automatisk i det meste av tekst, men du kan angi det eksplisitt. Egenskapen 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.

/* 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;
}

Vil du endre avstanden i en hel linje fremfor ett par, er det generell bokstavavstand, satt med letter-spacing. Generell bokstavavstand og kerning forklarer hvordan de virker sammen med linjeavstand, og bokstavavstand gir startverdier for versaler, etiketter og overskrifter.

For mer om å få stor skrift til å se bevisst satt ut, se displayskrifter og grunnleggende typografi. 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.