Ce face letter-spacing
letter-spacing adaugă (sau scade, cu valori negative) un spațiu fix între caractere, peste spațierea proprie fontului.
Folosește unități em: spațiul crește proporțional cu mărimea fontului, deci aceeași regulă arată bine și pe titluri, și pe text mic. Valorile tipice sunt mici, între -0.03em și 0.1em.
Textul scris integral cu majuscule (butoane, etichete mici) devine mai lizibil cu puțin spațiu în plus. Titlurile foarte mari arată adesea mai bine ușor strânse.
Valori uzuale
| Valoare | Descriere |
|---|---|
normal |
Spațierea implicită a fontului. |
<lungime> |
Spațiu suplimentar între litere (em, rem, px); poate fi negativ. |
<procent> |
Procent din mărimea fontului; suport recent (Chrome 145, Firefox 133, Safari 17.4). |
Exemple
Exemplul 1: Etichetă cu majuscule mici și aerisite
Combinația text-transform: uppercase plus letter-spacing este clasică pentru etichete de categorie.
.eticheta-categorie {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 600;
color: #2563eb;
}Efect vizual în browser
Textul „OFERTE IAȘI” apare cu litere mari, mici ca înălțime, albastre, cu spații vizibile între ele, ușor de citit chiar la 12px.Exemplul 2: Titlu mare strâns ușor
La 4rem spațiile naturale ale fontului par prea mari; o valoare negativă mică le compensează.
.titlu-hero {
font-size: 4rem;
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1.1;
}Efect vizual în browser
Titlul „Cafeneaua Anei” arată compact și unitar; literele sunt puțin mai apropiate decât în mod normal, fără să se atingă.Greșeli frecvente
- Folosirea px pentru letter-spacing: 2px arată mult la text mic și aproape deloc la titluri mari; em se adaptează automat.
- Spațiu adăugat textului cursiv obișnuit (paragrafe); literele se despart și cuvintele se citesc mai greu.
- Uitarea faptului că spațiul se adaugă și după ultima literă; textul centrat pare ușor deplasat spre stânga la valori mari.
Comenzi înrudite
word-spacing: Modifică spațiul dintre cuvinte, peste lățimea normală a caracterului spațiu din font.text-transform: Afișează textul cu majuscule, minuscule sau cu prima literă mare la fiecare cuvânt, fără să schimbe textul din HTML.font-size (rem, em, px, clamp): Stabilește dimensiunea textului; se recomandă unități rem pentru respectarea preferințelor utilizatorului.