Typowe światło

Cykl „Typografia Typa”, część VI

Parę miesięcy temu porównałem gęstość pola elektromagnetycznego do rozprzestrzeniania się światła pisząc w artykule o wkraczającej technologii 5G. Ale tym razem będzie o innym świetle – zagadnienie światła w druku oraz o definiowaniu świateł międzyznakowych i międzywyrazowych.

Spójrzmy na jakąkolwiek zadrukowaną kartkę czy na gazetę. Zauważyć można, tak nieco filozoficznie, że kartka niezadrukowana jest biała, a zadrukowana jest… szara. Tak dokładnie jest, bo im mniejsza czcionka (font), tym kartka będzie coraz bardziej szara, aż w końcu zrobi się czarna.

W tekście światłem określa się pustą przestrzeń pomiędzy elementami kompozycji strony, co w typografii tworzą np. marginesy, odstępy między literami, między słowami, kształt liter i ich wielkość oraz styl, a także puste przestrzenie wewnątrz liter.

Ale czy musimy się przejmować światłem w składzie tekstu? Można śmiało stwierdzić, że nie jest to konieczne, bo po co się przemęczać. Uruchamiamy edytor i piszemy, a dalej jakoś to będzie. W końcu twórcy edytorów pomyśleli za nas i stworzyli różnorodne czcionki, byśmy je mogli swobodnie używać (obecna wersja Microsoft Word na starcie ustawia nam czcionkę Calibri w rozmiarze 11 punktów, z interlinią 1,15). Znaki zostały tak zaprojektowane, że zawierają w sobie informacje na temat odstępów międzyznakowych, a edytor sam czuwa nad odpowiednim złożeniem tekstu, by te odległości były zachowane.

Otóż nic mylnego. Chcąc stworzyć czytelny tekst lub witrynę internetową warto spróbować pobawić się definiowaniem świateł.

Światła w tekście

W każdym znaku (literze) ukryte jest światło wewnątrzliterowe, które zależy od grubości czcionki i od jej stylu (wąski font czy pochylony). Kolejnym jest światło międzyliterowe, czyli ilość wolnej przestrzeni między poszczególnymi znakami, a także jego otoczenie (pod i nad znakiem). Jeśli patrzymy na całą stronę, to kompozycja takiej strony określona jest światłem na stronie, czyli odstępami między różnorodnymi elementami strony np. tabelami, wyróżnieniami, wzorami, marginesami, nagłówkiem i stopką.

Do regulacji światła na stronie służy także kerning i tracking, który omówiony został w artykule „Typografia Typa”. Przypomnę tylko, że kerning określa odstęp pomiędzy wybranymi parami liter (np. WA, To, Vo), a tracking – pomiędzy wszystkimi literami w akapicie. Na powyższym rysunku w trzeciej linijce zastosowano tracking wynoszący 3 px, co spowodowało znaczne rozświetlenie wersu, przyjemniejsze dla oka.

Harmonia i kompromis

Niestety, ale dobrze złożony tekst, to nie lada sztuka, często polegająca na kompromisie. Przykładem może być wyrównywanie tekstu do prawej i lewej (popularnie zwane justowaniem), gdzie w oczywisty sposób następuje zaburzenie harmonii poprzez niekorzystną zmianę światła na stronie. Jeżeli nie zastosuje się dzielenia wyrazów, to tekst wygląda po prostu nieczytelnie, gdyż odstępy (światła) międzywyrazowe są niekiedy tak duże jak całe wyrazy. Natomiast jeśli zastosujemy automatyczne dzielenie wyrazów, konieczna może okazać się dodatkowa korekta. Generalnie nie zaleca się, by dzielenie występowało zbyt często (np. w trzech kolejnych wersach). Warto dodać, że w CSS automatyczne dzielenie wyrazów uzyskuje się poprzez właściwość hyphens: auto;.

