Sperring, kerning og linjeavstand: tre ulike mellomrom

Forskjellen mellom sperring og kerning er omfanget. Sperring justerer avstanden mellom alle bokstaver i et utvalg, så hele overskriften åpnes eller strammes jevnt. Kerning justerer avstanden mellom ett bestemt par, som A og V i WAVE, for å rette et hull skriften etterlot. Linjeavstand, det tredje begrepet, gjelder ikke bokstaver ved siden av hverandre: det er den loddrette avstanden mellom tekstlinjene.

Hva sperring er i typografi

Sperring er en jevn endring. Velg en linje og øk sperringen, så vokser alle mellomrom like mye. Det endrer tekstens uttrykk: luftig og formelt eller tett og kraftig. Designapper måler det i tusendeler av en em (Adobe) eller prosent av skriftstørrelsen (Figma). I CSS heter det letter-spacing, helst skrevet i em så det skalerer med skriften.

Tre situasjoner krever det. Store overskrifter virker ofte løse med standardavstand, så litt negativ sperring samler dem. Versaler virker trange, siden de er laget for å stå ved siden av små bokstaver, og trenger positiv sperring. Svært liten tekst, som etiketter og juridiske linjer, leses bedre med litt mer luft. Bokstavavstand dekker hvert tilfelle.

Hva kerning er

Kerning er en lokal reparasjon. Noen bokstavpar gir synlige hull eller kollisjoner selv i en god skrift: AV, To, LT, Yo og P fulgt av punktum. Skrifter har en tabell med slike par og justerer dem automatisk, så brødtekst trenger vanligvis ingen håndjustering. I overskrifter, logoer og ordmerker må du kanskje justere ett eller to par. Kerning har hele listen og en metode for retting på øyemål.

Hva linjeavstand er i typografi

Det engelske ordet leading kommer fra blystrimlene trykkere la mellom linjer av metalltyper. I dag betyr det linjehøyde: avstanden fra én grunnlinje til neste. For liten, og over- og underlengder krasjer; for stor, og linjene driver fra hverandre som separate tanker. Vanligvis trenger lengre linjer og mindre tekst mer linjeavstand. Linjehøyde og linjelengde forklarer hvorfor.

Hva du endrer først: sperring, kerning eller linjeavstand

Jobb fra største valg til minste. Linjeavstand og sperring definerer stilen; kerning rydder opp i resten. Feil rekkefølge gjør at du må gjøre eget arbeid om igjen.

1. 1

   Velg størrelse og vekt

   Avstanden avhenger av begge. Sett dem først, siden større eller tyngre skrift trenger andre verdier.

2. 2

   Sett linjeavstand

   Bestem hvor tett linjene skal ligge. Overskrifter tettere, avsnitt luftigere.

3. 3

   Sett sperring for stilen

   Bruk én verdi til hele overskrifts-, etikett- eller brødtekststilen. Hold den konsekvent i designet.

4. 4

   Juster parene som fortsatt har hull

   Bare i stor eller varig skrift. Se etter AV, To, LT og lignende, og juster ett par om gangen.

5. 5

   Sjekk i faktisk størrelse

   Se resultatet slik folk skal se det. Avstand som virker riktig innzoomert, kan se løs ut på mobilen.

Startverdier for sperring og linjeavstand

Dette er fornuftige utgangspunkt, ikke lover. Skrifter er ulike, og en smal overskriftsskrift oppfører seg helt annerledes enn en bred geometrisk sans serif. Begynn her og stol så på øyet.

Sperring, kerning og linjeavstand 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;
}

Hold verdiene samlet så hver side bruker samme avstand til samme rolle. Det er kjernen i et typografisystem. Lager du innlegg fremfor nettsider, gjelder samme idé: bestem avstandene én gang, skriv dem i merkevarereglene og gjenbruk dem. I Gradiently holder merkevaresettet overskrifts- og brødtekstskrifter. Designer bruker det når den lager nye størrelser, så skriften holder sammen fra kvadratisk innlegg til Story.