Bokstavsavstånd: när du ska öppna upp text och när du ska strama åt

Bokstavsavstånd (spärrning, tracking) är det jämna utrymme som läggs till eller tas bort mellan alla bokstäver i ett ord eller en rad. Den korta regeln: lägg till bokstavsavstånd på versaler och små etiketter, strama åt det något på stora rubriker och låt brödtext ha typsnittets standard. De flesta avståndsproblem i verkliga designer kommer av att man gör tvärtom: versaler som lämnats trånga, stora rubriker som lämnats glesa och stycken som spärrats ut för att fylla en ruta.

Bokstavsavstånd är en av tre avståndsinställningar som formar hur text läses. De andra två är radavstånd och radlängd, och alla tre introduceras i typografins grunder.

Spärrning eller kerning: vad är skillnaden

Orden används ofta som om de vore samma sak, men de gör olika jobb. Spärrning (tracking) ändrar avståndet för hela ett markerat parti jämnt. Kerning ändrar utrymmet mellan ett enda bokstavspar, eftersom vissa former lämnar konstiga luckor när de sätts med standardavstånd: tänk på AV, To, Ty eller LT.

Bra typsnitt levereras med tusentals kerningpar, så i textstorlekar behöver du sällan kerna för hand. I rubrik- och logotypstorlekar blir små luckor synliga, och manuell kerning av ett par eller två är värd den minut det tar.

Därför behöver versaler mer bokstavsavstånd

Gemener är ritade för att stå bredvid andra gemener: överlängder, underlängder och runda former skapar en varierad kontur som ögat läser som en ordbild. Versaler är kantiga och lika höga, så med standardavstånd trängs de ihop till en massiv stapel. Lite extra spärrning skiljer dem åt och gör varje bokstav lättare att känna igen.

Hur mycket beror på storleken. Små versaler, som en etikett eller en överrubrik på 11 till 13 px, tål 0,08 em till 0,12 em. Versaler i underrubriksstorlek behöver mindre, omkring 0,04 em till 0,06 em. Mycket stora versaler i en rubrik kan klara sig utan något alls, eller till och med tåla lite åtstramning.

När du ska strama åt bokstavsavståndet

Typsnitt spatieras för ett visst storleksintervall, vanligtvis textstorlekar. Förstorat till 60 eller 100 px ser samma avstånd luftigt ut och ordet slutar läsas som en enda form. Att strama åt stora rubriker något, ofta med 0,01 em till 0,03 em, drar ihop dem igen. Typsnitt med en optisk storleksaxel eller ett separat Display-snitt gör ofta det åt dig, vilket är en av fördelarna som tas upp i variabla typsnitt.

Strama åt försiktigt. Bokstäver som rör vid varandra, eller runda bokstäver som börjar smälta ihop, är ett tecken på att du gått för långt, särskilt i feta vikter. Kontrollera paren i ytterkanten av vad typsnittet klarar, som rn (som kan läsas som m) och cl (som kan läsas som d).

Bokstavsavstånd i CSS

Sätt letter-spacing i em, inte pixlar, så att avståndet skalar med typsnittsstorleken. Ett värde som passar en etikett på 12 px är då fortfarande proportionellt rätt om etiketten växer till 14 px. Se MDN:s referens för letter-spacing för hela beteendet.

body {
  letter-spacing: normal; /* leave paragraphs alone */
  font-kerning: normal;
}

.eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.button {
  font-size: 0.875rem;
  letter-spacing: 0.02em;
}

.display {
  font-size: clamp(3rem, 8vw, 6rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
}

/* Tracking also adds space after the last letter.
   Balance it when centring a short label. */
.eyebrow--centred {
  padding-inline-start: 0.1em;
}

Bokstavsavstånd för liten text, etiketter och siffror

Liten text tjänar på lite extra utrymme, eftersom bokstäver flyter ihop i små storlekar, särskilt ljus text på mörk botten. Många typsnittsfamiljer öppnar redan upp sitt avstånd vid små optiska storlekar. Om ditt inte gör det kan 0,01 em till 0,03 em på bildtexter och finstilt hjälpa. Siffror i tabeller tjänar mer på tabulära siffror (font-variant-numeric: tabular-nums) än på spärrning, eftersom de då linjerar i kolumner.

Två fall till kräver försiktighet. Sammanhängande skriftsystem, som arabiska, ska inte spärras, eftersom avståndet bryter förbindelserna mellan bokstäverna. Och gemener ska sällan spärras alls: utspärrade gemener bryter upp de ordbilder som gör dem lätta att läsa.

En utgångspunkt för bokstavsavstånd för varje roll

Använd de här som standardvärden och justera sedan på känn för ditt typsnitt. Titta på resultatet i verklig storlek, på en verklig skärm, eftersom avstånd som ser rätt ut inzoomat på en designyta ofta ser annorlunda ut vid 100 procent.

Om din design ligger på en gradient eller ett foto påverkar avståndet också läsbarheten: tunna, tätt spärrade bokstäver försvinner snabbare mot en rörig yta än öppna. Kombinera de här inställningarna med råden i text på gradient och typsnittskombinationer för designer som går att läsa i en blick.