Typografia, tekst i czytelność

Cele lekcji

Po ukończeniu tej lekcji będziesz umieć:

• ustawić rodzinę fontów i podstawowe fallbacki,
• dobierać rozmiar tekstu z użyciem px i rem,
• kontrolować nacisk tekstu za pomocą font-weight,
• poprawić komfort czytania przez line-height,
• stosować text-align i letter-spacing bez pogarszania czytelności.

Font i rodzina fontów

font-family określa, jakim krojem pisma ma być wyświetlany tekst. W CSS zwykle podajesz listę fontów: przeglądarka użyje pierwszego dostępnego, a jeśli go nie znajdzie, przejdzie do kolejnego.

body {
  font-family: Inter, Arial, sans-serif;
}

W tym przykładzie Inter jest pierwszym wyborem, Arial jest fallbackiem, a sans-serif mówi przeglądarce: użyj dowolnego bezszeryfowego fontu, jeśli poprzednie nie są dostępne.

Rozmiar tekstu

font-size ustala wielkość tekstu. Początkujący często używają pikseli, np. 16px, bo są konkretne i łatwe do wyobrażenia. W projektach często spotkasz także rem, który odnosi się do bazowego rozmiaru tekstu dokumentu.

.article {
  font-size: 1rem;
}

.article-title {
  font-size: 2rem;
}

Jeśli bazowy rozmiar wynosi 16px, to 1rem odpowiada mniej więcej 16px, a 2rem około 32px. Na start zapamiętaj: akapity muszą być wygodne do czytania, a nagłówki powinny tworzyć wyraźną hierarchię.

Grubość tekstu

font-weight decyduje o grubości tekstu. Typowe wartości to 400 dla zwykłego tekstu, 600 dla średniego wyróżnienia i 700 dla mocnego nagłówka lub ważnej etykiety.

p {
  font-weight: 400;
}

.section-title {
  font-weight: 700;
}

Grubość pomaga budować hierarchię, ale nie powinna zastępować struktury HTML. Najpierw dobierz właściwy nagłówek lub element, a potem wzmocnij go stylem.

Wysokość linii

line-height określa odległość między liniami tekstu. Zbyt mała wartość sprawia, że akapity wyglądają ciasno. Zbyt duża może rozbić tekst i utrudnić skupienie.

.article-body {
  font-size: 1rem;
  line-height: 1.7;
}

Dla dłuższych akapitów często dobrze działa zakres około 1.5 do 1.8. To nie jest sztywna reguła, ale dobry punkt startowy dla czytelnego tekstu.

Wyrównanie tekstu

text-align kontroluje poziome wyrównanie tekstu. Najczęściej użyjesz left, center albo right. W językach czytanych od lewej do prawej dłuższe akapity zwykle są najwygodniejsze przy wyrównaniu do lewej.

.article-body {
  text-align: left;
}

.hero-intro {
  text-align: center;
}

Centrowanie może dobrze działać w krótkim hero, etykiecie lub nagłówku. Nie jest dobrym domyślnym wyborem dla długich akapitów, bo każda linia zaczyna się w innym miejscu.

Odstępy między literami

letter-spacing ustawia odstęp między znakami. To detal, który może poprawić krótkie etykiety, zwłaszcza zapisane wielkimi literami, ale łatwo go nadużyć.

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8rem;
}

Dla normalnych akapitów zwykle nie zwiększaj odstępów między literami. Tekst może wtedy wyglądać nienaturalnie i stać się mniej wygodny do czytania.

Czytelność w praktyce

Typografia działa najlepiej wtedy, gdy tekst ma odpowiedni rozmiar, komfortową wysokość linii i rozsądną szerokość. Zbyt szerokie akapity są trudne do śledzenia, nawet jeśli font i kolor są poprawne.

Kopiuj<article class="readable-card">
  <p class="readable-card__label">CSS Academy</p>
  <h2>Czytelny blok tekstu</h2>
  <p>Dobra typografia pomaga użytkownikowi szybko zrozumieć treść i nie męczy wzroku podczas czytania.</p>
</article>

.readable-card {
  max-width: 42rem;
  color: #0f172a;
  background-color: #ffffff;
  padding: 1.5rem;
  border: 1px solid #dbe2f1;
  border-radius: 12px;
}

.readable-card p {
  font-size: 1rem;
  line-height: 1.7;
}

.readable-card__label {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

Dobre praktyki

• Ustaw bazowy font-family, font-size, kolor i line-height na body.
• Długim akapitom dawaj rozsądną szerokość, np. przez max-width.
• Nie centruj długich bloków tekstu.
• Używaj mocniejszej grubości tekstu do hierarchii, a nie do ozdabiania każdego elementu.
• W większych projektach typografię porządkuje się później skalą rozmiarów i tokenami, ale fundamentem nadal jest czytelność.

Mini zadanie

Utwórz mały blok artykułu z nagłówkiem, etykietą i akapitem. Następnie w CSS:

• ustaw font-family z co najmniej jednym fallbackiem,
• dobierz font-size dla akapitu i większy rozmiar dla nagłówka,
• ustaw font-weight: 700 dla nagłówka i 600 albo 700 dla etykiety,
• dodaj line-height, aby akapit był wygodny do czytania,
• ogranicz szerokość tekstu za pomocą max-width.

Na koniec porównaj wersję przed i po zmianach. Czy tekst szybciej się skanuje i czy akapit jest mniej męczący?

Podsumowanie lekcji

Wiesz już, że CSS pozwala kontrolować rodzinę fontów, rozmiar, grubość, wysokość linii, wyrównanie i odstępy między literami. Te właściwości mają bezpośredni wpływ na komfort czytania.

Dobra typografia nie musi być skomplikowana. Wystarczy zacząć od czytelnego fontu, wygodnego rozmiaru, spokojnej hierarchii i akapitów, które nie są zbyt ciasne ani zbyt szerokie.

Kolejny krok: przejdź do Flexboxa, aby zacząć świadomie układać elementy w paskach, kartach i małych komponentach UI.