# Tracking, kerning och radavstånd: avståndstrion

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

Tre ord för tre olika mellanrum. Blandar du ihop dem rättar du fel sak. Här är vad var och en styr, vilken du tar först och siffrorna som fungerar som utgångspunkt.

## The short version

- Tracking ändrar avståndet mellan alla bokstäver i en rad eller ett textblock på en gång.
- Kerning ändrar avståndet mellan ett särskilt bokstavspar, till exempel A och V.
- Radavstånd (leading) är det lodräta avståndet mellan textrader, som kallas line-height i CSS och de flesta appar.
- Ställ först in radavstånd och tracking för en hel stil, och kerna sedan enskilda par bara i stor text.
- Stora rubriker vill oftast ha något tätare tracking och radavstånd, medan versaler och liten text vill ha mer tracking.

I **tracking mot kerning** ligger skillnaden i omfånget. Tracking justerar avståndet mellan alla bokstäver i ett urval, så att en hel rubrik öppnas eller dras ihop jämnt. Kerning justerar avståndet mellan ett särskilt par, som A och V i WAVE, för att rätta ett gap som typsnittet lämnat efter sig. Radavstånd (leading), den tredje i trion, har inget att göra med bokstäver sida vid sida: det är det lodräta utrymmet från en textrad till nästa.

| Term | Vad den ändrar | Omfång | Heter i CSS |
| --- | --- | --- | --- |
| Tracking | Avstånd mellan alla bokstäver | Ett ord, en rad eller ett stycke | `letter-spacing` |
| Kerning | Avstånd mellan ett bokstavspar | Två tecken | `font-kerning` (bara på eller av) |
| Radavstånd | Avstånd mellan rader | Ett stycke eller en textruta | `line-height` |

Avståndstrion i överblick. Två löper vågrätt, en lodrätt, och bara en fungerar på ett enda par.

## Vad är tracking i typografi

Tracking är en enhetlig ändring. Markera en rad, lägg till tracking och varje mellanrum växer lika mycket. Det är verktyget för att ändra textens *textur*: luftig och formell, eller tät och slagkraftig. I designappar mäts det i tusendels em (Adobe) eller som en procent av teckenstorleken (Figma), och i CSS som `letter-spacing`, bäst skrivet i em så att det skalar med typen.

