Justowanie tekstu w CSS - jak zachować czytelność?

Na szerokim monitorze tekst może wyglądać elegancko, ale po otwarciu strony na telefonie nagle pojawiają się nienaturalne przerwy między słowami. W tym artykule pokazuję, jak działa wyjustowanie tekstu w HTML i CSS, kiedy używać właściwości text-align: justify, jak poprawić czytelność oraz których błędów unikać.

Co oznacza justowanie tekstu w CSS

Justowanie polega na takim rozłożeniu przestrzeni w wierszu, aby tekst dochodził zarówno do lewego, jak i prawego brzegu kontenera. Przeglądarka zwiększa lub zmniejsza odstępy między słowami, dzięki czemu akapity przypominają układ znany z książek, gazet i dokumentów.

W kodzie nie potrzebuję do tego specjalnego znacznika HTML. Wystarczy właściwość CSS text-align z wartością justify:

p {
  text-align: justify;
}

Regułę można zastosować do pojedynczego akapitu, całego artykułu albo wybranej sekcji. Ja zwykle ograniczam ją do elementu zawierającego tekst główny, ponieważ globalne ustawienie na całej stronie szybko pogarsza wygląd przycisków, formularzy i krótkich komunikatów.

Jak działa ostatni wiersz akapitu

Standardowe justowanie rozciąga większość wierszy do szerokości kontenera, ale ostatni wiersz zazwyczaj pozostaje wyrównany do lewej. To naturalne zachowanie, ponieważ rozciągnięcie kilku słów na całą szerokość stworzyłoby bardzo duże i trudne do odczytania odstępy.

Jeżeli projekt wymaga innego efektu, można użyć dodatkowej właściwości:

.tekst {
  text-align: justify;
  text-align-last: left;
}

W praktyce nie ustawiam ostatniej linii na pełne justowanie dla zwykłych artykułów. Taki zabieg ma sens tylko w konkretnych projektach typograficznych, na przykład przy składzie kolumnowym, i zawsze wymaga sprawdzenia na kilku szerokościach ekranu.

Jak wyjustować akapit krok po kroku

Najprostsze rozwiązanie wymaga dwóch elementów: semantycznego HTML-a i reguły CSS. Przykładowa struktura może wyglądać tak:

  

    Długi akapit tekstu przeznaczony do wyświetlenia
    w głównej części artykułu.
  

.wpis p {
  text-align: justify;
}

Selektor .wpis p ogranicza działanie reguły do akapitów wewnątrz artykułu. Dzięki temu nagłówki, linki w nawigacji i krótkie elementy interfejsu zachowują własne, bardziej przewidywalne wyrównanie.

Lepsza wersja dla języka polskiego

W języku polskim długie słowa potrafią szybko zwiększyć nierówności między wyrazami. Pomóc może automatyczne dzielenie wyrazów:

.wpis p {
  text-align: justify;
  hyphens: auto;
}

Atrybut lang="pl" informuje przeglądarkę, z jakim językiem ma do czynienia, a hyphens: auto pozwala jej korzystać z odpowiednich reguł dzielenia wyrazów. Efekt może różnić się między przeglądarkami, dlatego nie traktuję tego ustawienia jako gwarancji identycznego wyglądu wszędzie.

Wyrównanie tylko wybranego fragmentu

Nie każdy akapit w artykule musi być wyjustowany. Można wyróżnić konkretną klasę:

.tekst-glowny {
  text-align: justify;
}

.lead,
.podpis,
.uwaga {
  text-align: left;
}

Takie rozdzielenie sprawdza się szczególnie dobrze, gdy długi tekst główny ma inny charakter niż lead, podpis pod zdjęciem czy krótka informacja ostrzegawcza.

Justowanie czy wyrównanie do lewej

Wybór nie powinien wynikać wyłącznie z przyzwyczajenia. W projektach frontendowych liczy się szerokość kolumny, długość akapitów, wielkość fontu i sposób korzystania ze strony. Na desktopie justowanie może wyglądać schludnie, ale na telefonie ten sam tekst często staje się mniej wygodny w odbiorze.

Moje praktyczne podejście jest proste: dla dokumentacji technicznej, opisów produktów i większości blogów zaczynam od wyrównania do lewej. Justowanie dodaję dopiero wtedy, gdy poprawia kompozycję i po sprawdzeniu tekstu na ekranie o szerokości około 320-390 pikseli nadal wygląda naturalnie.

Nie oznacza to, że justowanie jest błędem. Przy szerokiej kolumnie o umiarkowanej długości wiersza może nadać stronie uporządkowany, redakcyjny charakter. Problem pojawia się wtedy, gdy estetyka równego brzegu jest ważniejsza niż płynność czytania.

Jak uniknąć dużych odstępów między słowami

