Tekst i typografia w CSS

Typografia to jeden z najważniejszych elementów projektowania stron WWW. Odpowiedni dobór czcionek, wielkości liter, interlinii czy odstępów ma ogromny wpływ na czytelność i estetykę strony. CSS daje szerokie możliwości formatowania tekstu.

1. Czcionki i @font-face

a) Podstawowe czcionki w CSS

Właściwość font-family pozwala określić czcionkę dla tekstu. Możemy podać wiele czcionek – przeglądarka użyje pierwszej dostępnej. Przykład:

  • Jeśli użytkownik nie ma zainstalowanej pierwszej czcionki, użyta zostanie kolejna z listy.
  • Zawsze warto dodać tzw. font-family fallback – np. serif, sans-serif, monospace.

b) @font-face

Pozwala wczytać własne czcionki (np. niestandardowe fonty z internetu). Przykład:

✅ Dzięki temu możemy używać dowolnych czcionek niezależnie od tego, czy są zainstalowane na komputerze użytkownika.

❗ Najczęściej korzysta się z Google Fonts (https://fonts.google.com), które można łatwo podłączyć do strony.

2. Właściwości tekstu

CSS oferuje szereg właściwości do kontrolowania wyglądu czcionek i tekstu.

a) Rozmiar czcionki

b) Waga czcionki (font-weight)

Określa grubość liter.

  • Słowa kluczowe: normal, bold, lighter, bolder.
  • Wartości liczbowe: od 100 (najcieńsze) do 900 (najgrubsze).

c) Styl czcionki (font-style)

  • normal – zwykły tekst,
  • italic – kursywa,
  • oblique – pochylona czcionka.

d) Dekoracje (text-decoration)

Pozwala dodawać linie do tekstu:

  • underline – podkreślenie,
  • overline – linia nad tekstem,
  • line-through – przekreślenie,
  • none – brak dekoracji (np. usuwa podkreślenie w linkach).

Od CSS3 mamy też text-decoration-color, text-decoration-style (solid, dotted, dashed, wavy).

e) Transformacja tekstu (text-transform)

Zmienia wygląd liter:

  • uppercase – wszystkie litery wielkie,
  • lowercase – wszystkie litery małe,
  • capitalize – pierwsza litera każdego wyrazu duża.

f) Cień tekstu (text-shadow)

Dodaje cień do liter:

Składnia: h-offset v-offset blur color.

3. Wyrównanie i odstępy

a) Wyrównanie tekstu (text-align)

  • left – do lewej (domyślne),
  • right – do prawej,
  • center – wyśrodkowanie,
  • justify – wyjustowany (równy z obu stron).

b) Odstęp między literami (letter-spacing)

Kontroluje odległość między znakami:

c) Odstęp między słowami (word-spacing)

Kontroluje przerwy między słowami:

d) Odstęp między wierszami (line-height)

Określa wysokość wiersza, czyli odstęp pionowy między liniami tekstu.

Zaleca się używanie jednostek względnych (em, bez jednostki, %) dla lepszej czytelności.

e) Wcięcie pierwszej linii (text-indent)

Tworzy wcięcie na początku akapitu:

Wróć do spisu lekcji Zadanie praktyczne Rozwiąż quiz