Przez długość wiersza rozumiem liczbę znaków w jednej linii tekstu. Przyjmuje się, że najwygodniejszy do czytania jest wiersz między 45 a 75 znaków, a za idealną liczbę uznaje się 66 znaków w wierszu (biorąc pod uwagę zarówno litery jak i znaki dodatkowe czy spacje). Wartość ta zmienia się odrobinę jeśli mówimy o layoutach wykorzystujących kilka kolumn. Wtedy wystarczy 40 do 50 znaków.

Dlaczego nie więcej? Dochodząc do końca linii tekstu musimy zapamiętać gdzie skończyliśmy, żeby móc znaleźć początek kolejnego wiersza. Jeśli początek od końca wiersza będzie dzielić zbyt długa droga, nasz wzrok pogubi się na kolejnych literach. Chyba każdy wie jak irytujące potrafi być uczucie kiedy zgubiliśmy linijkę tekstu, albo kiedy musimy palcem jeździć po książce, żeby wiedzieć co czytamy.

Mimo wszystko, z tą wartością można śmiało eksperymentować. Czytelnicy na pewno postrzegają tekst w różny sposób, a część z nich nie zgodziłaby się z proponowanymi przez typografów wartościami.

Dlaczego nie mniej chyba nie trzeba nawet mówić. Każdy zdaje sobie sprawę jak źle czytałoby się dwa lub trzy wyrazy w wierszu. I nie mówimy tu po poezji.

W CSS widzę trzy możliwości ustalenia długości wiersza. Najprościej oczywiście nadając odpowiednią długość kontenerowi, w którym zamykamy tekst.

p.kolumna1 { width: 465px; }

p.kolumna2 { width: 40%; }

p.kolumna3 { width: 33em; }

W druku ten element jest dość prosty. Twórca ustala sztywno wielkość tekstu i może dopasować do tego długość linii. Projektując dla urządzeń elektronicznych trzeba jednak mieć na uwadze to, że użytkownik sam może zmienić wielkość czcionki (a czasami zrobi to za niego urządzenie, na którym stronę przegląda).

W pierwszym przypadku długość wiersza będzie miała dokładnie 465 pikseli, co odpowiada mniej-więcej 66 znakom dla tekstu wielkości 14 pikseli. Oczywiście, w praktyce wszystko zależy od używanego fonta, więc trzeba do tego podchodzić indywidualnie i za każdym razem policzyć znaki. Co ważne – jeśli czytelnik zmieni tę wartość do 16 pikseli, zmniejszy się również ilość znaków w wierszu.

Logiczne wydaje się w takim razie zastosowanie wartości relatywnych. Używając procentów tak na prawdę oddajemy decyzję o długości wiersza w ręce użytkownika. Jeśli będzie chciał go zwiększyć, może zmaksymalizować okno przeglądarki. Jeśli uzna, że wolałby krótszy wers, może okno zmniejszyć. Krótka chwila na zastanowienie i dochodzimy do wniosku, że nikomu z nas nie chce się manipulować oknem przeglądarki dla pojedynczej strony, a użytkownicy urządzeń mobilnych nie mogą zmienić wielkości okna.

Wcześniej wspominałem już, że wielkości dotyczące tekstu najkorzystniej ustawiać z pomocą em. W trzecim przykładzie długość linii wynosi 33 em, czyli 462 piksele dla tekstu wielkości 14 pikseli, ale jeśli użytkownik zwiększy tę wielkość do np. 16 pikseli, długość linii również się zwiększy i będzie wynosić już 480 pikseli. Dzięki temu w wierszu ilość znaków zawsze pozostanie taka sama, niezależnie od ustawionej przez użytkownika wielkości tekstu.

No dobra, ale co z naszym layoutem, który przecież ma określone wymiary i w którym długi wiersz się nie zmieści? Idealny layout to taki, w którym taka sytuacja nie zajdzie, bo wszystkie wartości dostosowują się zarówno do wielkości tekstu jak i ekranu, na którym wyświetlana jest strona. W praktyce rzadko udaje się taki ideał osiągnąć, więc możemy po prostu ograniczyć maksymalną długość linii. Nie w każdym designie taka sztuczka się sprawdzi, bo nie w każdym jest miejsce na większą długość linii. W praktyce więc, najczęściej na sztywno ustala się długość linii, choć – jeśli tylko jest taka możliwość – powinniśmy używać rozwiązań dających większe możliwości adaptacji.

p.kolumna3 { width: 33em; max-width: 600px; }