Bokstavavstand: når du åpner skriften og når du strammer

Bokstavavstand (sperring) er den jevne luften som legges til eller tas bort mellom alle bokstavene i et ord eller en linje. Den korte regelen: legg til bokstavavstand på versaler og små etiketter, stram litt på store overskrifter, og la brødteksten stå med fontens standard. De fleste avstandsproblemer i virkelige design kommer av det motsatte: versaler som står tett, store overskrifter som står løst, og avsnitt som er sperret for å fylle en boks.

Bokstavavstand er én av tre avstandsinnstillinger som former hvordan tekst leses. De to andre er linjeavstand og linjelengde, og alle tre presenteres i grunnleggende typografi.

Sperring og kerning: hva er forskjellen

De to ordene brukes om hverandre, men de gjør ulike jobber. Sperring endrer avstanden jevnt i et helt utvalg. Kerning endrer avstanden mellom ett bestemt bokstavpar, fordi noen former etterlater klønete mellomrom når de settes med standardavstand: tenk på AV, To, Ty eller LT.

Gode fonter kommer med tusenvis av kerningpar, så i tekststørrelser trenger du sjelden å kerne for hånd. I overskrifts- og logostørrelser blir små mellomrom synlige, og det er verdt minuttet det tar å kerne et par eller to manuelt.

Hvorfor versaler trenger mer bokstavavstand

Små bokstaver er tegnet for å stå ved siden av andre små bokstaver: overlengder, underlengder og runde former gir et variert omriss som øyet leser som et ordbilde. Versaler er kantete og like høye, så med standardavstand klumper de seg til en massiv stripe. Litt ekstra sperring skiller dem og gjør hver bokstav lettere å kjenne igjen.

Hvor mye avhenger av størrelsen. Bittesmå versaler, som en etikett eller en overlinje på 11 til 13 px, tåler 0.08em til 0.12em. Versaler i mellomtittelstørrelse trenger mindre, rundt 0.04em til 0.06em. Svært store versaler i en overskrift trenger kanskje ingenting, eller til og med en liten stramming.

Når du bør stramme bokstavavstanden

Fonter er avstandssatt for et bestemt størrelsesområde, vanligvis tekststørrelser. Blåst opp til 60 eller 100 px virker den samme avstanden luftig, og ordet slutter å leses som én form. Å stramme store overskrifter litt, ofte med 0.01em til 0.03em, trekker dem sammen igjen. Fonter med en akse for optisk størrelse eller et eget Display-snitt gjør ofte dette for deg, og det er en av fordelene som omtales i variable fonter.

Stram med varsomhet. Bokstaver som berører hverandre, eller runde bokstaver som begynner å smelte sammen, er tegn på at du har gått for langt, særlig i fete vekter. Sjekk parene i ytterkanten av det fonten håndterer godt, som rn (som kan leses som m) og cl (som kan leses som d).

Bokstavavstand i CSS

Sett letter-spacing i em, ikke piksler, så avstanden skalerer med skriftstørrelsen. En verdi som passer en etikett på 12 px, er da fortsatt forholdsmessig riktig hvis etiketten vokser til 14 px. Se MDNs referanse for letter-spacing for hele virkemåten.

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

Bokstavavstand for liten tekst, etiketter og tall

Liten tekst har godt av litt ekstra luft, fordi bokstaver flyter sammen i små størrelser, særlig lys skrift på mørk bunn. Mange fontfamilier åpner allerede avstanden i små optiske størrelser. Gjør ikke din det, kan 0.01em til 0.03em på bildetekster og liten skrift hjelpe. Tall i tabeller har mer nytte av tabelltall (font-variant-numeric: tabular-nums) enn av sperring, fordi de da står på linje i kolonner.

To tilfeller til krever omtanke. Sammenhengende skriftsystemer, som arabisk, skal ikke sperres, fordi avstanden bryter forbindelsene mellom bokstavene. Og tekst med små bokstaver bør sjelden sperres i det hele tatt: sperrede små bokstaver bryter opp ordbildene som gjør teksten lett å lese.

Et utgangspunkt for bokstavavstand i hver rolle

Bruk disse som standardverdier, og juster så på øyemål for fonten din. Se på resultatet i virkelig størrelse, på en virkelig skjerm, fordi avstand som ser riktig ut innzoomet på et lerret, ofte ser annerledes ut på 100 prosent.

Ligger designet ditt på en gradient eller et foto, påvirker avstanden også lesbarheten: tynne, tett satte bokstaver forsvinner raskere mot en urolig flate enn åpne. Kombiner disse innstillingene med rådene i tekst på gradient og fontkombinasjoner for design som leses med ett blikk.