Justowanie tekstu – dlaczego nie używać go na stronie WWW?

Justowanie tekstu to wyrównanie akapitu jednocześnie do lewej i prawej krawędzi (wyrównanie obustronne), przez co wszystkie wiersze mają tę samą długość. Na stronach internetowych justowanie jest uznawane za złą praktykę: przeglądarki regulują szerokość justowanego akapitu wyłącznie przez rozciąganie odstępów między wyrazami, co tworzy nierówne przerwy, „korytarze” bieli i obniża czytelność — zwłaszcza na smartfonach oraz u osób z dysleksją i wadami wzroku. Rekomendowanym ustawieniem dla treści online jest wyrównanie tekstu do lewej strony, zgodne z kierunkiem czytania od lewej do prawej i z wytycznymi dostępności WCAG.

Kluczowe spostrzeżenia – justowanie tekstu online

• Justowanie (wyrównanie obustronne) tekstu online to zła praktyka, która utrudnia czytanie i tworzy nierówne odstępy między wyrazami.
• Najlepszą praktyką jest wyrównanie tekstu do lewej strony, nawet jeśli powoduje to postrzępioną prawą krawędź. Wyrównanie do lewej ułatwia czytanie, bo wspiera naturalne przeglądanie treści i lepiej kontroluje długość wiersza.
• W przeglądarce justowania nie da się przewidzieć: ten sam akapit wygląda inaczej na różnych ekranach, rozdzielczościach i urządzeniach, ponieważ przeglądarka rozciąga odstępy zależnie od szerokości elementu.
• Standardy dostępności (WCAG) wprost zalecają, aby tekst na stronie nie był justowany, co ułatwia czytanie użytkownikom z różnymi niepełnosprawnościami.

Czym jest justowanie i jakie są rodzaje wyrównania tekstu?

Justowanie tekstu to wyrównanie akapitu jednocześnie do lewej i prawej krawędzi — jeden z czterech typów wyrównania. Wyrównanie tekstu to element formatowania tekstu — atrybut akapitu, który określa, jak tekst układa się w poziomie. Istnieją cztery podstawowe opcje wyrównywania tekstu:

• do lewej (tekst wyrównany do lewej krawędzi),
• do prawej (tekst wyrównany do prawej krawędzi),
• wyśrodkowany (wyrównany do środka),
• wyjustowany (wyrównany jednocześnie do lewej i prawej).

Justowanie, nazywane też pełnym justowaniem, jest więc jednym z czterech typów wyrównania — tym, w którym tekst dociska się do obu krawędzi, tak aby każdy wiersz miał równą długość. W edytorach takich jak Microsoft Word te opcje znajdują się na karcie Narzędzia główne w sekcji Akapit ; justowanie włącza również skrót Ctrl + J.

Dwa elementy decydują o tym, czy justowanie wygląda dobrze: dzielenie wyrazów i kerning. Dzielenie wyrazów ogranicza zbyt duże odstępy między słowami, które powstają, gdy tekst jest justowany, a kerning reguluje odstępy między pojedynczymi literami. W druku obie operacje wykonuje się ręcznie lub w wyspecjalizowanych programach do składu; w przeglądarce internetowej są one albo niedostępne, albo trudne do kontrolowania, dlatego justowany tekst online rzadko wygląda poprawnie.

Co to jest dzielenie wyrazów?

Dzielenie wyrazów to automatyczny lub ręczny podział słów między wierszami, który zwiększa spójność całego bloku tekstu. W tekście wyjustowanym dzielenie wyrazów jest praktycznie obowiązkowe, bo bez niego między wyrazami powstają duże luki. W tekście wyrównanym do lewej dzielenie wyrazów wygładza postrzępioną prawą krawędź.

Co to jest kerning?

Kerning to regulacja odstępu między dwoma sąsiednimi znakami, tak aby pola między kolejnymi parami liter wyglądały optycznie podobnie. Odpowiedni kerning zapobiega zarówno zbyt ciasnemu, jak i zbyt luźnemu rozmieszczeniu znaków i poprawia czytelność. W składzie drukarskim kerning kontroluje projektant; w HTML i CSS jest zautomatyzowany i jego efektu nie da się z góry przewidzieć.

