Kurs HTML

5.8. Odstępy między literami i słowami (letter-spacing, word-spacing)

Strona główna > Kurs CSS > Rozdział 5: Stylizowanie Tekstu > Odstępy między literami i słowami (letter-spacing, word-spacing)

Wprowadzenie: Precyzyjna kontrola odstępów

Oprócz podstawowych właściwości typograficznych, CSS pozwala również na precyzyjną kontrolę odstępów między poszczególnymi znakami (literami) oraz całymi słowami w tekście. Służą do tego właściwości letter-spacing i word-spacing.

Subtelne dostosowanie tych odstępów może znacząco wpłynąć na czytelność, estetykę i ogólny wygląd tekstu, szczególnie w nagłówkach, logotypach czy akcentowanych fragmentach.

Właściwość letter-spacing (Odstępy między literami)

Właściwość letter-spacing kontroluje dodatkową przestrzeń **między znakami (literami)** w tekście. Jest to często określane jako **tracking** w typografii (nie mylić z kerningiem, który dotyczy odstępów między konkretnymi parami liter).

Może przyjmować następujące wartości:

  • normal: Normalne odstępy między literami, zdefiniowane przez samą czcionkę. Jest to wartość domyślna.
  • <długość>: Określa dodatkową przestrzeń, która ma być dodana (lub odjęta, jeśli wartość jest ujemna) do domyślnych odstępów między znakami. Można używać jednostek takich jak px, em, rem.
    • Wartość dodatnia (np. 2px, 0.1em) zwiększa odstępy, rozstrzelając litery.
    • Wartość ujemna (np. -1px, -0.05em) zmniejsza odstępy, zagęszczając litery.
h1 {
  /* Lekkie zwiększenie odstępów w nagłówku dla lepszej czytelności */
  letter-spacing: 1px;
}

.logo-text {
  /* Znaczne rozstrzelenie liter w logotypie */
  letter-spacing: 0.2em; 
  text-transform: uppercase;
}

.condensed-text {
  /* Zmniejszenie odstępów dla uzyskania zagęszczonego efektu */
  letter-spacing: -0.5px;
}

.normal-spacing {
  letter-spacing: normal;
}

Uwaga: Nadmierne zwiększanie lub zmniejszanie letter-spacing może znacząco pogorszyć czytelność tekstu. Należy używać tej właściwości z umiarem, głównie do subtelnych korekt lub celów stylistycznych.

Właściwość word-spacing (Odstępy między słowami)

Właściwość word-spacing kontroluje dodatkową przestrzeń **między słowami** w tekście.

Może przyjmować następujące wartości:

  • normal: Normalne odstępy między słowami, zdefiniowane przez czcionkę i przeglądarkę. Jest to wartość domyślna.
  • <długość>: Określa dodatkową przestrzeń, która ma być dodana (lub odjęta) do domyślnych odstępów między słowami. Można używać jednostek takich jak px, em, rem.
    • Wartość dodatnia (np. 5px, 0.25em) zwiększa odstępy między słowami.
    • Wartość ujemna (np. -2px, -0.1em) zmniejsza odstępy między słowami (może prowadzić do ich nachodzenia na siebie).
.rozstrzelone-slowa {
  /* Zwiększenie odstępów między słowami */
  word-spacing: 0.5em;
}

.zageszczone-slowa {
  /* Zmniejszenie odstępów między słowami (używać ostrożnie!) */
  word-spacing: -3px;
}

.normal-word-spacing {
  word-spacing: normal;
}

Uwaga: Modyfikowanie word-spacing jest mniej powszechne niż letter-spacing. Zbyt duże lub zbyt małe odstępy między słowami mogą drastycznie wpłynąć na rytm czytania i czytelność. Wartość word-spacing jest również modyfikowana przez przeglądarkę podczas justowania tekstu (text-align: justify;).

Dziedziczenie

Obie właściwości, letter-spacing i word-spacing, są **dziedziczone**. Oznacza to, że ustawienie ich na elemencie nadrzędnym wpłynie również na elementy potomne, chyba że zostaną one jawnie nadpisane dla potomka.

Zadania praktyczne

Zadanie 1 (z rozwiązaniem)

Masz nagłówek h1 z tekstem "WITAMY NA STRONIE". Użyj CSS, aby zamienić tekst na wielkie litery (text-transform: uppercase;) i lekko zwiększyć odstępy między literami o 2px.

Rozwiązanie:

CSS:

h1 {
  text-transform: uppercase;
  letter-spacing: 2px;
}

Efekt: Tekst nagłówka będzie wyświetlony jako "W I T A M Y N A S T R O N I E" (zwiększone odstępy między literami).

Zadanie 2 (do samodzielnego wykonania)

Stwórz paragraf z kilkoma zdaniami. Zastosuj do niego word-spacing: 0.3em; i zaobserwuj, jak zwiększyły się odstępy między słowami. Czy tekst jest nadal czytelny?

Zadanie 3 (do samodzielnego wykonania)

Użyj ujemnej wartości letter-spacing (np. -1px) dla elementu span, aby uzyskać efekt zagęszczonego tekstu. Zastosuj to do jakiegoś krótkiego słowa i zobacz efekt.

FAQ - Najczęściej zadawane pytania

Czy letter-spacing to to samo co kerning?

Nie do końca. letter-spacing (tracking) równomiernie zwiększa lub zmniejsza odstępy między wszystkimi znakami. Kerning to dostosowywanie odstępów między konkretnymi *parami* znaków (np. zmniejszenie odstępu między "A" i "V"), co jest zazwyczaj wbudowane w samą czcionkę. CSS nie daje bezpośredniej kontroli nad kerningiem, ale właściwość font-kerning (wartości: auto, normal, none) pozwala sugerować przeglądarce, czy ma używać informacji o kerningu zawartych w czcionce.

Jakich jednostek najlepiej używać dla letter-spacing i word-spacing?

Często używa się jednostek relatywnych jak em, ponieważ dostosowują one odstępy proporcjonalnie do rozmiaru czcionki. Na przykład letter-spacing: 0.05em; doda odstęp równy 5% aktualnego rozmiaru czcionki. Użycie px daje stały odstęp, niezależny od rozmiaru czcionki.

Czy te właściwości wpływają na szerokość elementu?

Tak, zwiększenie letter-spacing lub word-spacing naturalnie sprawi, że tekst zajmie więcej miejsca w poziomie, co może wpłynąć na zawijanie linii lub szerokość elementów, jeśli nie mają one ustalonej szerokości lub używają width: auto;.

Czy mogę używać wartości procentowych dla letter-spacing lub word-spacing?

Nie, standard CSS nie dopuszcza wartości procentowych dla tych właściwości. Należy używać wartości normal lub jednostek długości (px, em, rem itp.).