Ce face line-height
line-height (interlinia) este cel mai important factor de lizibilitate a textului pe ecran. Dacă rândurile sunt prea apropiate, ochiul sare cu greu de la finalul unui rând la începutul următorului.
Regula de aur: folosește numere fără unitate de măsură (ex. 1.5 sau 1.6). În acest fel, valoarea se multiplică proporțional cu mărimea fontului fiecărui element copil, prevenind suprapunerile accidentale de text.
Valori uzuale
| Valoare | Descriere |
|---|---|
număr (ex. 1.5) |
Multiplicator relativ la font-size-ul curent (recomandat). |
normal |
Valoarea implicită a browserului (aproximativ 1.15 – 1.2, prea strânsă pentru lectură). |
px / rem |
Valori absolute fixe. |
Exemple
Exemplul 1: Interlinie aerisită pentru lectură plăcută a unui articol
1.65 face ca textele lungi să poată fi parcurse fără oboseală vizuală.
article p {
font-size: 1.125rem;
line-height: 1.65;
color: #334155;
max-width: 65ch; /* lungime optimă de rând: 65 caractere */
}Efect vizual în browser
Un paragraf cu rânduri aerisite, ușor de citit, cu spațiere verticală armonioasă.Greșeli frecvente
- Folosirea pixelilor fixi (ex. line-height: 20px); dacă într-un titlu mărești font-size la 28px, rândurile se vor încăleca și se vor scrie unele peste altele. Folosește multiplicatori simpli ca 1.2 sau 1.5.
Comenzi înrudite
font-size (rem, em, px, clamp): Stabilește dimensiunea textului; se recomandă unități rem pentru respectarea preferințelor utilizatorului.font-family: Stabilește familia de fonturi folosită pentru afișarea textului, cu variante de rezervă (fallback).