Kerning: sådan retter du hullerne mellem bogstaver

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.

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

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

Kerning i CSS

Browsere anvender en skrifttypes kerning automatisk på det meste tekst, men du kan gøre det eksplicit. Egenskaben 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.

/* 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 ændre afstanden i en hel linje frem for ét par, er det spatiering, som sættes med letter-spacing. Spatiering og kerning forklarer, hvordan de to spiller sammen med linjeafstand, og bogstavafstand giver startværdier til versaler, etiketter og overskrifter.

Mere om at få stor skrift til at se bevidst ud finder du i displayskrifter og grundlæggende typografi. 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.