Kerning: så fixar du luckorna mellan bokstäver

Kerning är justeringen av avståndet mellan två bestämda bokstäver så att ett ord ser jämnt satt ut. Vissa par av former lämnar ett hål när de står bredvid varandra: diagonalen i ett A intill diagonalen i ett V, överhanget på ett T ovanför ett litet o. Kerning drar ihop de paren, eller trycker ibland isär ett trångt par, tills luckorna ser likadana ut för ögat. Den skiljer sig från tracking, som ändrar avståndet mellan alla bokstäver i en rad på en gång.

Varför vissa bokstavspar behöver kernas

Varje bokstav i ett typsnitt sitter i en osynlig ruta med lite utrymme inbyggt på varje sida. Det fungerar för de flesta kombinationer: n intill o, h intill e. Det fungerar inte där formerna är öppna på ena sidan. Diagonaler, utstickande armar och runda bokstäver intill raka skapar fickor av vitt som ser ut som en saknad bokstav.

Fallet med r och n är källan till ett gammalt typografskämt: sätt ordet kerning för tätt och det läses som keming. Det är en bra påminnelse om att kerning fungerar i båda riktningarna.

När du ska kerna för hand

Bra typsnitt levereras med en kerningtabell, en lista över par och hur mycket varje ska justeras, så brödtext och det mesta av gränssnittstext är redan hanterat. Manuell kerning är värd tiden när texten blir stor eller bestående.

• Rubriker över cirka 60 px på skärm, där en lucka på 2 px blir ett synligt hål.
• Logotyper och ordmärken, som kommer att ses tusentals gånger i alla storlekar. Design av ordmärke går djupare.
• Enbart versaler, där diagonaler som A, V, W och Y möts oftare.
• Rader på affischer och tumbilder, där tre eller fyra ord bär hela designen.
• Gratis typsnitt eller displaytypsnitt med tunna kerningtabeller, som kan lämna vanliga par ojusterade.

Så kernar du en rubrik eller ett ordmärke på känn

Målet är jämn yta mellan bokstäverna, inte lika stort uppmätt avstånd. Två raka stammar, som H och I, behöver mest utrymme mellan sig. En rak intill en rund, som H och O, behöver lite mindre. Två runda, som O och C, behöver minst. Diagonaler och överhäng behöver mest korrigering av alla.

1. 1

   Ställ in tracking först

   Bestäm radens övergripande avstånd innan du rör paren. Kernar du en rad och sedan ändrar dess tracking ogör du hälften av jobbet.

2. 2

   Arbeta i treor

   Titta på tre bokstäver i taget och justera den mittersta så att de två luckorna på var sida om den matchar. Gå sedan en bokstav framåt.

3. 3

   Vänd den upp och ner

   Vänd ordet eller se det spegelvänt. När du inte längre kan läsa det ser du former och luckor i stället för bokstäver.

4. 4

   Fördunkla eller kisa

   En lätt oskärpa gör mellanrummen till grå fläckar. Varje fläck som är märkbart ljusare eller mörkare än sina grannar är ett par att åtgärda.

5. 5

   Kontrollera det litet och stort

   Se ordet i den storlek det ska användas och i den minsta storlek det kommer att visas. Ett ordmärke som bara kernats i affischstorlek kan klumpa ihop sig i favikonstorlek.

6. 6

   Lämna det och titta igen

   Kom tillbaka efter en paus. Kerning på känn glider iväg om du stirrar för länge, och utvilade ögon ser paret du pressade för långt.

De flesta designverktyg låter dig kerna genom att placera markören mellan två bokstäver och knuffa med ett kortkommando. I Adobes program är enheten en tusendels em, så ett värde på minus 40 flyttar paret närmare med 4 % av textstorleken, oavsett hur stor den är.

Metrisk eller optisk kerning

Många layoutverktyg erbjuder två automatiska lägen. Metrisk kerning använder paren som typsnittsdesignern byggt in i typsnittet. Optisk kerning ignorerar dem och räknar ut avståndet från varje bokstavs konturer. Metrisk är den bättre standarden för ett välgjort typsnitt, eftersom en människa tog de besluten. Optisk kan rädda ett typsnitt med en dålig eller saknad kerningtabell, och hjälper när du blandar två typsnitt i ett ord.

Kerning i CSS

Webbläsare tillämpar ett typsnitts kerning automatiskt för det mesta av texten, men du kan göra det uttryckligt. Egenskapen font-kerning slår de inbyggda paren på eller av. CSS har ingen egenskap för att justera ett enskilt par, så för en enskild rubrik eller logotyp är den vanliga vägen att lägga en bokstav i en span och knuffa den med negativ marginal eller bokstavsavstånd.

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

Vill du ändra avståndet för en hel rad i stället för ett par är det tracking, som ställs in med letter-spacing. Tracking eller kerning förklarar hur de två samverkar med radavstånd, och bokstavsavstånd ger startvärden för versaler, etiketter och rubriker.

För mer om hur du får stor text att se avsiktlig ut, se displaytypsnitt och typografins grunder. På en gradient eller en strukturerad bakgrund är avstånd bara halva läsbarheten: ett välkernat ord kan ändå brytas upp där färgen bakom ändras. En Gradiently Mark flyttar sin lugnaste yta bakom dina ord och väljer ljust eller mörkt bläck per rad, så en noga satt rubrik läses jämnt från första till sista bokstaven.