Tre lägen kräver det. Stora rubriker ser oftast lösa ut med standardavstånd, så lite negativ tracking drar ihop dem. Versaler ser trånga ut, eftersom versaler är ritade för att stå bredvid gemener, så de behöver positiv tracking. Och mycket liten text, som etiketter och juridiska rader, läses bättre med lite mer luft. [Bokstavsavstånd](https://gradiently.design/sv/guide/letter-spacing) tar upp varje fall i detalj.

## Vad är kerning

Kerning är en lokal reparation. Vissa bokstavspar lämnar ett synligt hål eller en kollision även i ett väl avpassat typsnitt: AV, To, LT, Yo, P följt av en punkt. Typsnitt innehåller en tabell med de här paren och justerar dem automatiskt, så för brödtext kan du låta kerningen vara. I rubriker, logotyper och ordbilder kan du ändå behöva justera ett par eller två för hand. [Kerning](https://gradiently.design/sv/guide/kerning) har hela listan över besvärliga par och en metod för att rätta dem efter ögat.

## Vad är radavstånd i typografi

Det engelska ordet leading kommer av de blyremsor som tryckare lade mellan raderna av blytyper. Idag är det radhöjd: avståndet från en baslinje till nästa. För litet och överlängder kraschar in i underlängder; för stort och raderna glider isär till skilda tankar. Som regel gäller att ju längre rad och ju mindre text, desto mer radavstånd behövs. [Radhöjd och radlängd](https://gradiently.design/sv/guide/line-height-and-line-length) förklarar varför.

Ett stående inlägg med en spärrad överrad i versaler med texten NY SÄSONG ovanför en tätt satt rubrik med texten Vårkollektionen är här

Var varje inställning hör hemma: öppen tracking på överraden i versaler, tät tracking och radavstånd på rubriken, normalt avstånd på detaljraden.

Ett stående redaktionellt inlägg med en liten spärrad etikett med texten NUMMER 04 och en titel med texten Anteckningar från ateljén

En redaktionell layout. Dess lilla text, etiketten och underrubriken, läses lugnare med generöst radavstånd och något öppen tracking.

## Vad du ska ändra först: tracking, kerning eller radavstånd

Arbeta från det största beslutet till det minsta. Radavstånd och tracking definierar stilen; kerning städar upp det som är kvar. Ändrar du dem i fel ordning river du ditt eget arbete.

1. **Välj storlek och vikt** Avstånd beror på båda. Ställ in dem först, eftersom en tyngre vikt eller större storlek behöver andra värden.
2. **Ställ in radavståndet** Bestäm hur tätt raderna staplas. Rubriker går tätare, stycken lösare.
3. **Ställ in tracking för stilen** Använd ett trackingvärde för hela rubrikstilen, etikettstilen eller brödtextstilen. Håll det enhetligt genom designen.
4. **Kerna paren som fortfarande har gap** Bara i stor eller bestående text. Leta efter AV, To, LT och liknande par och justera dem ett i taget.
5. **Kontrollera i verklig storlek** Titta på resultatet i den storlek folk kommer att se det. Avstånd som ser rätt ut inzoomat kan se löst ut på en mobil.

## Utgångsvärden för tracking och radavstånd

Det här är rimliga standardvärden, inte lagar. Typsnitt skiljer sig, och ett smalt displaytypsnitt beter sig helt annorlunda än en bred geometrisk sans. Använd dem för att börja och lita sedan på ögat.

| Textroll | Tracking (CSS) | Tracking (Adobe-enheter) | Radavstånd |
| --- | --- | --- | --- |
| Brödtext, 14 till 20 px | 0 | 0 | 1,4 till 1,6 |
| Rubrik, 48 px och uppåt | -0,01em till -0,03em | -10 till -30 | 1,0 till 1,15 |
| Enorm displaytext, 120 px och uppåt | -0,02em till -0,04em | -20 till -40 | 0,9 till 1,05 |
| Etiketter i versaler | 0,06em till 0,12em | 60 till 120 | 1,2 till 1,3 |
| Liten text under 13 px | 0,01em till 0,02em | 10 till 20 | 1,4 till 1,5 |

Tracking i CSS-em och i Adobes tusendels em säger samma sak: 0,05em motsvarar 50 enheter. Radavstånd visas som en multipel av teckenstorleken.

### Vanliga misstag

- Att kerna varje par när trackingen är fel
- Att strama åt brödtextens tracking för att få plats med fler ord
- Standardradavstånd på en rubrik med tre rader
- Versaler med noll tracking
- Olika tracking på varje rubrik i en serie

### Bättre

- Rätta tracking först, kerna sedan det som återstår
- Redigera texten i stället
- Dra ner rubrikens radavstånd till runt 1,1
- Öppna versaler med 0,06em eller mer
- Ett värde per stil, nedskrivet i dina varumärkesregler

## Tracking, kerning och radavstånd i CSS

```css
:root {
  font-kerning: normal; /* use the font's own pairs */
}

body {
  font-size: 1.0625rem;
  line-height: 1.55;      /* leading */
  letter-spacing: 0;      /* tracking */
}

h1 {
  font-size: clamp(2.5rem, 6vw, 5rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
}

.eyebrow {
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
```

Skriv `line-height` utan enhet så att det skalar med teckenstorleken, och `letter-spacing` i em av samma skäl.

Håll de här värdena på ett ställe så att varje sida använder samma avstånd för samma roll. Det är kärnan i ett [typografisystem](https://gradiently.design/sv/guide/brand-typography-system). Om du designar sociala inlägg snarare än webbsidor gäller samma idé: bestäm avståndet en gång, skriv in det i dina varumärkesregler och återanvänd det. I Gradiently håller varumärkespaketet dina rubrik- och brödtypsnitt och Designern tillämpar det när den lägger ut nya storlekar, så typen förblir enhetlig från ett kvadratiskt inlägg till en story.

## FAQ

### Vad är skillnaden mellan tracking och kerning?

Tracking ändrar avståndet mellan alla bokstäver i ett urval. Kerning ändrar avståndet mellan ett särskilt bokstavspar.

### Är leading samma sak som line-height?

Ja, i praktiken. Leading är den traditionella tryckterminologin och line-height är vad CSS och de flesta designappar kallar avståndet mellan rader.

### Ska jag justera tracking eller kerning först?

Tracking först. Den sätter det övergripande avståndet; kerning rättar sedan de få par som fortfarande ser ojämna ut, och bara i stor text.

### Vad heter tracking i CSS?

`letter-spacing`. Skriv det i em, till exempel `0.05em`, så att det förblir proportionellt när teckenstorleken ändras.

### Vilken radhöjd ska brödtext ha?

Runt 1,4 till 1,6 gånger teckenstorleken för brödtext och runt 1,0 till 1,15 för stora rubriker.