5.1 Proprietà line-height
I parametri del testo, come line-height, letter-spacing e word-spacing, giocano un ruolo importante nella stilizzazione del testo su
pagine web. Consentono di controllare l'interlinea (la distanza tra le righe), la spaziatura tra le lettere e
la distanza tra le parole rispettivamente. Vediamo più nel dettaglio ciascuna di queste proprietà.
La proprietà line-height definisce l'altezza della riga di testo. Determina la distanza tra le linee di base
delle righe di testo adiacenti, il che influisce sulla densità e leggibilità del testo.
Valori:
- Valore numerico: valore relativo senza unità (per esempio, 1.5), che viene moltiplicato per la dimensione attuale del font
- Valore percentuale: valore relativo in percentuale rispetto alla dimensione attuale del font (per esempio, 150%)
- Valore assoluto: valore in unità fisse (per esempio, pixel) (per esempio, 24px)
- Parola chiave
normal: valore di default, solitamente pari a 1.2
Esempio di utilizzo:
.normal {
line-height: normal;
}
.one-point-five {
line-height: 1.5;
}
.double {
line-height: 2;
}
<body>
<p class="normal">Questo è un testo con altezza di riga normale. Questo è un testo con altezza di riga normale.</p>
<p class="one-point-five">Questo è un testo con altezza di riga 1.5. Questo è un testo con altezza di riga 1.5.</p>
<p class="double">Questo è un testo con altezza di riga doppia. Questo è un testo con altezza di riga doppia.</p>
</body>
5.2 Proprietà letter-spacing
La proprietà letter-spacing definisce la spaziatura tra le lettere, cioè lo spazio aggiuntivo tra i caratteri
del testo. Può essere utilizzata per migliorare la leggibilità o creare effetti visivi.
Valori:
- Valore assoluto: valore in unità fisse (per esempio, pixel — 2px)
- Valore negativo: riduce la distanza tra i caratteri (per esempio, -1px)
- Parola chiave
normal: valore di default, pari a 0 (senza spazio aggiuntivo)
Esempio di utilizzo:
.normal {
letter-spacing: normal;
}
.wide {
letter-spacing: 2px;
}
.narrow {
letter-spacing: -1px;
}
<body>
<p class="normal">Questo è un testo con spaziatura tra le lettere normale.</p>
<p class="wide">Questo è un testo con spaziatura tra le lettere aumentata.</p>
<p class="narrow">Questo è un testo con spaziatura tra le lettere ridotta.</p>
</body>
5.3 Proprietà word-spacing
La proprietà word-spacing definisce la distanza tra le parole nel testo. Aggiunge o rimuove
spazio tra le parole, il che può essere utilizzato per migliorare la leggibilità o creare effetti visivi.
Valori:
- Valore assoluto: valore in unità fisse (per esempio, pixel) (per esempio, 4px)
- Valore negativo: riduce la distanza tra le parole (per esempio, -2px)
- Parola chiave
normal: valore di default, pari alla distanza tra le parole standard (solitamente 0)
Esempio di utilizzo:
.normal {
word-spacing: normal;
}
.wide {
word-spacing: 4px;
}
.narrow {
word-spacing: -2px;
}
<body>
<p class="normal">Questo è un testo con spaziatura tra le parole normale.</p>
<p class="wide">Questo è un testo con spaziatura tra le parole aumentata.</p>
<p class="narrow">Questo è un testo con spaziatura tra le parole ridotta.</p>
</body>
GO TO FULL VERSION