Dlatego, wbrew wszelkim nowoczesnym i coraz bardziej popularnym zasadom, zaleca się stosowanie składu chorągiewkowego, czyli bez jednoczesnego wyrównania do prawej i lewej. Kompozycja taka charakteryzuje się jednym bokiem (zazwyczaj lewym) tworzącym linię pionową a drugim o linii nieregularnej. Należy przy tym rozważnie stosować tracking dla czcionek o małym rozmiarze (także dla minuskuł), ale można śmielej poeksperymentować z trackingiem dla większych czcionek (np. w nagłówkach) i przy wersalikach – inaczej mówiąc – można je rozświetlić. Dodatkowo dla określonego rozmiaru czcionki można zastosować większą interlinię.

W moim blogu w każdym artykule celowo zastosowałem wyrównanie do prawej i lewej, a także automatyczne dzielenie wyrazów (działa tylko w Firefox). Zastosowałem czcionkę Lora (rozmiar 16 px, wysokość linii 25 px, grubość 400, odstęp międzyakapitowy 15 px, odstęp międzyznakowy 0 px), która jest czcionką typu regularnego, szeryfową, dość szeroką, o średnim kontraście, z wyraźnymi ogonkami i znakami interpunkcyjnymi. Wygląda przyjaźnie i ciekawie zarówno w pochyleniu jak i pogrubieniu. Zawiera około 700 par kerningowych i jest zoptymalizowana do witryn internetowych, równocześnie nieźle prezentuje się w druku. Poniżej fragment arkusza stylów CSS:

font-family: 'Lora';
font-size: 16px;
line-height: 25px;
font-weight: 400;
letter-spacing: 0px;
color: #000000;
margin-bottom: 15px;
text-align: justify;
hyphens: auto;

Księga identyfikacji wizualnej

Przedstawiona powyżej wiedza wraz z innymi zasadami typografii i grafiki może posłużyć do stworzenia księgi identyfikacji wizualnej. W skład takiej księgi może wchodzić księga znaku, czyli standaryzacja unikalnego logo (znaku towarowego), jego opis, budowa, a także przykłady użycia (także błędnego) oraz wersje monochromatyczne, w szarościach, na różnych tłach i teksturach. Logo powinno posiadać również swoje światło, na które nie powinny wchodzić żadne inne elementy kompozycji.

Oprócz loga projektuje się logotyp, a na ich podstawie wizytówki, pieczątki i papier firmowy. W papierze firmowym ważne właśnie jest światło strony, czyli rozmieszczenie poszczególnych elementów takich jak logo, adres, stopka i treść. W treści takiego dokumentu oczywiście należy stosować czcionkę, którą wybrał projektant, w określonym stylu i wielkości, niestety często użytkownik pisząc tekst używa własnej ulubionej czcionki psując wygląd całości.

By zrozumieć ideę identyfikacji wizualnej najlepiej posłużyć się przykładem. Weźmy na tapetę Grupę PKP, w skład której wchodzi kilkanaście spółek, z których większość identyfikuje się wizualnie z grupą między innymi poprzez:

oznaczenie firmy, czyli logo i nazwa danego podmiotu,
kolorystyka oznaczeń,
symbole dekoracyjne,
pieczątki firmowe,
materiały marketingowe,
slogan reklamowy,
strona internetowa,
dress-code pracowników (ubiór, identyfikatory),
aranżacja siedziby i otoczenia firmy,
aranżacja stoisk targowych, konferencji, prezentacji,
wygląd produktów, opakowań, a także biletów, zasłon, foteli, wagonów, lokomotyw,
sposób prowadzenia rozmów telefonicznych i obsługi klienta.

Z pewnością sympatycy kolei od razu będą chcieli sprostować, że Intercity i Polregio znacznie odbiegają od wizualizacji Grupy PKP. Jak wiadomo jest to celowy zabieg zmieniający wizerunek firmy (ale czy na lepsze?).

Ciekawostki

Dla mnie od lat wzorem loga jest Coca-Cola. Nazwę i napis stylizowany na odręczny stworzył Frank Robinson (asystent twórcy napoju). Kluczem do ówczesnego sukcesu było zaakcentowanie dwóch liter C (pierwotnie do produkcji używano liści koki i owoców koli). Oficjalne logo Coca- Coli powstało w 1887 roku (123 lata temu!), a w literze C umieszczono wówczas informację o znaku towarowym.