Proprietà CSS letter-spacing
Scopri come usare la proprietà CSS letter-spacing per definire la spaziatura tra le lettere, con valori ed esempi pratici.
La proprietà CSS letter-spacing controlla la spaziatura orizzontale (nota come tracking) tra i caratteri di un testo. Aggiunge spazio in aggiunta alla spaziatura predefinita già fornita dal font, anziché sostituirla.
È particolarmente utile per perfezionare i titoli, le etichette in maiuscolo e i testi in stile logo, dove il tracking predefinito appare troppo stretto o troppo largo. Per i paragrafi lunghi di testo corpo, lasciarla a normal — anche piccole regolazioni compromettono la leggibilità.
letter-spacing accetta un valore <length> (px, em, rem, ecc.) oppure la parola chiave normal. I valori di lunghezza possono essere negativi, avvicinando i caratteri. Poiché il valore è una lunghezza (non un rapporto), usare em è pratico: la spaziatura si scala con la dimensione del font dell'elemento.
La proprietà è animabile, quindi la spaziatura cambia in modo fluido quando viene definita una transizione.
La velocità della transizione è specificata dalla animation-timing-function.
| Valore iniziale | normal |
|---|---|
| Si applica a | Tutti gli elementi. Si applica anche a ::first-letter e ::first-line. |
| Ereditata | Sì. |
| Animabile | Sì. |
| Versione | CSS1 |
| Sintassi DOM | object.style.letterSpacing = "5px"; |
Sintassi
Sintassi della proprietà CSS letter-spacing
letter-spacing: normal | length | initial | inherit;Esempio della proprietà letter-spacing:
Esempio della proprietà CSS letter-spacing con valori normali e negativi
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
letter-spacing: normal;
}
.spacing {
letter-spacing: 4px;
}
.spacing-negative {
letter-spacing: -4px;
}
</style>
</head>
<body>
<h2>Letter-spacing property example</h2>
<p>This is a paragraph.</p>
<p class="spacing">This is a paragraph.</p>
<p class="spacing-negative">This is a paragraph.</p>
</body>
</html>Risultato
Nell'esempio precedente, il primo paragrafo usa la spaziatura predefinita normal, il secondo imposta letter-spacing: 4px (caratteri più distanziati) e il terzo imposta un valore negativo, -4px (caratteri più ravvicinati, fino a sovrapporsi).
Nel prossimo esempio, letter-spacing è combinata con la proprietà transition. Passa il cursore sul testo per vedere la spaziatura animarsi.
Esempio della proprietà letter-spacing con la proprietà transition:
Esempio della proprietà CSS letter-spacing con valori normali e in em
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-color: #fff;
color: #666;
font-size: 1em;
font-family: Roboto, Helvetica Sans-serif;
}
.example1 {
background-color: #666;
color: #eee;
padding: 1em;
letter-spacing: .5em;
-webkit-transition: letter-spacing .5s ease;
transition: letter-spacing .5s ease;
}
.example1:hover {
letter-spacing: normal;
}
.example2 {
background-color: #eee;
color: #666;
padding: 1em;
}
</style>
</head>
<body>
<h2>Letter-spacing property example</h2>
<div class="example1">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus earum ut alias doloremque esse. Porro maxime dicta veniam molestias sed modi sunt sapiente eum nostrum consequatur accusantium facilis blanditiis nihil.
</p>
<div class="example2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, facilis, sed, consectetur incidunt quia sint accusamus obcaecati quisquam asperiores officiis mollitia explicabo est ratione. Qui id ipsa ratione inventore nam!
</div>
</div>
</body>
</html>Quando usare letter-spacing
- Titoli e etichette in maiuscolo. Il testo tutto maiuscolo è impostato strettamente dalla maggior parte dei font; aggiungere da
0.05ema0.1emdi spaziatura lo rende più leggibile e conferisce un aspetto curato e "progettato". - Small caps e acronimi. Un tocco di tracking extra separa i glifi capitali ravvicinati.
- Effetti hover e focus. Poiché la proprietà è animabile, la transizione della spaziatura crea un sottile effetto di rivelazione su link e pulsanti.
- Evitarla per il testo corpo. Distanziare i paragrafi scorrevoli rallenta la lettura. Lasciare il testo lungo a
normal.
Informazioni aggiuntive
- I browser moderni supportano pienamente i valori subpixel (frazionari) come
0.5px. - I valori negativi riducono la spaziatura e possono far sovrapporre i caratteri — utile per titoli in stile logo molto stretti, ma da testare con attenzione.
- Usando
emla spaziatura si scala con ilfont-sizedell'elemento; usandopxrimane fissa indipendentemente dalla dimensione del font. letter-spacingè ereditata, quindi gli elementi figli acquisiscono il valore a meno che non lo reimpostino sunormal.- Questa proprietà controlla la spaziatura tra i singoli caratteri; per distanziare intere parole, usare invece word-spacing.
Valori
| Valore | Descrizione | Prova |
|---|---|---|
| normal | Indica che non ci sarà spazio aggiuntivo tra i caratteri. È il valore predefinito di questa proprietà. | Prova » |
| length | Definisce uno spazio aggiuntivo tra i caratteri. Sono consentiti valori negativi. | Prova » |
| initial | Fa sì che la proprietà utilizzi il suo valore predefinito. | Prova » |
| inherit | Eredita la proprietà dall'elemento genitore. |