Typografia w sieci, czyli rytm wertykalny i linia bazowa. Przetestuj na żywo

Byłem mocno zaskoczony popularnością pierwszego tekstu o typografii, więc postanowiłem się przyłożyć i pokazać wam jak działa - na żywo. W weekend napisałem proste narzędzie demonstrujące jak wygląda prawidłowo wyrównany tekst.

Inspiracją dla nazwy Gliphy była dyskusja na temat animowanych gifów, zakończona konkluzją, że dobrze iż nikt nie wpadł na pomysł animowanych glifów, czyli - w uproszczeniu - liter. Gliphy co prawda ich nie animuje, ale umożliwia przetestowanie różnych kombinacji fontu, jego wielkości, wysokości linii i kilku innych cech tekstu definowanego za pomocą CSS, oraz obejrzenie rezultatów na żywo. Ale link do zabawki, dopiero po odrobinie teorii. ;)

Podstawy

Jak pisałem ostatnim razem - tekst musi posiadać rytm. Nasz mózg lubi harmonię i wychwytuje - bez udziału naszej świadomości - prawidłowość rządzące jego kompozycją. Jeśli konsekwentnie trzymać się określonych proporcji tekstu i przestrzeni między nim, nasz mózg automatycznie wie gdzie szukać kolejnej linii. Czytanie jest wtedy prostsze i bardziej płynne.

Jednak osiągnięcie tego efektu w sieci nie jest tak proste jak mogłoby się wydawać.

Komponując typograficzny aspekt strony internetowej musimy przyjąć jakąś jednostkę, która będzie go wyznaczała. Wysokość linii w paragrafie tekstu, będąca wielokrotnością wielkości fontu sprawdza się tu idealnie. Najpopularniejsza wartością jest tu 1,5 wielkości fontu, ale sprawdzić może się wszystko od 1,3 do 3. Jeśli wysokości linii nagłówków, wielkości marginesów są równe wysokości linii, albo są jej wielokrotnością, to uczyniliśmy własnie pierwszy krok na drodze do dobrze skomponowanego tekstu.

Niestety, to za mało.

Przeglądarka umieszcza tekst po środku elementu. Tak więc jeśli wielkość fontu i linii nagłówków nie są wielokrotnością wielkości naszego podstawowego fontu i wysokości linii, albo dla nagłówków użyliśmy innej czcionki, to zbudowana właśnie harmonia idzie się "kochać". Każdy font posiada swoją linię bazową(eng. baseline) i to właśnie odległość między linią bazową kolejnych linii definiuje rytm, który chcemy uzyskać. Niestety, nie ma prostego sposobu by a pomocą CSS wyrównać tekst do linii bazowej.

Przykład: Gdy nasz podstawowy font ma 16px, a nasza podstawowa wielkość linii to 1,5 * 16 = 24px, to nawet używając dla nagłówków identycznego fontu, rytm zostanie rozbity. Nagłówek będzie miał - powiedzmy - wielkość 32px i nawet wysokość linii będącą wielokrotnością podstawowej - czyli 48px. Jednak font zostanie wyśrodkowany w pionie i odległość między jego linią bazową, a linią bazową pierwszej linii następującego po nim paragrafu nie będzie wielokrotnością naszej podstawowej jednostki - czyli wysokość linii w paragrafie.

Rozwiązanie

Niełatwo rozwiązać ten problem, ponieważ różnice między fontami oraz przeglądarkami powodują, że nie ma jednej matematycznej formuły. Pewnym rozwiązaniem jest korzystanie z frameworka Baseline.css, który koncentruje się właśnie na tym aspekcie budowy strony, ale to mocno ogranicza naszą kreatywność. Jedynym uniwersalnym rozwiązaniem jest ustawienie pozycji elementów takich jak nagłówki i paragrafy jako "position: relative" i ręczne wyrównanie elementów do siatki wyznaczanej przez linię bazową paragrafu za pomocą reguły "top: ?px".

Jak to działa i dlaczego warto bawić się w dopasowanie elementów typograficznych co do jednego piksela ( na ile IE pozwala ;) ) możecie sprawdzić z Gliphy, jednak po zabawie fontem jego wielkością i wysokością linii nie zapomnijcie tuningu linii bazowej.

Wykorzystane w projekcie fonty są dynamicznie ładowane z Google Web Fonts, więc chwilę może potrwać zanim wybrany font się załaduje. Można je wykorzystywać za darmo w swoich projektach, wiec życzę dobrej zabawy. Testowałem Gliphy w najnowszym Chrome, FF i IE, ale - bardzo - polecam pierwszą z wymienionych przeglądarek. Narzędzie będzie rozwijane, więc nie zapomnijcie kliknąć w zakładkę "O nas" i wysłać mi na maila uwag, pomysłów lub po prostu napisać "cześć", jeśli macie taką ochotę. ;)

ps. Różnej maści purystów z góry uprzedzam, że na wyjaśnianie relatywnych jednostek takich jak em, różnic między przeglądarkami, skali typograficznej, różnic między typografią "papierową", a sieciową itd. będzie jeszcze czas.