Odstępy pomiędzy literami w słowie CSS letter-spacing

Czas czytania: < 1 minut

Zadaniem właściwości CSS letter-spacing jest ustawianie odległości (odstępów) pomiędzy poszczególnymi literami słowa w tekście.

Właściwość CSS – letter-spacing

Za jej pomocą możemy więc uzyskać rozszerzony / rozszczelony (z dużymi odstępami, przerwami pomiędzy literami) lub zwężony (z nachodzącymi na siebie nawzajem literami) tekst.

letter-spacing – nie może przyjmować wartości procentowych (%) może być jednak określana w px, rem, em.

Domyślnym ustawieniem letter-spacing jest normal.

Przykłady użycia, działania letter-spacing

przykładowe odstępy między literami:
Normalny tekst

---

Rozszerzony tekst – letter-spacing: 3px;

---

Zwężony tekst – letter-spacing: -4px;

p.pierwszy {
    letter-spacing: 3px; //rozszerzony 
}

p.drugi {
    letter-spacing: -4px; //zwężony
}

Jak widać po przykładzie wartości ujemne powodują że tekst zaczyna się zwężać (kurczyć) a dodatnie rozsuwają go.

letter-spacing przyjmuje także wartości takie jak:

p {
    letter-spacing:normal;
}

p {
    letter-spacing:initial;
}

Gdzie “normal” to standardowe zwykłe ustawienie, a “initial” ustawia domyślną wartość.

Właściwość ta jest bardzo użyteczna jeśli np. do poprawienia czytelności tekstu na stronie. Taka zmiana czasami może bardzo dużo dać przy niewielkim wysiłku.

dodatkowe tagi:
odstępy między literami css