Linjeavstand og linjelengde for lesbar tekst

Linjeavstand er avstanden fra grunnlinjen i én tekstlinje til grunnlinjen i den neste, og linjelengde (typografer kaller det satsbredde) er hvor mange tegn som står på én linje. For brødtekst er en linjeavstand på omtrent 1.4 til 1.6 ganger skriftstørrelsen og en linjelengde på omtrent 45 til 75 tegn det området som leses behagelig i de fleste fonter. Overskrifter vil ha mindre linjeavstand, ofte 1.05 til 1.25. De to innstillingene gjør mer for lesbarheten enn nesten ethvert fontvalg.

Denne guiden forklarer hvorfor verdiene fungerer, hvordan de to innstillingene påvirker hverandre, og hvordan du setter dem for nettsider, lysbilder og innlegg i sosiale medier. Den hører hjemme i den bredere guiden til grunnleggende typografi, sammen med bokstavavstand.

Hva linjeavstand og linjelengde egentlig styrer

Lesing er en rekke hopp. Øyet tar inn noen få ord, hopper bortover linjen og gjør så et langt sveip tilbake mot venstre for å finne neste linje. Linjelengden avgjør hvor lang den reisen er. Linjeavstanden avgjør hvor lett det er å lande på riktig linje når sveipet er over.

For tett, og linjene klumper seg: underlengder berører overlengder, og sveipet lander på feil linje. For løst, og avsnittet faller fra hverandre i striper. For lange linjer mister øyet på veien tilbake, og for korte linjer gjør lesingen hakkete.

Slik velger du linjeavstand for brødtekst

Start på 1.5 og juster på øyemål. Tre ting skyver tallet opp eller ned.

• X-høyde. Fonter med høy x-høyde (små bokstaver som er store i forhold til versalene) virker tettere, så de trenger mer linjeavstand. Fonter med lav x-høyde kan stå tettere.
• Linjelengde. Lange linjer trenger mer linjeavstand, så sveipet tilbake får et bredere mål. Korte linjer, som i en smal spalte eller på en telefonskjerm, klarer seg med litt mindre.
• Vekt og farge. Fet tekst og lys tekst på mørk bunn virker begge tyngre på siden, så de har godt av litt mer luft mellom linjene.

Rådene for tilgjengelighet peker samme vei. W3Cs suksesskriterium for tekstavstand krever at innholdet fortsatt fungerer når en leser øker linjeavstanden til 1.5 ganger skriftstørrelsen, så et oppsett bygget rundt 1.5 består allerede den delen av testen. Lås aldri høyden på en tekstboks så stramt at ekstra linjeavstand ville kuttet ordene.

Linjeavstand for overskrifter og stor skrift

Linjeavstand er et forholdstall, så luften den skaper, vokser med skriftstørrelsen. På 16 px gir en linjeavstand på 1.5 8 px med luft. På 72 px gir det samme forholdet 36 px, som er langt mer enn en overskrift trenger. Derfor virker stor skrift løs med brødtekstens innstillinger og må strammes etter hvert som den vokser.

En praktisk skala: brødtekst på 1.5, mellomtitler på omtrent 1.3, overskrifter på 1.1 til 1.2 og svært store displaylinjer på 1.0 til 1.05. Sjekk de tetteste innstillingene for kollisjoner: en underlengde på linje én (g, y, p) kan treffe en aksent eller overlengde på linje to. Skjer det, åpner du linjeavstanden litt i stedet for å flytte enkeltlinjer.

Hvor lang en tekstlinje bør være

Det veletablerte området fra boktypografien er 45 til 75 tegn per linje, medregnet bokstaver, mellomrom og skilletegn, der rundt 60 til 70 føles mest naturlig for sammenhengende lesing. På en nettside betyr det vanligvis en tekstspalte på et sted mellom omtrent 560 og 720 px i bredden med en skriftstørrelse på 16 til 18 px, men det avhenger av fonten, så mål i tegn og ikke i piksler.

For å sjekke teller du tegnene i en typisk linje. Er det jevnlig over omtrent 80, er spalten for bred. Under omtrent 40 er den for smal, med ujevne kanter og korte ord som blir stående alene.

For bred: 110 tegn

1100 × 180

Behagelig: 65 tegn

650 × 260

For smal: 30 tegn

300 × 480

Sett linjeavstand og linjelengde i CSS

To vaner dekker det meste. Skriv linjeavstanden som et tall uten enhet, så hvert element regner den ut fra sin egen skriftstørrelse, og begrens linjelengden med enheten ch, som bygger på bredden av tegnet null i den gjeldende fonten. MDNs side om line-height forklarer hvorfor verdier uten enhet arves tryggere enn piksler eller em.

:root {
  --measure: 65ch;
}

body {
  font-size: 1.0625rem; /* 17px */
  line-height: 1.55;
}

.prose {
  max-width: var(--measure);
  margin-inline: auto;
}

.prose p + p {
  margin-block-start: 1em;
}

h1, h2 {
  line-height: 1.12;
  text-wrap: balance;
}

h3 {
  line-height: 1.3;
}

.caption {
  font-size: 0.875rem;
  line-height: 1.45;
  max-width: 55ch;
}

Linjeavstand og linjelengde i innlegg og lysbilder

Innlegg i sosiale medier og lysbilder leses på sekunder, ofte på en telefon, så reglene forskyver seg. Linjene er korte av natur, og det er få av dem. Hold overskriftene tette, rundt 1.05 til 1.2, og hold en eventuell støttelinje til én eller to korte linjer på rundt 1.3. Trenger et innlegg et avsnitt med brødtekstens linjeavstand, trenger det sannsynligvis heller færre ord.

På et innlegg på 1080 ganger 1350 leses en overskrift med tre til seks ord per linje godt i telefonstørrelse. På et lysbilde på 1920 ganger 1080 gjelder samme prinsipp fra den andre siden av et rom: korte linjer, tette overskrifter, romslige marger. Guidene til fonter for sosiale medier og presentasjonsbakgrunner tar for seg størrelsessiden av problemet.

Tekst på en urolig bakgrunn trenger litt mer av alt: mer linjeavstand, større skrift og et roligere område bak. Tekst på gradient går gjennom hele metoden.

En rask sjekkliste for lesbar avstand

1. 1

   Sett brødteksten først

   Velg størrelsen, en linjeavstand rundt 1.5 og en linjelengde på 60 til 70 tegn. Juster alt annet ut fra dette.

2. 2

   Stram etter hvert som skriften vokser

   Trapp linjeavstanden ned gjennom mellomtitler til overskrifter, og sjekk de tetteste linjene for kollisjoner.

3. 3

   Mål i tegn

   Tell en ekte linje. Faller den utenfor 45 til 75, retter du beholderen, ikke skriftstørrelsen.

4. 4

   La leseren overstyre

   Unngå tekstbokser med fast høyde, så større tekst eller bredere avstand aldri kutter ordene dine.