Kurs HTML

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.