# Kerning: så fixar du luckorna mellan bokstäver

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

Det mesta av texten behöver aldrig röras för hand, eftersom bra typsnitt har sin egen kerning. Stora rubriker och ordmärken är annorlunda: i den storleken syns varje klumpig lucka. Så hittar och åtgärdar du dem.

## The short version

- Kerning är justeringen av avståndet mellan ett bestämt par bokstäver, som A och V eller T och o.
- Välgjorda typsnitt innehåller hundratals eller till och med tusentals kerningpar, så vanlig brödtext behöver sällan kernas för hand.
- Manuell kerning betyder mest i stora rubriker, logotyper och ordmärken, där ojämna luckor blir synliga.
- Målet med kerning är jämnt visuellt utrymme mellan bokstäverna, inte lika stort uppmätt avstånd.
- I CSS slår `font-kerning: normal` på typsnittets inbyggda kerning, och webbläsare tillämpar den oftast som standard.

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

| Par | Varför det blir en lucka | Vanlig åtgärd |
| --- | --- | --- |
| AV, VA, AW, WA | Två diagonaler lutar bort från varandra | Dra ihop märkbart |
| To, Ta, Te, Ty | Armen på T hänger över tomt utrymme | Stoppa in gemenen under armen |
| LT, LY, LV | Foten på L lämnar ett hål ovanför | Dra ihop, ofta ganska mycket |
| Yo, Ya, Wo, Vo | Diagonal versal över en rund gemen | Stoppa in som T-paren |
| P., F., T., Y. | Skiljetecknet sitter under ett överhäng | Flytta in punkten eller kommatecknet |
| r och n, r och m | Kan smälta ihop till en bokstav när det är trångt | Öppna något om de rör vid varandra |
| f följt av ), ? eller ’ | Kroken på f krockar | Skjut isär något |

De par som orsakar de flesta kerningproblem. Typsnitt justerar redan många av dem, men kontrollera dem på känn i rubrikstorlek ändå.

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](https://gradiently.design/sv/guide/wordmark-design) 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.

En stående affisch med ordet WAVE satt stort i versaler med jämnt teckenavstånd

Ett ord byggt nästan helt av diagonaler, det svåraste fallet för avstånd. Kontrollera att W, A och V ligger jämnt i varandra innan du exporterar.

Ett stående evenemangsinlägg med rubriken Tacos ikväll på The Yard satt stort över en gradient

Ta, Ya och Th förekommer alla i en enda kort rubrik. I den här storleken är varje par värt en blick före export.

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

### Undvik

- Att kerna brödtext bokstav för bokstav
- Att mäta luckor med linjal
- Att kerna före tracking
- Att dra åt tills bokstäverna rör vid varandra
- Att lita på ett gratis typsnitts avstånd utan att kontrollera

### Gör så här

- Låt brödtext vila på typsnittets egen kerning
- Bedöm på känn, tre bokstäver i taget
- Ställ in tracking, åtgärda sedan enskilda par
- Behåll ett hårfint utrymme, särskilt mellan r och n
- Kontrollera AV, To, LT och Yo i varje rubrik

## 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](https://developer.mozilla.org/en-US/docs/Web/CSS/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.

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

Använd em-enheter för manuella knuffar så att korrigeringen skalar med texten. Kerna bara rubriker för hand, aldrig brödtext.

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](https://gradiently.design/sv/guide/tracking-vs-kerning) förklarar hur de två samverkar med radavstånd, och [bokstavsavstånd](https://gradiently.design/sv/guide/letter-spacing) 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](https://gradiently.design/sv/guide/display-fonts) och [typografins grunder](https://gradiently.design/sv/guide/typography-basics). 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.

## FAQ

### Vad är kerning i typografi?

Kerning är justeringen av avståndet mellan två bestämda bokstäver, som A och V, så att ett ord ser jämnt satt ut.

### Vad skiljer kerning från tracking?

Kerning ändrar avståndet mellan ett par bokstäver. Tracking ändrar avståndet mellan alla bokstäver i en rad eller ett block på en gång.

### Behöver jag kerna brödtext?

Sällan. Bra typsnitt har egna kerningpar som hanterar brödtext väl. Spara manuell kerning till rubriker, logotyper och stor displaytext.

### Ska jag använda metrisk eller optisk kerning?

Använd metrisk för ett välgjort typsnitt, eftersom dess par satts av typsnittsdesignern. Prova optisk när ett typsnitts inbyggda kerning är dålig eller du blandar typsnitt.

### Hur kernar jag text i CSS?

`font-kerning: normal` slår på typsnittets inbyggda par. För att justera ett par lägger du en bokstav i en span och knuffar den med en liten negativ marginal i em-enheter.