Właściwość CSSTypografia
letter-spacing
Zmienia odstępy między literami.
- Wartość domyślna
normal- Dziedziczona
- Tak
- Animowalna
- tak, jako długość
- Dotyczy
- wszystkie elementy
- JavaScript
element.style.letterSpacing = "0.1em"
Przykład
#CSS
.eyebrow {
text-transform: uppercase;
letter-spacing: 0.14em;
font-size: 0.75rem;
}HTML przykładu
<p class="eyebrow" style="text-transform: uppercase; letter-spacing: 0.14em; font-size: 12px; color: #a78bfa; margin: 0">Nowy moduł</p>
<h2 style="margin: 4px 0 0">Animacje w CSS</h2>Podgląd
Definicja i zastosowanie
#Właściwość letter-spacing dodaje albo odejmuje odstęp między znakami. Wartość dodatnia rozsuwa litery, ujemna je zbliża. Najwygodniej podawać ją w em, bo wtedy skaluje się z rozmiarem czcionki.
Rozstrzelenie liter dobrze wygląda w krótkich napisach pisanych wersalikami, na przykład w etykietach i przyciskach. Duże nagłówki często zyskują na lekkim zagęszczeniu, np. -0.02em.
W tekście ciągłym zmieniaj odstępy ostrożnie. Zbyt ściśnięte lub rozstrzelone litery obniżają czytelność.
Składnia
#Składnia
letter-spacing: normal | <długość>;Wartości
#Wartości w praktyce
#normal
Odstępy zaprojektowane w kroju.
.demo { letter-spacing: normal; }0.2em
Wyraźne rozstrzelenie, typowe dla etykiet.
.demo { letter-spacing: 0.2em; }-0.05em
Zagęszczenie liter.
.demo { letter-spacing: -0.05em; }4px
Stały odstęp w pikselach.
.demo { letter-spacing: 4px; }Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Małe napisy wersalikami prawie zawsze potrzebują lekkiego rozstrzelenia, około 0.05–0.15em.
- Używaj jednostki
em, żeby odstęp rósł razem z czcionką.
Powiązane hasła
#Widzisz błąd albo brakuje przykładu? Napisz do nas.