Radavstånd och radlängd för läsbar text

Radavstånd (radhöjd, line height) är avståndet från baslinjen på en textrad till baslinjen på nästa, och radlängd (som typografer kallar satsbredd) är hur många tecken som får plats på en rad. För brödtext är ett radavstånd på ungefär 1,4 till 1,6 gånger typsnittsstorleken och en radlängd på ungefär 45 till 75 tecken det intervall som går bekvämt att läsa i de flesta typsnitt. Rubriker vill ha mindre radavstånd, ofta 1,05 till 1,25. De två inställningarna gör mer för läsbarheten än nästan något typsnittsval.

Den här guiden förklarar varför intervallen fungerar, hur de två inställningarna påverkar varandra och hur du sätter dem för webbsidor, bildspel och inlägg i sociala medier. Den hör hemma i den bredare guiden typografins grunder, tillsammans med bokstavsavstånd.

Vad radavstånd och radlängd egentligen styr

Att läsa är en serie hopp. Ögat tar in några ord, hoppar längs raden och gör sedan ett långt återsvep åt vänster för att hitta nästa rad. Radlängden avgör hur lång den resan är. Radavståndet avgör hur lätt det är att landa på rätt rad i slutet av svepet.

Är det för tätt trängs raderna: underlängder rör vid överlängder och återsvepet landar på fel rad. Är det för glest faller stycket isär i remsor. Rader som är för långa tappar ögat på vägen tillbaka; rader som är för korta gör läsningen hackig.

Så väljer du radavstånd för brödtext

Börja på 1,5 och justera på känn. Tre saker flyttar talet uppåt eller nedåt.

• x-höjd. Typsnitt med hög x-höjd (gemener som är stora i förhållande till versaler) ser tätare ut, så de behöver mer radavstånd. Typsnitt med låg x-höjd kan ligga tätare.
• Radlängd. Långa rader behöver mer radavstånd så att återsvepet får ett bredare mål. Korta rader, som i en smal kolumn eller på en telefonskärm, klarar lite mindre.
• Vikt och färg. Fet text och ljus text på mörk botten ser båda tyngre ut på sidan, så de tjänar på lite mer utrymme mellan raderna.

Riktlinjerna för tillgänglighet pekar åt samma håll. W3C:s kriterium för textavstånd kräver att innehållet fortsätter fungera när en läsare höjer radavståndet till 1,5 gånger typsnittsstorleken, så varje layout byggd kring 1,5 klarar redan den delen av testet. Sätt aldrig en fast höjd på en textruta så snävt att extra radavstånd skulle klippa bort orden.

Radavstånd för rubriker och stor text

Radavstånd är ett förhållande, så utrymmet det skapar växer med typsnittsstorleken. Vid 16 px lägger ett radavstånd på 1,5 till 8 px utrymme. Vid 72 px lägger samma förhållande till 36 px, vilket är långt mer än en rubrik behöver. Därför ser stor text lös ut med brödtextens inställningar och behöver dras åt när den växer.

En praktisk skala: brödtext på 1,5, underrubriker på ungefär 1,3, rubriker på 1,1 till 1,2 och mycket stora displayrader på 1,0 till 1,05. Kontrollera de tätaste inställningarna för krockar: en underlängd på rad ett (g, y, p) kan slå i ett accenttecken eller en överlängd på rad två. Gör den det, öppna radavståndet lite i stället för att flytta enskilda rader.

Hur lång en textrad bör vara

Det gamla intervallet från boktypografin är 45 till 75 tecken per rad, räknat med bokstäver, mellanslag och skiljetecken, där ungefär 60 till 70 känns mest naturligt för sammanhängande läsning. På en webbplats betyder det oftast en textkolumn på ungefär 560 till 720 px vid en typsnittsstorlek på 16 till 18 px, men det beror på typsnittet, så mät i tecken i stället för i pixlar.

Räkna tecknen på en typisk rad för att kontrollera. Regelbundet över ungefär 80 betyder att kolumnen är för bred; under ungefär 40 att den är för smal, med ojämna kanter och strandade korta ord.

För bred: 110 tecken

1100 × 180

Bekväm: 65 tecken

650 × 260

För smal: 30 tecken

300 × 480

Ställ in radavstånd och radlängd i CSS

Två vanor täcker det mesta. Skriv radavstånd som ett enhetslöst tal, så att varje element räknar ut det från sin egen typsnittsstorlek, och begränsa radlängden med enheten ch, som bygger på bredden av nolltecknet i det aktuella typsnittet. MDN:s sida om line-height förklarar varför enhetslösa värden ärvs säkrare än pixlar 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;
}

Radavstånd och radlängd i inlägg och bildspel

Inlägg i sociala medier och bildspel läses på några sekunder, ofta på en telefon, så reglerna förskjuts. Raderna är korta i sig och få. Håll rubriker tätt, runt 1,05 till 1,2, och håll varje stödrad till en eller två korta rader på runt 1,3. Om ett inlägg behöver ett stycke med brödtextens radavstånd behöver det förmodligen färre ord i stället.

På ett inlägg i 1080 gånger 1350 läses en rubrik på tre till sex ord per rad bra i telefonstorlek. På ett bildspel i 1920 gånger 1080 gäller samma princip från andra sidan rummet: korta rader, täta rubriker, generösa marginaler. Guiderna om typsnitt för sociala medier och bakgrunder för presentationer tar upp storleksdelen av problemet.

Text på en rörig bakgrund behöver lite mer av allt: mer radavstånd, en större storlek och en lugnare yta bakom. Text på gradient går igenom hela metoden.

En snabb checklista för läsbara avstånd

1. 1

   Sätt brödtexten först

   Välj storleken, ett radavstånd runt 1,5 och en radlängd på 60 till 70 tecken. Ställ in allt annat utifrån det.

2. 2

   Dra åt när texten växer

   Minska radavståndet steg för steg genom underrubriker till rubriker, och kontrollera de tätaste raderna för krockar.

3. 3

   Mät i tecken

   Räkna en riktig rad. Hamnar den utanför 45 till 75, åtgärda behållaren, inte typsnittsstorleken.

4. 4

   Låt läsaren ändra det

   Undvik textrutor med fast höjd, så att större text eller vidare avstånd aldrig klipper dina ord.