Topografia i typografia strony internetowej

TYPOGRAFIA STRONY INTERNETOWEJ

Typografia w prehistorycznych czasach przed-internetowych oznaczała specjalną technikę druku wypukłego wykonanego na maszynach drukarskich z form zawierających materiał zecerski oraz klisze. W XXI wieku terminu tego używa się w odniesieniu do zagadnień związanych z projektowaniem i stosowaniem różnego rodzaju liter (czcionek i innych fontów). Typografia to również określenie układu graficznego strony i jednocześnie sztuka użytkowa zajmująca się estetyką szaty graficznej publikacji dowolnego rodzaju, czyli zarówno gazety jak i strony WWW.

Prawie każda osoba odwiedzająca stronę internetową jest także czytelnikiem reagującym całkowicie instynktownie na słowo pisane. Prawie, gdyż reguła ta nie dotyczy analfabetów i niewidomych.

Zastosowana czcionka (krój pisma), jej rodzaj i wielkość, mają istotne znaczenie przy projektowaniu strony. Wybór takiej a nie innej czcionki jest jednocześnie decyzją o przekazaniu określonych uczuć oraz tonu przekazu czy wypowiedzi. Określa też strukturę strony.

Przede wszystkim czytelność

O czytelności tekstu decyduje w głównej mierze krój i wielkość czcionki, ale także kontrast pomiędzy kolorem liter i podłoża, wielkość odstępów między literami, wyrazami i wierszami. Warto pamiętać, że ekran monitora ma rozdzielczość dużo mniejszą niż strona (kartka) drukowana i dlatego tekst o określonych parametrach, świetnie prezentujący się na papierze, może powodować spore trudności po przeniesieniu go na ekran.

Bezpieczny zestaw czcionek

W Internecie znaleźć można tysiące fantastycznych czcionek. Problem polega na tym, że o wyborze wyświetlanej czcionki decyduje nie autor tekstu czy projektant strony, ale przeglądarka oraz system operacyjny oglądającego. Czasem także on sam, jeśli zdecyduje się na zmianę ustawień domyślnych swojego oprogramowania. Lepiej używać czcionek instalowanych automatycznie w popularnych systemach operacyjnych i przeglądarkach. Wybierając czcionki nietypowe ryzykujesz, że przeglądarka wyświetli tekst czcionką domyślną, a to może pociągnąć za sobą efekty trudne do przewidzenia.

Więcej nie znaczy lepiej

Tekst na stronie internetowej to nie patchwork posklejany z dziesiątków rozmaitych elementów. To, że mamy 97 ciekawych czcionek nie oznacza, że należy ich wszystkich użyć. Nawet gdyby przeglądarki potrafiły wyświetlić je zgodnie z naszymi zamierzeniem, to tekst taki byłby co najmniej mało czytelny, a intencje autora trudne do odgadnięcia. Podobnie rzecz się ma z rozmiarami czcionek.

Czarne i białe

W niektórych przypadkach może to wyglądać bardzo atrakcyjnie, ale jednak na dłuższą metę tekst jasny na ciemnym tle czyta się gorzej niż ciemny na jasnym. Zwłaszcza gdy jest go większa ilość. Oczywiste jest, że projektując stronę internetową należy zadbać o właściwy kontrast kolorystyczny między podłożem (tłem), a tekstem. Popielate litery na szarym tle mogą sprawić czytelnikowi pewien problem. Jednak nie oznacza to, że zawsze należy dążyć do uzyskania maksymalnego kontrastu. Smoliście czarne litery na śnieżnobiałym tle bardzo męczą wzrok. A przecież wystarczy tylko kolor czarny zrobić odrobinę mniej czarnym albo biały trochę mniej białym. Czytelnik może nawet tego nie zauważyć, ale ostatecznie chodzi przecież o to, aby zmęczony wzrok odwracał od monitora i tekstu po dwóch godzinach, a nie po 7 minutach.

Wyrównywanie bloków tekstu

Akapity justowane, czyli wyrównane do obu boków okna przeglądarki, uważam za klasycznie "czyste" i eleganckie w sensie wizualnym. Niestety, osiągnięcie zadowalającego efektu jest mało realne, mimo projektowania bloków tekstu o stałej szerokości. Nawet teoretycznie te same czcionki wyświetlane będą w różnych systemach w nieco innych rozmiarach, a to burzy najdokładniej zaplanowany układ.

Centrowanie z kolei, jako sposób wyrównania tekstu, nadawać się może do tytułów. Czasem (rzadko) sprawdza się podczas prezentacji poezji. Stosowanie centrowania w przypadku zwykłego tekstu jest, delikatnie mówiąc, infantylne.

