Autor
23 czerwca 2014
   |   

Autor: Damian Lewandowicz

    DLewandowicz

Typografia w sieci

Podczas projektowania stron internetowych jednym z ciekawszych wyzwań jest typografia. W wielu aspektach zadanie to znacznie odbiega od opracowywania składu tekstu do druku.

Wiele zasad typograficznych trzeba poświęcić z braku technologicznych możliwości spełnienia ich. Wiele też zasad wymaga nieco innego spojrzenia. Miałem okazję opracować styl typograficzny dla strony internetowej Stowarzyszenia „Zielona Grupa” i zadanie to dało mi kilka przemyśleń związanych z tym tematem.

Czym wyróżnia się typografia w sieci?

Kilkoma aspektami. Po pierwsze, zachwiany zostaje tradycyjny pionowy rytm składu, określany zazwyczaj przez granicę stronicy, na której wydrukowany ma zostać tekst. Do tego dochodzi brak sensownej możliwości operowania światłem międzywyrazowym dla wyrównywania poziomu szarości kolumny oraz problem kerningu, który już na minimalną skalę rozwiązać daje się jedynie poprzez ingerencje w budowę kroju.Wymusza to nieco inne podejście do prób zbudowania harmonii składu zarówno w wymiarze pionowym jak i, siłą rzeczy, poziomym. Musimy zadowolić się mniejszym arsenałem opcji i zmiennych, głównie zaś szerokością łamu, wielkością kroju, interlinią i marginesami.

Po drugie, wybór fontu, poza standardowymi kryteriami, obwarowany jest także kwestią czytelności w przeglądarce. Niestety, ze względu na różne metody graficznej reprezentacji fontów w programach do przeglądania naszych stron, niektóre fonty wyglądają dobrze tylko w części z nich. Są wśród nich także takie, które choć mogą dobrze wypaść w druku, w ogóle nie radzą sobie w sieci. Jeśli zaś naszym oczekiwaniem jest mieć na stronie cyfry tekstowe zamiast wersalikowych, font, który chcemy zastosować, nie tylko musi posiadać te cyfry w swoim zestawie znaków, ale musi te cyfry mieć domyślnie. O ile bowiem w programie graficznym czy nawet biurowym istnieje możliwość wyboru pomiędzy zestawami znaków, CSS nie daje takiej możliwości. Oczywiście – zawsze zostaje opcja poprawy samego kroju.

Kilka zasad projektowania typografii

Być może największym błędem w typografii sieciowej jest traktowanie jej jako czystą sztukę, która może być projektowana sama dla siebie. Niestety, pełne graficznych wodotrysków efekty wykorzystywane w składzie rzadko spełniają najważniejsze zadanie typografii, czyli zachęcenie do czytania i usunięcie się w cień. Na szczęście bardzo wiele zasad typografii daje się bez problemu zastosować w sieci. Warto to robić, z pożytkiem zarówno dla czytelnika jak i samej strony. Dobre efekty można uzyskać już stosunkowo niewielkim nakładem zmian. Oto kilka punktów, które warto wziąć pod uwagę:

Cyfry tekstowe

Często dziś zapominane, warto jednak z przyczyn tak praktycznych jak i estetycznych wziąć pod uwagę zastosowanie kroju, który takie cyfry posiada, najlepiej jako domyślne. Dla strony stowarzyszenia wybrałem krój Alegreya, dostępny na Google Fonts. Krój ma kilka odmian grubości, wersję szeryfową, bezszeryfową oraz kapitalikową. Dopełniającym go krojem nagłówkowym jest Headland One, również wyposażony w cyfry tekstowe. Warto przy tym zwrócić uwagę na to, jak dany krój zachowuje się w mniejszych oraz większych rozmiarach – nie ma kroju doskonałego i warto dawać mu pole do popisu tam, gdzie czuje się najlepiej.

Nie tylko bold

Wykorzystanie kapitalików, inicjałów oraz kursywy w większym stopniu, pogrubień zaś w mniejszym. Pamiętając oczywiście o wpływach SEO, myślę, że warto gdzieniegdzie zostawić „boldowanie” w spokoju i sięgnąć po inne formy wyróżnienia fragmentu tekstu lub wstępów akapitowych. Pogrubienia stały się tak powszechne, że coraz mniej zwracamy na nie uwagi. Nie znaczy, to, że nie warto ich stosować! Warto jednak wspomóc je innymi typograficznymi środkami wyrazu.

