Typografia w sieci, czyli o tym co się (nie)zmieniło od czasu Geocities

Gdzieś znalazłem opinię, że jedną z najbardziej charakterystycznych cech typowego geeka jest podniecanie się najmniejszymi detalami i coś w tym zdecydowanie jest. Jednak to własnie detale, z pozoru pomijalne, decydują o tym, czy serwisy odwiedzane przez nas w sieci są czytelne i wizualnie atrakcyjne. Dlatego teraz, gdy zajmuję się m. in. ich budowaniem i często słyszę od klienta "zwiększmy ten nagłówek o kilka pikseli" dostaję białej gorączki.

Dlaczego? Od paru miesięcy gwałtownie uzupełniam wiedzę na temat typografii w sieci i chyba warto wyjaśnić kilka stojących za nią koncepcji i zmiany jakie zaszły w sieci przez ostatnią dekadę. Od czasów niesławnych Geocities, Comic Sans, przypadkowych kolorków i migających gifów web designerzy dostali do ręki narzędzia, dzięki którym gonią szybko elegancję drukowanych publikacji. Mimo to, poza geekami z A list apart mało kto zdaje sobie sprawę jak kompleksowy zadaniem jest ta część web designu.

Rytm

Z tekstem jest jak z muzyką, musi posiadać rytm. Nasz wzrok musi gładko prześlizgiwać się od litery do litery, od słowa do słowa, od linii do linii, do akapitu do akapitu. I od dziesiątków lat, funkcjonują zasady definiujące jak to osiągnąć. Zmienił się oczywiście nasz sposób konsumpcji treści w sieci, czy preferowana długość tekstowych materiałów, ale szlifowane od czasów Jana Gutenberga reguły nie ewoluują tak szybko.

Dodatkowo, wiemy więcej o funkcjonowaniu naszego poczucia estetyki i naukowcy potwierdzają to co wiedzieli już starożytni - intuicyjnie wyczuwamy matematyczną harmonię w ty co oglądamy. Oznacza to m. in. że wszystkie elementy strony internetowej są od siebie zależne. To nie jest przypadkowe dobieranie liczb - aż wygląda "fajnie" tylko spójna koncepcja.

Tu znajdziecie ładną ilustrację demonstrującą zależności między wysokością linii, wielkością fontu tekstu i nagłówków, marginesami poszczególnych elementów, a dodatkowymi elementami strony. Nie widać na niej przypadkowości, charakterystycznej dla wielu stron internetowych - estetyka i wygoda czytania została tu oparta na twardych zasadach.

Richard Rutter napisał w 2006 na swoim blogu.

Skomponowanie rytmu wertykalnego pomaga zaangażować i poprowadzić użytkownika w dół strony, ale wymaga to typograficznej dyscypliny. Może wyglądać, że wymaga to sporej ilości upierdliwych obliczeń (jednak kilka mnożeń i dzieleń jeszcze nikomu nie zaszkodziło), ale dobra typografia to właśnie kwestia liczb i dbałość o detale jest kluczem do sukcesu.

Nie czuję się na siłach zgrywać tu autorytet, gdyż sam dopiero zgłębiam się w ten świat - ale mam tu konkretny przekaz:

• Szerokość kolumny - to nie tylko kwestia klocków z których składa się stronę. To również w połączeniu z wielkością członki definiuje ile znaków znajdzie się w linii. Czy czytelnik będzie w stanie wygodnie śledzić ją do końca.
• Od wielkości fontu, zależy też wysokość linii. Od czego zależy, czy czytelnik będzie w stanie wygodnie przejść do następnej.
• Od obu wartości, zależą wielkości wszystkich nagłówków, które również powinny się wpisywać w ciąg matematycznych zależności między elementami.
• Wszystkie poboczne elementy strony, powinny być spójne z samym tekstem. A nie stanowić zupełnie oddzielny ciąg, jakby wycięty z zupełnie innej strony.
• I ostatecznie: każda zmiana na zasadzie "a tu zmieńmy o parę pikseli", to albo rozbijanie tego ciągu zależności, albo przepisywanie całego typograficznego aspektu strony od podstaw. 

I następnego klienta z takimi pomysłami chyba pogryzę. :) W tym tekście ledwo zarysowałem temat, który mnie teraz fascynuje i zasygnalizowałem problem. Ale jeśli czytelnicy Antyweb uznają go za interesujący, to z chęcią pociągnę go dalej - dzieląc się ty czego sam się teraz uczę.

Do poczytania: 

• http://collegiumpapricum.com/2010/03/typografia-na-stronach-internetowych/
• http://www.alistapart.com/articles/settingtypeontheweb
• http://webtypography.net/sxsw2007/webtypography-sxsw2007-notes.pdf
• http://webtypography.net/toc/
• http://blogs.claritycon.com/design/2011/08/14/design-for-software-typography-part-1/