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

[Canonical HTML page](https://gradiently.design/sv/guide/line-height-and-line-length)

Det mesta som känns tröttsamt att läsa har rätt typsnitt men fel avstånd. Två inställningar rättar till det mesta: hur högt varje rad är och hur lång den löper.

## The short version

- Radavstånd är det lodräta avståndet från en textrad till nästa, och radlängd är hur många tecken som ryms på en rad.
- Brödtext läses oftast bäst med 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.
- Rubriker behöver tätare radavstånd än brödtext, ofta 1,05 till 1,25, eftersom stor text redan har gott om utrymme mellan raderna.
- Ju längre rad, desto mer radavstånd behövs, så att ögat hittar början på nästa rad utan att halka.
- I CSS anger du radavstånd utan enhet, som `line-height: 1.5`, och begränsar radlängden med `max-width` i enheten `ch`.

**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](https://gradiently.design/sv/guide/typography-basics), tillsammans med [bokstavsavstånd](https://gradiently.design/sv/guide/letter-spacing).

## 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.

| Inställning | För lite | Bekvämt | För mycket |
| --- | --- | --- | --- |
| Radavstånd i brödtext | Under 1,2: raderna trängs och krockar | 1,4 till 1,6 | Över 2: stycket delas upp i remsor |
| Radavstånd i rubriker | Under 1: bokstäver från två rader rör vid varandra | 1,05 till 1,25 | Över 1,4: en tvåradig titel läses som två titlar |
| Radlängd i brödtext | Under ungefär 40 tecken: hackigt | 45 till 75 tecken | Över ungefär 90 tecken: ögat tappar sin plats |

Utgångsintervall för latinsk text. Typsnittets x-höjd och storleken du sätter det i förskjuter dem något åt vartdera hållet.

## 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](https://www.w3.org/WAI/WCAG21/Understanding/text-spacing.html) 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.

### Undvik

- Ett radavstånd för varje storlek i designen
- Brödtext på 1,2 för att det ser snyggt ut i en skiss
- Rubriker på 1,5, så att en tvåradig titel faller isär
- Textrutor med fast höjd som klipper när avståndet växer

### Gör

- Tätare radavstånd ju större texten blir
- Brödtext runt 1,5, justerad efter typsnittet
- Rubriker mellan 1,05 och 1,25
- Rutor som växer med sin text

## 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.

Ett stående inlägg med en tvåradig rubrik satt med tätt radavstånd på en varm gradient

En tvåradig rubrik satt tätt, runt 1,1, hålls ihop som en enda tanke.

Ett stående inlägg med en rubrik och ett stycke brödtext med generösare radavstånd

Stödtexten under får mer plats, eftersom den läses rad för rad.

## 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

Samma stycke i tre radlängder. Den bekväma kolumnen är ungefär två tredjedelar så bred som den breda och mycket lättare att följa.

> **Bred skärm betyder inte bred text** På en stor skärm lägger du till utrymme runt kolumnen eller en andra kolumn för bilder och anteckningar. Att sträcka brödtext över hela skärmen är den vanligaste orsaken till sidor som känns svårlästa.

## 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](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height) förklarar varför enhetslösa värden ärvs säkrare än pixlar eller em.

```css
: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;
}
```

Enhetslösa radavstånd som dras åt när texten växer, och en radlängd i tecken. `ch` bygger på ett enda tecken, så kontrollera ett riktigt stycke och justera värdet om ditt typsnitt är brett.

## 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](https://gradiently.design/sv/guide/fonts-for-social-media) och [bakgrunder för presentationer](https://gradiently.design/sv/guide/presentation-backgrounds) tar upp storleksdelen av problemet.

Ett stående socialt inlägg som listar tre punkter på korta rader mot en mjuk gradientbakgrund

Ett listinlägg håller varje punkt till en kort rad, så radavståndet behöver bara hålla ihop listan.

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](https://gradiently.design/sv/guide/text-on-gradient) går igenom hela metoden.

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

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. **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. **Mät i tecken** Räkna en riktig rad. Hamnar den utanför 45 till 75, åtgärda behållaren, inte typsnittsstorleken.
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.

## FAQ

### Vad är ett bra radavstånd för brödtext?

Ungefär 1,4 till 1,6 gånger typsnittsstorleken för de flesta typsnitt och skärmar. Börja på 1,5 och justera efter typsnittets x-höjd och hur långa dina rader är.

### Vad är den ideala radlängden för läsning?

Ungefär 45 till 75 tecken per rad, mellanslag inräknade, där omkring 60 till 70 känns mest naturligt för lång läsning. I CSS är en `max-width` på ungefär 60ch till 70ch en bra början.

### Är radavstånd samma sak som ledning (leading)?

Nästan. Ledning kommer från blysättningen, där blyremsor lades in mellan raderna. I digitala verktyg är radavstånd hela avståndet från en baslinje till nästa, vilket är vad de flesta numera menar med ledning.

### Varför behöver rubriker mindre radavstånd än brödtext?

Radavstånd är ett förhållande till typsnittsstorleken, så i stora storlekar lägger samma förhållande till mycket mer utrymme. Rubriker ser oftast bäst ut mellan 1,05 och 1,25.