Jak ludzie czytają teksty w internecie?

Użytkownicy nie czytają stron internetowych słowo po słowie — skanują je wzrokiem w poszukiwaniu potrzebnych informacji. W kulturze zachodniej obowiązuje kierunek czytania od lewej do prawej (LTR), dlatego wyrównanie do lewej naturalnie wspiera ten ruch oczu.

Najważniejszym dowodem są badania okulograficzne (eye-tracking) opisane przez Nielsen Norman Group w artykule „F-Shaped Pattern For Reading Web Content” (badanie oryginalne, 16 kwietnia 2006) . Wizualizacje śledzenia wzroku pokazały, że użytkownicy często czytają strony w kształcie litery F: dwa poziome pasy u góry, a następnie pionowy ruch wzrokiem wzdłuż lewej krawędzi tekstu. Litera F oznacza tu „fast” — wzrok przemieszcza się po słowach bardzo szybko, według wzorca innego niż przy klasycznym czytaniu od deski do deski.

Wyrównanie do lewej daje czytelnikowi stały, równy punkt startu każdego wiersza po lewej stronie, co ułatwia takie skanowanie tekstu na stronach WWW. Wraz z popularnością łatwych w użyciu kreatorów stron rośnie liczba serwisów z kiepską typografią, w tym z podstawowym błędem formatowania, jakim jest justowanie całych bloków tekstu.

Dlaczego nie powinno się justować tekstów w internecie?

Głównym powodem jest pogorszenie czytelności. Wiele osób z niepełnosprawnościami poznawczymi ma trudność z czytaniem bloków tekstu wyjustowanych do obu marginesów. Problem dotyczy też osób pełnosprawnych: nierówne odstępy między wyrazami spowalniają czytanie i męczą wzrok. Justowanie obiecuje równomierne rozłożenie tekstu, ale w przeglądarce daje efekt odwrotny — tworzy problemy z czytelnością. Justowanie odbiera przy tym projektantowi kontrolę nad wyglądem tekstu, bo ostateczny rozkład odstępów zależy od przeglądarki i rozmiaru ekranu, a nie od projektu.

Tekst wyjustowany tworzy „korytarze” (ang. rivers of white )

Rozciągnięte odstępy między wyrazami układają się w pionowe lub ukośne pasma bieli biegnące przez akapit. Zjawisko to nazywa się „ korytarzami ” (inne nazwy: kanaliki, rzeki bieli). Korytarze rozpraszają wzrok i sprawiają, że tekst bywa trudny do odczytania, a niekiedy wręcz uniemożliwiają czytanie osobom z wadą wzroku lub dysleksją. Najprostszym sposobem ich uniknięcia jest rezygnacja z justowania i wyrównanie tekstu do lewej. Efekt „rzek bieli” oraz nierówne odstępy między słowami są zwykle wyraźniejsze na wąskich ekranach urządzeń mobilnych, gdzie w jednym wierszu mieści się mniej wyrazów, a ten sam akapit wygląda inaczej na różnych urządzeniach.

Ilustracja: porównanie tego samego akapitu wyrównanego do lewej (kolumna lewa) i wyjustowanego do obu krawędzi (kolumna prawa).

Efekt „rzek bieli” jest zwykle bardziej wyraźny na wąskich, mobilnych urządzeniach.

Przykłady wyrównywania tekstu online i kod CSS

Dla treści online najlepszym wyborem jest wyrównanie do lewej (text-align: left;), a justowania (text-align: justify;) lepiej unikać. Poniższe przykłady pokazują, jak poszczególne typy wyrównania zachowują się na stronie internetowej i jak ustawia się je w CSS.

Tekst wyrównany do lewego marginesu

To standard dla treści w internecie. W CSS ustawia się go właściwością text-align: left; na wybranym elemencie, na przykład akapicie. Prawa krawędź pozostaje postrzępiona, ale odstępy między wyrazami są równe, a czytanie najłatwiejsze.

Wyrównanie do lewej z automatycznym dzieleniem wyrazów (CSS)

Czasami do wyrównania do lewej dodaje się automatyczne dzielenie wyrazów: text-align: left; hyphens: auto; . Właściwość hyphens decyduje, kiedy słowa na końcu wiersza mogą zostać podzielone. Jest obsługiwana w większości przeglądarek, choć część z nich nadal renderuje ją niespójnie.

