Line-height i praksis

Hvorfor line-height er et layout-værktøj

Line-height påvirker ikke kun læsbarhed. Den påvirker også:

• hvor roligt en tekstblok føles
• hvor meget plads UI-komponenter optager
• hvor let det er at skabe konsistent spacing

Hvis line-height er forkert, hjælper bedre farver eller større overskrifter sjældent ret meget.

Større tekst kræver typisk strammere line-height

En klassisk fejl er at bruge 1.5 til alt. Det gør især overskrifter for luftige.

En bedre startregel er:

• display / stor overskrift: 1.05-1.2
• overskrifter (h2/h3): 1.1-1.3
• lead / intro: 1.2-1.4
• brødtekst: 1.45-1.65
• småtekst / metadata: 1.3-1.5

Tip: vurder altid overskrifter med rigtige line breaks. En værdi, der ser god ud på én linje, kan falde fra hinanden på to.

Gode startområder

Det er startpunkter, ikke facit. Fontens x-height og tekstens bredde kan flytte det bedste valg.

Sæt line-height pr. rolle, ikke kun globalt

:root {
  line-height: 1.5;
}

h1 {
  line-height: 1.08;
}

h2 {
  line-height: 1.15;
}

.lead {
  line-height: 1.4;
}

Det giver mere kontrol end at håbe, at én global værdi kan bære både hero, body og småtekst.

round() er en avanceret finpudsning, ikke et startpunkt

Hvis du arbejder med flydende typografi, kan round() hjælpe med at “snappe” værdier til faste trin. Det er nyttigt, men først når base-typografien allerede er god.

Brug det sådan her mentalt:

• få hierarki og læsbarhed på plads først
• justér derefter rytmen
• brug kun round(), hvis du faktisk kan se en gevinst

Demo: Fluid line-height der bliver mere stabil

Denne øvelse er god, fordi du både ser line-height som læsbarhedsgreb og som en del af rytmen.