Wyróżnianie akapitów jednym z dostępnych sposobów, w sposób spójny

Jako, że jest kilka metod wyróżniania akapitów – które wyróżniać trzeba dla ułatwienia nawigacji czytelnikowi – warto zdecydować się na jedną z nich i być w tym konsekwentnym. Można stosować wcięcia pierwszego wiersza (CSS posiada przeznaczony do tego celu zapis!), można stosować odstępy międzyakapitowe, można wreszcie stosować inicjały. Ale po co stosować więcej niż jedną z tych metod? I jeśli nie burzy to szarości kolumny, po cóż wyróżniać akapit bezpośrednio po nagłówku? Czytelnik nie jest ślepy, widzi że skończył się nagłówek a zaczyna akapit, bo zmieniła się odmiana lub wielkość kroju – nie ma więc potrzeby dalszego wyróżniania. Z podobnego powodu nie ma większego sensu specjalnie wyróżniać wypunktowań – czyż niniejsze punkty nie są dość widoczne, choć punktor znajduje się na marginesie?

Harmonia i rytm tekstu

Wymaga to ostrożności z uwagi na wiele nakładających się stylowo elementów strony. Gra jest jednak warta świeczki i rytmicznie zaplanowane części tekstu robią dużo lepsze wrażenie niż przypadkowo występujące światła w środku strony, które odciągają uwagę od rzeczy najważniejszej – treści. Warto przyjąć jedną jednostkę rytmu i dostosować do niej wszystkie światła międzyelementowe. Na stronie stowarzyszenia taką wartością jest 25 pikseli, która jest interlinią dla 18-pikselowego tekstu akapitowego i większość marginesów pionowych jest wielokrotnością tej właśnie wartości. Dzięki temu następowanie po sobie różnych elementów (jak akapity, cytaty, listy i nagłówki) zachowuje harmonię, która wciąga czytelnika w tekst. Oczywiście są sytuacje, w których przyjęty rytm trzeba złamać, o ile służy to całości składu. Takim przykładem mogą być akapity podrzędne złożone mniejszym krojem, gdzie interlinia 25 pikseli zaburzyłaby szarość tekstu.

Wykorzystanie w pełni PHP i CSS

To potężne narzędzia, warto więc wykorzystywać je w pełni. Nie należy bać się składu wielołamowego, jeśli ułatwia nam to właściwe ułożenie tekstu (np. w artykule ze zdjęciami albo marginesem na dodatkowe uwagi). To także dość elastyczne narzędzia, które mimo swoich ograniczeń, lubią zmiany. Coraz więcej jest też do dyspozycji nowych narzędzi, ułatwiających projektowanie typografii w sieci. Jednym z ciekawszych narzędzi jest Typecast, warto zapoznać się z jego możliwościami. Jako alternatywne źródło fontów, warto pamiętać o Google Fonts, gdzie powiększająca się baza krojów pozwala na wybranie całkiem niezłych fontów do sieci. Polecam też przejrzeć stronę webtypography.net, gdzie znajdziemy (niestety nieukończony) projekt dostosowania zasad typografii Roberta Bringhursta do realiów sieci właśnie.

Sztuka typografii

Powyżej wskazałem siłą rzeczy jedynie kilka wskazówek, sama problematyka typografii – tak w sieci jak i druku – jest bez żadnego porównania obszerniejsza. Ostatecznie, warto pamiętać, że typografia to ciągła podróż na granicy elastycznej pragmatyki oraz śmiałej estetyki. Sztuka typografii polega na wiecznym łączeniu obu elementów. Podróż ta ma pewne wytyczone szlaki, lecz ani pragmatyka ani estetyka nie twierdzą, że to jedyne drogi do celu. Jeśli uda się pójść inną i spełnić cel typografii, to czego chcieć więcej? Jeśli jednak zbaczamy z drogi nieświadomie albo nie wiemy dokąd zmierzamy – lepiej wrócić na przetarty szlak.

Darmowe wskazówki marketingowe

O mnie

Cześć, nazywam się Damian Lewandowicz.

Prowadzę agencję BrandUP! i staram się ułatwiać życie innym firmom pisząc o marketingu w sposób praktyczny i racjonalny. Dlaczego? Bo uważam, że rozsądny i skuteczny marketing jest dla każdej firmy. Tak, Twojej również.

Dowiedz się więcej...

Pin It on Pinterest