Najczęstszą przyczyną nieestetycznego wyglądu jest zbyt wąski kontener. Gdy w jednym wierszu mieści się niewiele słów, przeglądarka ma mało możliwości ich rozłożenia i musi mocno powiększyć spacje.

Pomaga ustawienie rozsądnej szerokości tekstu:

.wpis {
  max-width: 70ch;
  margin-inline: auto;
}

.wpis p {
  text-align: justify;
  hyphens: auto;
}

Jednostka ch odnosi szerokość do przybliżonej szerokości znaku fontu. Wartość 70ch nie jest sztywną normą, ale daje punkt wyjścia dla wygodnej kolumny tekstowej. Ostateczny efekt zależy od kroju pisma, rozmiaru fontu i interlinii.

Responsywne wyłączanie justowania

Jeżeli szeroka wersja strony wygląda dobrze, a mobilna już nie, można zmienić wyrównanie za pomocą media query:

.wpis p {
  text-align: justify;
}

@media (max-width: 600px) {
  .wpis p {
    text-align: left;
  }
}

To jedno z rozwiązań, które często daje lepszy rezultat niż próba wymuszenia identycznej typografii na każdym urządzeniu. Responsywność dotyczy także tekstu, nie tylko szerokości obrazów i układu kolumn.

Przeczytaj również: HTML body - Jak poprawnie budować widoczną część strony?

Uważaj na długie adresy i kod

Justowanie nie jest dobrym ustawieniem dla fragmentów kodu, tabel, adresów e-mail ani bardzo długich ciągów znaków. Takie elementy powinny mieć osobne reguły, na przykład:

pre,
code,
.tabela,
.adres-e-mail {
  text-align: left;
  overflow-wrap: anywhere;
}

W przypadku kodu wyrównanie do lewej jest praktycznie obowiązkowe, bo dodatkowe odstępy mogą utrudnić odczyt struktury. W artykułach frontendowych oddzielam więc tekst opisowy od przykładów kodu, zamiast próbować stylować je jedną regułą.

Kiedy lepiej nie justować tekstu

Nie używam tego ustawienia do nagłówków, menu, przycisków i krótkich bloków informacyjnych. W takich miejscach użytkownik nie czyta długiego ciągu zdań, tylko szybko rozpoznaje etykietę albo podejmuje decyzję.

• Nagłówki powinny mieć stabilne i łatwe do przewidzenia wyrównanie.
• Przyciski najlepiej wyrównywać do środka lub zgodnie z układem komponentu.
• Listy punktowane zwykle czyta się wygodniej przy wyrównaniu do lewej.
• Teksty na banerach mogą wyglądać źle, gdy krótkie wiersze zostaną rozciągnięte.
• Małe ekrany wymagają szczególnie ostrożnego testowania.

Ważna jest też długość wiersza. Jeżeli kolumna jest bardzo szeroka, wzrok musi pokonywać zbyt dużą odległość od lewej do prawej strony. Jeżeli jest zbyt wąska, rośnie liczba łamań i pustych przestrzeni. Samo justowanie nie naprawi źle zaprojektowanej typografii.

Przy stronach dla początkujących często widzę jeszcze jeden błąd: ustawienie text-align: justify na elemencie body. To szybki sposób na objęcie regułą całej witryny, ale późniejsze poprawianie każdego wyjątku zajmuje więcej czasu niż precyzyjne wskazanie sekcji z tekstem głównym.

Prosty zestaw ustawień do artykułu

Jeśli potrzebuję szybko przygotować czytelny blok treści, zaczynam od poniższego wariantu i dopiero potem dopasowuję go do projektu:

.article-content {
  max-width: 70ch;
  margin-inline: auto;
  line-height: 1.6;
}

.article-content p {
  text-align: justify;
  hyphens: auto;
}

.article-content h2,
.article-content h3,
.article-content li,
.article-content pre {
  text-align: left;
}

@media (max-width: 600px) {
  .article-content p {
    text-align: left;
  }
}

Ten kod nie jest uniwersalnym przepisem na każdą stronę, ale dobrze pokazuje najważniejszą zasadę: wyrównanie dobieramy do rodzaju elementu, a nie do całego dokumentu. Na końcu sprawdzam jeszcze powiększenie tekstu, kontrast, przelewanie się długich słów i wygląd w kilku przeglądarkach.

Jeżeli zależy Ci na klasycznym, książkowym układzie, możesz pozostawić justowanie dla dużych ekranów. Gdy priorytetem jest szybkie czytanie i prostota interfejsu, wyrównanie do lewej będzie bezpieczniejszym wyborem. Najlepszy efekt daje nie sama właściwość CSS, lecz dopasowanie jej do szerokości kolumny, języka i urządzenia.