Proprietà CSS word-spacing
Usa la proprietà CSS word-spacing per specificare lo spazio tra le parole in un testo. Scopri i valori e prova gli esempi.
La proprietà CSS word-spacing controlla la quantità di spazio tra le parole in un testo. Aggiunge (o sottrae) al gap predefinito che il font inserisce già dopo ogni carattere spazio — regolando quindi la distanza tra le parole, non quella tra le singole lettere. Per lo spazio tra le lettere, usa invece letter-spacing.
Questa pagina tratta la sintassi, tutti i valori accettati, il comportamento delle lunghezze positive e negative, le unità utilizzabili, le considerazioni sull'accessibilità e gli esempi eseguibili.
Come funziona
Il browser parte dal gap tra parole definito dal font. Il valore che fornisci a word-spacing viene aggiunto sopra quella baseline:
- Un valore positivo allontana le parole tra loro.
- Un valore negativo avvicina le parole (e può sovrapporle se sufficientemente grande).
- La parola chiave
normalripristina la spaziatura predefinita del font — equivale a0, ma è il valore iniziale della proprietà anziché una lunghezza letterale.
Poiché word-spacing opera sui gap prodotti dai caratteri spazio, influisce solo sul contenuto inline. È anche ereditata, quindi impostarla su un contenitore la applica a tutto il testo discendente, a meno che un elemento figlio non la sovrascriva.
Quando usarla?
- Leggibilità — ampliare leggermente i gap tra le parole può rendere titoli densi o in maiuscolo più facili da leggere a colpo d'occhio.
- Tipografia display — spaziare un titolo in stile logo per un aspetto volutamente arioso.
- Compressione — un piccolo valore negativo può recuperare spazio in un layout vincolato, anche se va usato con parsimonia.
Per la maggior parte del corpo del testo, lascia il valore a normal; gap tra parole troppo ampi rallentano la lettura anziché facilitarla.
La proprietà word-spacing è animabile, quindi può essere usata con la proprietà transition.
word-spacing si applica solo al contenuto inline. Per spaziare le lettere, vedi letter-spacing; per controllare la spaziatura prodotta dagli spazi bianchi, vedi white-space.
| Valore iniziale | normal |
|---|---|
| Si applica a | Tutti gli elementi. Si applica anche a ::first-letter e ::first-line. |
| Ereditata | Sì. |
| Animabile | Sì. word-spacing è animabile. |
| Versione | CSS1 |
| Sintassi DOM | object.style.wordSpacing = "40px"; |
Sintassi
Sintassi della proprietà CSS word-spacing
word-spacing: normal | length | initial | inherit;Esempio della proprietà word-spacing con il valore "normal":
Esempio della proprietà CSS word-spacing con il valore normal
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.text {
word-spacing: normal;
}
</style>
</head>
<body>
<h2>Word-spacing property example</h2>
<p class="text">Lorem ipsum is simply dummy text...</p>
</body>
</html>Nell'esempio seguente lo spazio tra le parole è di 20px:
Esempio della proprietà word-spacing specificata in "px":
Esempio della proprietà CSS word-spacing con valore length (px)
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.text {
word-spacing: 20px;
}
</style>
</head>
<body>
<h2>Word-spacing property example</h2>
<p class="text">Lorem ipsum is simply dummy text...</p>
</body>
</html>Risultato
Esempio di un valore word-spacing negativo:
Una lunghezza negativa avvicina le parole. Qui il gap viene ridotto di 3px:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.text {
word-spacing: -3px;
}
</style>
</head>
<body>
<h2>Negative word-spacing example</h2>
<p class="text">Lorem ipsum is simply dummy text of the printing industry.</p>
</body>
</html>Unità
Il valore length accetta qualsiasi unità di lunghezza CSS:
- Assolute —
px,pt,cm. Fisse indipendentemente dalla dimensione del font. - Relative —
emerem. Un valoreemsi scala con ilfont-sizedell'elemento, quindiword-spacing: 0.25emmantiene la proporzione costante al crescere del testo. Di solito è la scelta più robusta per la tipografia responsive. I valori percentuali non sono consentiti.
Accessibilità
Secondo WCAG 1.4.12 (Text Spacing), gli utenti possono sovrascrivere la spaziatura delle parole fino ad almeno 0.16em per la leggibilità. Evita di codificare valori in pixel elevati che impediscono il riflusso del testo, e non affidarti mai alla sola spaziatura delle parole per trasmettere un significato. Una spaziatura eccessiva può anche frammentare le parole per gli utenti con disabilità cognitive o visive, quindi mantieni le modifiche sottili per il corpo del testo.
Valori
| Valore | Descrizione | Prova |
|---|---|---|
| normal | Specifica la spaziatura normale tra le parole. È il valore predefinito di questa proprietà. | Prova » |
| length | Specifica una spaziatura extra tra le parole. Può essere specificata in px, pt, cm, em, ecc. Sono ammessi valori negativi. | Prova » |
| initial | Fa sì che la proprietà utilizzi il suo valore predefinito. | Prova » |
| inherit | Eredita la proprietà dal suo elemento padre. |