Tekst wyjustowany z automatycznym kerningiem (CSS)

Justowanie ustawia się w CSS właściwością text-align: justify; . Tej opcji nie zaleca się do treści online: w HTML i CSS kerning jest zautomatyzowany, a jego efektu nie da się przewidzieć. Wygląd zależy od rozmiaru elementu i zmienia się przy każdej zmianie szerokości okna przeglądarki, więc na różnych ekranach justowany tekst wygląda inaczej.

Tekst wyjustowany z kerningiem i dzieleniem wyrazów (CSS)

Można połączyć justowanie z dzieleniem wyrazów: text-align: justify; hyphens: auto; . Mimo to justowania nadal nie zaleca się — samo dzielenie wyrazów nie usuwa nierównych odstępów. Na urządzeniu mobilnym wyjustowany tekst bywa znacznie trudniejszy do odczytania, bo wąski ekran potęguje przerwy między wyrazami i zaburza płynność czytania.

Dodatkowym utrudnieniem jest odnajdywanie kolejnego wiersza tekstu. Gdy wiersze mają nierówną długość (są postrzępione), oku łatwiej trafić na początek następnej linii. Dotyczy to szczególnie czytelników z dysleksją.ą.

Dlaczego internet nie jest gotowy na wyjustowany tekst?

Przeglądarki nie mają narzędzi, które w druku pozwalają poprawnie justować tekst, dlatego justowanie tekstu może być problematyczne w sieci. Automatyczne dzielenie wyrazów w CSS jest możliwe mniej więcej od 2011 roku i jest dziś szeroko obsługiwane, ale samo nie wystarcza. Renderując justowany akapit, przeglądarka w praktyce tylko zwiększa odstępy między wyrazami, co prowadzi do nieprzyjemnych przerw — zwłaszcza gdy wiersz ma optymalną długość (orientacyjnie 45–75 znaków). Odstępów tych nie da się ręcznie dostosowywać tak jak w druku, a długość linii tekstu zmienia się wraz z szerokością okna.

Gdy tekst jest źle sformatowany, może to pogorszyć doświadczenie użytkownika (UX) i czytelność, a w konsekwencji obniżyć zaangażowanie i pośrednio zaszkodzić pozycjom w wyszukiwarkach. Aktualny stan obsługi można sprawdzić na stronie Can I use dla właściwości hyphens (dzielenie wyrazów) oraz font-kerning.

Dlaczego gazety i książki mają justowany tekst?

W druku justowanie wygląda dobrze, bo profesjonalny skład — w programach takich jak Adobe InDesign — pozwala ręcznie kontrolować dzielenie wyrazów i kerning, a rozmiar strony jest stały. To zasadnicza różnica wobec internetu: wydruku nie da się przeskalować, więc raz dopracowany układ pozostaje niezmienny, a efekt zwykle jest bardzo dobry. Justowanie stosuje się w mediach drukowanych, aby kolumny tekstu miały czysty, uporządkowany wygląd.

Coraz więcej współczesnych książek i czasopism stosuje jednak wyrównanie do lewej — między innymi z myślą o czytelności i dostępności oraz pod wpływem nawyków czytania w internecie. Spójność między światem drukowanym a online również ma znaczenie: odbiorca nie powinien napotykać zupełnie inaczej złożonych tekstów, przechodząc między tymi dwoma kanałami.

Przykłady różnych podejść do wyrównania tekstu w książkach.

Tradycyjna książka The Real Mad Man autorstwa Andrew Cracknela (Quercus, 2011).

Nowoczesna książka „Różne mózgi, różne podejścia” Huuba van Oscha (Bis Publishers, 2016).

Przykłady różnych podejść do wyrównania tekstu w gazetach.

Opcje tekstu justowanego, kerning i dzielenie wyrazów.

Tekst wyrównany do lewej strony.

Obydwa przykłady wyrównanego tekstu pochodzą z tej samej gazety, “Good Weekend” – wkładka weekendowa Sydney Morning Herald.

Jak justowanie wpływa na użytkowników lupy ekranowej?

