Tracking, kerning och radavstånd: avståndstrion

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.

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 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 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 förklarar varför.

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

   Ställ in radavståndet

   Bestäm hur tätt raderna staplas. Rubriker går tätare, stycken lösare.

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

Tracking, kerning och radavstånd i 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;
}

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