Na swoich stronach przyjąłem zasadę: jeden projekt - jedna czcionka. Ewentualnie druga lub trzecia jest wyjątkiem związanym z określoną potrzebą: banner tytułowy czy prezentacja kodu. Zwykle całkowicie wystarcza mi zestaw składający się z czcionek: Verdana, Tahoma, Arial, Helvetica, Courier New i Times New Roman (w systemie MacIntosh dwa ostatnie to Courier i Times). Nie przypominam też sobie, żebym kiedykolwiek, w ramach jednego projektu, zastosował więcej niż 4 rozmiary czcionek, a 5 uważam za absolutne maksimum.

W 95% przypadków ciemne teksty umieszczam na jasnym tle, choć to jasne bardzo rzadko jest absolutnie białe.

Poza bardzo rzadkimi wyjątkami nie używam kursywy czyli pisma pochylonego. W druku w efektowny sposób przypomina ono pismo ręczne, ale na ekranie monitora odbierane jest jako drżące i niepewne. Większe bloki tekstu pisanego kursywą są poza tym po prostu niewyraźne.

Prawie zawsze wybieram czcionki bezszeryfowe. Tekst pisany czcionką z szeryfami jest wprawdzie nieco bardziej dekoracyjny, ale za to wyraźnie mniej czytelny. Łatwo to sprawdzić przy ustawieniu domyślnej wielkości liter przeglądarki. Oczywiście tekst napisany Verdaną zajmie więcej miejsca niż przy zastosowaniu czcionki Times New Roman.

TOPOGRAFIA STRONY INTERNETOWEJ

Topografia to zespół cech określonej powierzchni wraz ze znajdującymi się na niej obiektami. Właściwe rozmieszczenie poszczególnych elementów strony, jest trudną sztuką. Jeszcze trudniejsza jest zdolność postrzegania bloku tekstu jako kształtu, który powinien harmonijnie łączyć się z innymi kształtami obecnymi na stronie - grafiką, zdjęciami, bannerami, nawigacją itd.

Odstępy aktywne i pasywne

Jeżeli projektujemy stronę o stałej szerokości 600px, wyrównaną do lewego boku okna przeglądarki, to przy standardowej rozdzielczości ekranu wynoszącej obecnie 1024x768, po prawej stronie będziemy mieli pustą, białą, niewykorzystaną przestrzeń. To jest właśnie odstęp pasywny. Nie służy niczemu. Jednak upychanie na stronie większej ilości elementów, a szczególnie tekstu, celem maksymalnego wykorzystania powierzchni, też nie jest dobrym pomysłem. Strona, a zwłaszcza bloki tekstu muszą "oddychać". Efekt ten uzyskuje się poprzez rozważne i celowe zaplanowanie wolnych przestrzeni pomiędzy określonymi elementami strony internetowej. To są odstępy aktywne.

Brak lub niedostatek odstępów aktywnych powoduje powstawanie efektu tzw. „przepełnienia strony”. Utrudnia to odnalezienie potrzebnych informacji oraz zmusza do większej koncentracji, bowiem wzrok czytelnika co chwilę zbacza na sąsiednie bloki tekstu.

Dość często „przepełnione” są strony, lub niektóre fragmenty stron, portalu Onet i Wirtualnej Polski. Zasada jest prosta: ograniczamy odstępy pasywne, mądrze planujemy odstępy aktywne.

Nawigacja - chaos kontra harmonia

Pionowe elementy nawigacyjne, linki do kolejnych stron serwisu (witryny) mogą wyglądać tak:

1. ********* ******* *********** ******* 2. ******** 3. **** ****** * *********** 4. *** 5. *************** ************** 7. ************

Można to jednak zrobić inaczej i osiągnąć efekt następujący:

1. ****** ******* ******** 2. **** ******* ********** 3. *********** ** ******** 4. ***** *** ************* 5. *** ** ***** *********** 6. ****** * **** ********** 7. *** *** *** ************

Albo na przykład taki, też całkiem niezły:

1. ****** ***** 2. ** **** **** 3. **** **** 4. *** ******* 5. *** ***** ** 6. **** ******** 7. ******* ******

Rzecz jasna w przypadku menu poziomego nie ma to aż takiego znaczenia, różnice nie rzucałyby się w oczy. Natomiast w menu pionowym pierwszy zestaw odbierany byłby jako chaotyczny, budzący niepokój, a nawet niechlujny i byle jaki. Postrzępione menu pionowe nie sprawia dobrego wrażenia, wymaga większej koncentracji i skupienia uwagi, a także dodatkowych ruchów myszą.

Bloki tekstu, odstępy aktywne i pasywne, nawigację, planujemy i edytujemy także wizualnie.