Interlinia i odstępy akapitów: czytelna typografia na stronie WWW

Interlinia i odstępy akapitów wyglądają jak drobiazg, ale w praktyce decydują, czy użytkownik w ogóle przeczyta treść. Zbyt ciasny tekst męczy wzrok, szczególnie na telefonie. Zbyt luźny rozbija rytm i sprawia, że strona wygląda jak niedopracowany dokument.

Na stronie firmowej typografia nie jest dekoracją. To część UX, dostępności i sprzedaży. Użytkownik ma szybko zrozumieć ofertę, porównać opcje, znaleźć CTA i bez wysiłku przejść przez dłuższy poradnik, cennik lub opis usługi.

Najprostsze wartości startowe

Element	Bezpieczny start	Kiedy zmienić?
Tekst główny	16-18 px, line-height 1.5-1.7	Dłuższe artykuły zwykle zyskują na 18 px i większym line-height.
Krótkie opisy kart	15-16 px, line-height 1.45-1.6	Gdy opis ma więcej niż 2-3 linie, zwiększ odstęp.
Nagłówki	Line-height 1.1-1.3	Długie nagłówki na mobile potrzebują więcej oddechu.
Odstęp po akapicie	0.8-1.2 em	Przy długich blokach treści lepiej rozbić tekst mocniej.
Szerokość linii	Około 60-80 znaków	Na bardzo szerokim desktopie ogranicz szerokość kolumny.

Interlinia nie działa sama

Dobra interlinia nie naprawi zbyt małego fontu, słabego kontrastu ani ściany tekstu bez nagłówków. Najlepszy efekt daje zestaw: czytelny krój, sensowny rozmiar, kontrast, krótsze akapity, listy i logiczne nagłówki.

• Nie ustawiaj tekstu głównego na bardzo cienką odmianę fontu.
• Nie rób jasnoszarego tekstu na białym tle tylko dlatego, że wygląda „lekko”.
• Nie rozciągaj akapitów na całą szerokość ekranu desktopowego.
• Nie mieszaj wielu odstępów bez systemu. Ustal rytm i trzymaj go w komponentach.
• Nie chowaj ważnych informacji w mikrotekście pod formularzem lub ceną.

Mobile: tu wychodzą błędy

Na telefonie użytkownik czyta w ruchu, w jasnym świetle, często jedną ręką. Akapit, który wygląda poprawnie na monitorze, może na mobile stać się gęstą kolumną. Dlatego testuj tekst na realnej szerokości 360-430 px, nie tylko w pełnym desktopowym widoku.

Jeżeli po dwóch przewinięciach użytkownik widzi tylko jeden wielki blok treści, warto dodać nagłówek, listę, tabelę, przykład albo krótsze akapity. Rytm treści jest tak samo ważny jak sama treść.

WCAG i dostępność

WCAG nie narzuca jednej konkretnej interlinii dla każdej strony, ale wymaga, żeby tekst dało się czytać, powiększać i dostosowywać bez utraty treści. W praktyce oznacza to, że layout nie może rozsypać się przy powiększeniu tekstu, a komponenty nie powinny mieć sztywnych wysokości, które obcinają linie.

1. Powiększ stronę do 200% w przeglądarce.
2. Sprawdź, czy nagłówki, przyciski, karty i formularze nie nachodzą na siebie.
3. Przejdź artykuł na mobile i oceń, czy akapity mają oddech.
4. Sprawdź kontrast tekstu i linków.
5. Zobacz, czy linki są rozpoznawalne nie tylko kolorem.

Praktyczny CSS

body {
  font-size: 16px;
  line-height: 1.6;
}
.article-content {
  max-width: 72ch;
}
.article-content p {
  margin: 0 0 1em;
}
.article-content h2 {
  line-height: 1.2;
  margin: 2em 0 0.75em;
}

To nie jest jedyna poprawna konfiguracja, ale dobry punkt startowy. Potem trzeba dopasować wartości do konkretnego fontu, języka, długości treści i projektu.

FAQ

Jaka interlinia jest najlepsza dla strony internetowej?

Dla tekstu głównego zwykle sprawdza się line-height 1.5-1.7. Krótkie elementy UI mogą mieć mniej, a długie artykuły często potrzebują więcej oddechu.

Czy większe odstępy poprawiają SEO?

Nie bezpośrednio. Poprawiają jednak czytelność, zaangażowanie i użyteczność, a to pomaga stronie działać lepiej dla ludzi. SEO korzysta z treści, którą użytkownicy faktycznie mogą przeczytać.

Czy odstępy powinny być inne na mobile?

Często tak. Na małych ekranach tekst szybciej robi się gęsty. Warto testować osobne wartości dla nagłówków, akapitów i kart, ale bez rozbijania spójności całego systemu.