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
| Teksttype | Typisk line-height | Praktisk note |
|---|---|---|
| Display / hero | 1.05-1.2 | Hold den stram, især ved 2 linjer |
| Overskrift | 1.1-1.3 | Justér efter længde og font |
| Lead | 1.2-1.4 | Skal være rolig, men tydelig |
| Brødtekst | 1.45-1.65 | Standardområde for læsbarhed |
| Småtekst | 1.3-1.5 | Pas på for tæt metadata |
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.