Justowanie utrudnia korzystanie z lupy ekranowej, która powiększa obszar wokół kursora. Powiększane są wówczas także duże, nierówne odstępy między wyrazami, przez co trudniej śledzić ciąg słów. Zamiast płynnie podążać za tekstem o równych odstępach, użytkownik musi za każdym razem odnajdywać początek kolejnego wyrazu, a i tak już nadmierne przerwy stają się jeszcze bardziej widoczne po powiększeniu.

Czy justowanie tekstu wpływa na SEO?

Justowanie może pośrednio wpływać na SEO (optymalizację pod kątem wyszukiwarek). Jeśli treść jest trudna do czytania, użytkownicy rzadziej ją czytają i szybciej opuszczają stronę, co obniża wskaźniki zaangażowania, a te mogą przekładać się na pozycję w wynikach wyszukiwania. Taki układ tekstu sprawia, że użytkownicy szybciej opuszczają stronę — zwłaszcza na urządzeniach mobilnych, gdzie justowany tekst jest jeszcze mniej czytelny — co może negatywnie wpłynąć na zaangażowanie i konwersję.

Nie ma dowodów na to, że wyszukiwarki karzą justowanie bezpośrednio — wpływ jest pośredni, przez czytelność i zachowanie użytkowników. Z tego powodu na stronach WWW bezpieczniejszym wyborem jest wyrównanie tekstu do lewej strony w obrębie całej witryny.

Justowanie tekstu a standardy WCAG

Co to jest WCAG?

WCAG (Web Content Accessibility Guidelines, czyli Wytyczne dotyczące dostępności treści internetowych) to opracowany przez World Wide Web Consortium (W3C) punkt odniesienia dla dostępności stron internetowych. Stosowanie WCAG to najprostszy sposób, aby witryna była użyteczna dla wszystkich odbiorców, w tym osób z niepełnosprawnościami.

Co WCAG mówi o justowaniu tekstu?

Kryterium 1.4.8 Prezentacja wizualna (poziom AAA) wymaga, aby dla bloków tekstu dostępny był mechanizm zapewniający między innymi, że:

• użytkownik może wybrać kolory tła i pierwszego planu,
• szerokość bloku nie przekracza 80 znaków lub glifów (40 dla pisma CJK),
• tekst nie jest justowany (nie jest wyrównany jednocześnie do lewego i prawego marginesu),
• odstępy między wierszami wynoszą co najmniej 1,5, a odstępy między akapitami są co najmniej 1,5 raza większe niż między wierszami,
• rozmiar tekstu można powiększyć do 200% bez konieczności przewijania w poziomie.

Punkt trzeci jednoznacznie zaleca, aby nie justować tekstów w internecie. Nowoczesne projektowanie stron internetowych powinno opierać się na takich najlepszych praktykach, bo to one realnie poprawiają UX i dostępność. Warto dodać, że w wielu krajach strony i aplikacje organów sektora publicznego muszą spełniać standardy dostępności. W Unii Europejskiej od 22 grudnia 2016 r. obowiązuje dyrektywa (UE) 2016/2102 w sprawie dostępności stron internetowych i aplikacji mobilnych organów sektora publicznego, będąca konsekwencją art. 9 Konwencji ONZ o prawach osób niepełnosprawnych (UNCRPD).

Podsumowanie

Justowanie tekstu na stronie internetowej jest złą praktyką, ponieważ przy wielu rozmiarach i rozdzielczościach ekranów wyrównanie obustronne nigdy nie wygląda idealnie. W druku projektant ma pełną kontrolę nad efektem i wydruk wygląda zgodnie z projektem; w przeglądarce tej kontroli nie ma — to przeglądarka decyduje, jak rozłoży odstępy w justowanym akapicie. Choć justowanie bywa kuszące ze względów estetycznych, estetyka nie powinna wygrywać z czytelnością. Dlatego dla treści online rekomenduje się wyrównanie do lewej strony: jest czytelniejsze, zgodne z kierunkiem czytania LTR i z wytycznymi WCAG, a także lepiej sprawdza się na urządzeniach mobilnych.

Jesteśmy gotowi pomóc

Jeśli potrzebujesz pomocy ze swoją witryną WordPress lub marketingiem online, skontaktuj się z jednym z naszych specjalistów za pośrednictwem formularz kontaktowy.