Odstępy między wyrazami wydają się być często pomijanym aspektem przy tworzeniu stron internetowych. Powód jest dla mnie oczywisty – używaliśmy standardowych fontów, które wyglądają czytelnie nawet przy domyślnych ustawieniach. Niedawno zyskaliśmy możliwość osadzania dowolnych fontów na stronach, a niektórym z nich na pewno przyda się ustawienie odstępów międzywyrazowych.

Pytanie kiedy zadbać o odstępy i co zrobić, żeby nie przegiąć? Prawda jest taka, że w większości przypadków można śmiało nie dotykać tej wartości, ponieważ domyślna zapewni optymalną czytelność tekstu. Są jednak miejsca, w których zmniejszenie bądź zwiększenie odstępów między wyrazami może dać korzystny efekt. Myślę tutaj o fontach pogrubionych, o szerokich literach i dużych odstępach między znakami. Ogólna zasada jest taka – im większy tekst i im więcej pustej przestrzeni między znakami (ale również w samych znakach), tym więcej przestrzeni należy zostawić między kolejnymi słowami. Dzięki temu ułatwimy czytelnikowi znalezienie miejsca, w którym kończy się wyraz. Znaczenie ma również kolor tekstu i tła pod nim. Jeśli użyjemy w tle tekstury, która może miejscami mieszać się z tekstem (oczywiście nie powinniśmy, ale to toporny przykład, żeby pokazać zasadę), również warto zwiększyć odstępy.

Natomiast kiedy powinno się je zmniejszać i czy w ogóle ma to sens? Owszem, czasami ma. Pamiętajmy, że podstawą dobrej typografii jest dobra czytelność tekstu. Istnieją fonty, w których można ułatwić odbiór treści zmniejszając odstępy między wyrazami. W takich przypadkach warto zwrócić uwagę na to, czy przy czytaniu nasz wzrok nie musi skakać za daleko do kolejnego wyrazu. Jeśli złapiemy się na tym, że zamiast płynnie poruszać oczami, skaczemy od końca jednego słowa do początku następnego, może to być sygnał, że trzeba zmniejszyć odstępy.

Pamiętajmy jednak, że istnieje wiele metod czytania. Osoba, która czyta dużo najprawdopodobniej nie robi tego w sposób przedstawiony wyżej. Nie musi równomiernie płynąć wzrokiem po kolejnych literach. Zamiast tego ustawia wzrok na środku każdego z nich i stara się objąć wszystkie znaki. Wtedy również musi mieć możliwość zaczepienia początku i końca aktualnie czytanego wyrazu. Mówi się, że przy regularnych ćwiczeniach z czasem wyłapuje się już nie pojedyncze wyrazy, ale nawet kilka. Łatwo wyobrazić sobie jakim utrudnieniem byłoby takie czytanie, gdyby odstępy międzywyrazowe utrudniały rozpoznanie kolejnych słów.

Wszystko to wymaga oczywiście praktyki, a najczęściej wystarczy nam domyślnie proponowana wielkość. Przy eksperymentowaniu najlepiej zasięgać opinii jak największej ilości czytelników – każdy z nich na pewno czyta odrobinę inaczej.

W CSS do regulowania odstępów między wyrazami używa się właściwości word-spacing, która domyślnie ma wielkość około 0,25 em (choć w praktyce zależy to od obranego fontu).

p { word-spacing: 0.3em }

p { word-spacing: -0.3em }

W pierwszym przykładzie powiększyłem odstępy między wyrazami o 0,3 em, natomiast w drugim pomniejszyłem o tę samą wartość. Prawdą jest, że możemy korzystać tutaj nie tylko z emów, ale również z pikseli. Byłby to jednak błąd. Ustawione na sztywno wartości spowodowałyby, że przy powiększeniu rozmiaru tekstu o 10 pikseli przez użytkownika, odstępy między wyrazami pozostałyby cały czas takie, jakie ustawiliśmy dla czcionki o rozmiarze 12 piskeli. Wartości te muszą zmieniać się płynnie w zależności od rozmiaru tekstu.