Typografia

    Zasadniczym celem każdego projektu strony internetowej jest komunikacja. Bez względu na to, czy mówimy o internetowym sklepie, internetowej obecności firmy czy profilu strony jakiejś społeczności, w każdym z tych przypadków typografia jest decydującym składnikiem. Dla większości ludzi typografia jest po prostu układaniem znajomego zestawu kształtów, aby utworzyć wyrazy, zdania i akapity. Typografią więc nazywamy zasady stosowania i używania znaków pisarskich w druku oraz prezentacją ich na ekranie monitora komputerowego itp.

   Istnieje wiele przeszkód utrudniających skuteczne dostosowanie typografii do potrzeb Internetu, jednak siła czcionki powinna stanowić wystarczającą motywację do tego, by być nowatorskim. W telewizji czy w czasopismach można zobaczyć setki pomysłowych i efektywnych sposobów wykorzystania czcionek. Są one istotą tworzenia marki, kluczem do komunikacji za pomocą pisma i niezbędną częścią złożonego procesu, jakim jest projektowanie stron WWW.

Analiza kształtu liter

   Aby odkryć możliwości tkwiące w czcionce, należy najpierw ją zrozumieć. Trzeba przyznać, że nie jest to proste zadanie. Najdrobniejsze szczegóły kształtu liter i odstępów między nimi zostały dokładnie wyliczone podczas stuleci badań i praktyki. Z tego względu wybór fontów stosowanych w projektach stron WWW nie jest sprawą łatwą. W rzeczywistości większość decyzji, które muszą zostać podjęte podczas wyboru czcionki związana jest raczej z odstępami pomiędzy literami oraz blokami tekstu aniżeli z samą czcionką. Mimo wszystko wybór odpowiedniego kroju pisma jest również niezwykle istotnym krokiem.
   Aby dokładnie zrozumieć znaczenie i rodzaje czcionek należy poznać ich strukturę. Analiza kształtu liter jest podstawą do dalszego wgłębiania się w to zagadnienie. Rysunek 4 przedstawia charakterystykę struktury liter.

Budowa czcionki Podstawowa linia pisma (ang. baseline)

1. Podstawowa linia pisma (ang. baseline). Podstawowa linia pisma jest umowną poziomą linią, na której oparta jest większość znaków. Jedyny znak, który wysuwa się poniżej podstawowej linii pisma, to minuskułowa litera „q”.
   
2. Wysokość majuskuły (ang. cap height).Wysokość majuskuły (lub linia majuskuł) jest kolejną umowną linią. Wyznacza ona wysokość wszystkich majuskułowych liter w kroju czcionki. Wysokość majuskuły jest poniżej maksymalnej wysokości kroju pisma.
   
3. Poprzeczka (ang. crossbar). Kreska łącząca dwie linie w majuskułowych literach „A” i „H” nosi nazwę poprzeczki. Pozioma kreska, która nie łączy dwóch linii, jak ta w minuskułowych literach „f” oraz „t”, określana jest jako kreska krzyżowa.
   
4. Szeryf (ang. serif). Mianem szeryfu określa się końcowe kreseczki u dołu lub góry znaków niektórych krojów pisma.
   
5. Środkowa linia pisma (ang. meanline). Kolejną umowną linią poziomą, która wyznacza górną krawędź minuskułowych liter, jest środkowa linia pisma. Wbrew swojej nazwie linia środkowa nie jest umiejscowiona pomiędzy podstawową linią pisma a linią majuskuł.
   
6. Brzuszek (ang. bowl). Brzuszek litery to zaokrąglony łuk zamykający przestrzeń w rysunku litery. Przykłady brzuszków można zobaczyć w literach „D”, „o” oraz „g”.
   
7. Wydłużenie dolne (ang. descender). Dolna część minuskułowych liter „g”, „j”, „p”, „q”, i „y”, która wysuwa się poniżej podstawowej linii kroju pisma, jest określana jako wydłużenie dolne, Jedynymi innymi znakami, które zwykle wychodzą poza linię podstawową, są cyfry w niektórych krojach pisma. Uważano, że tego rodzaju cyfry, których przykłady z kroju Georgia ilustruje obrazek poniżej, lepiej łączą się z minuskułami cyfr rzymskich. Wyglądają one szczególnie dobrze, kiedy są użyte wewnątrz tekstu.
   
   
   

   Dawne cyfry w foncie Georga

8. Okienko (ang. counter). Przestrzeń wewnątrz litery określana jest jako okno. W niektórych literach, takich jak „A”, „o” czy „P” okno jest całkowicie zamknięte. Nie zamknięta przestrzeń w literach, takich jak „G”, „u” czy „c”, także jest nazywana oknem.
   
9. Trzon (ang. stem). Trzon to główna pionowa bądź ukośna kreska w literze. Są to więc pionowe elementy w literach „I” oraz „H”, jak również wszystkie kreski w literze „W”.
   
10. Znak diaktryczny (ang. tittle). Znak diaktrytyczny to nazwa kropki w minuskułowych literach „j” oraz „i”.
    
11. Zakończenie (ang. terminal). Końcówka trzonu lub kreski, która nie ma szeryfu, określana jest jako zakończenie. Nawet końcówki niektórych szeryfowych krojów pisma mają zakończenia, tak jak litera „c”.
    
12. Wydłużenie górne (ang. ascender). Górne krawędzie większości minuskułowych liter tworzą umowną linię znaną jako środkowa linia pisma. Niektóre minuskułowe litery posiadają wydłużenie górne, które jest ich przedłużeniem wysuwającym się ponad środkową linię. Owe litery to: „b”, „d”, „f”, „h”, „k”, „l” oraz „t”.
    
13. Noga (ang. leg). Niższe ukośne kreski widoczne w literach „K”, „R” oraz „Q” określa się jako nogi. Niekiedy mówi się o nich wstęgi.
    
14. Ligatura (ang. ligature). Litery „f” oraz „i” w słowie „fix” są w rzeczywistości połączone w jeden znak. Takie połączenie znaków określane jest jako ligatura. Ligatury stosuje się, aby nadać odstępom pomiędzy pewnymi znakami bardziej estetyczną równowagę.
    
15. Wysokość x (ang. x-height). Wysokość x jest dokładnie tym, na co wskazuje sama nazwa: wysokością minuskułowej litery x w kroju pisma. Zasadniczo wysokość x jest odległością pomiędzy podstawową linią pisma a środkową linią kroju czcionki.
    

   Kod informacyjny jest nośnikiem informacji o znakach przekazu, lecz określa tylko ich ogólną postać, a nie szczegółową postać graficzną. Nośnik informacji o kształcie znaków pisma jest niezbędnym uzupełnieniem kodu informacyjnego. Bez jego użycia tekst (czy szerzej: całej prezentacji) można przechowywać i przesyłać, ale do jego prezentacji za każdym razem niezbędne jest użycie pewnego konkretnego zestawu znaków graficznych - czyli pisma. W systemach cyfrowych informacja o zestawie znaków jest przechowywana za pośrednictwem fontu.
   Font jest to zestaw liter podobnego typu, są one zainstalowane fabrycznie na komputerze i można je zmieniać w zależności od indywidualnych potrzeb. Przeciętny komputer z Windowsem ma trochę powyżej 40 fontów domyślnie zainstalowanych, podczas gdy przeciętny użytkownika Macintosh ma dostęp do około 100 fontów. Wiele z tych fontów jest zebranych razem w rodziny fontów, w których każdy font jest inną odmianą fontu, od którego nazwę wzięła cała rodzina. Większość rodzin fontów zawiera regularny krój fontu razem z odmianami italic, bold oraz bold italic. Niektóre fonty nie mają w ogóle odmian, inne mogą mieć jedynie bold lub italic, a jeszcze inne komercyjne rodziny fontów mają setki odmian. Każda rodzina fontów ma swoje niepowtarzalne cechy rozpoznawcze. Te cechy charakterystyczne pozwalają zaklasyfikować fonty i rodziny fontów.

Wyróżniki kroju pisma

   Większość rodzin fontów może być podzielona na szeryfowe i bezszeryfowe. Oprócz tego podziału istnieje wiele innych sposobów klasyfikacji i grupowania fontów. Ja postaram się pokrótce scharakteryzować kilka z nich.

• Fonty szeryfowe;

   Historycy uważają, że szeryf bierze swój początek od rzymskich rytów w kamieniu. Kwestią sporną jest pierwotny cel tych ozdobnych kresek, ale w nie tak odległej historii udowodniono, że poprawiają one czytelność dużych bloków tekstu dzięki dostarczaniu poziomej linii odniesienia. Gdy jakiś projektant chce wybrać font szeryfowy, to w większości przypadków jako pierwszy przyjdzie mu na myśl Times New Roman. Wybór fontów szeryfowych jest jednak ogromny. Aby ułatwić sobie decyzję wyboru, dobrze jest najpierw określić, jaki styl chcemy nadać swojemu tekstowi.

Kategorie szeryfów

   Garamond jest fontem szeryfowym w starym stylu. Takie fonty zostały przyjęte od pociągnięć pędzlem charakterystycznych dla włoskich skrybów i mogą być rozpoznane zarówno na podstawie płynnych przejść pomiędzy grubymi i cienkimi kreskami, jak i dzięki zaokrąglonym krawędziom szeryfów. Fonty takie jak Garamond są niezwykle uniwersalne. Nie są tak staromodne, aby nie mogły być użyte we współczesnych aplikacjach, choć nie jest to ich mocną stroną.
   Drugi font to Baskerville, font szeryfowi przejściowy. Zaokrąglony kąt łączący zakończenie kreski z szeryfem jest określany jako nawias (ang. bracket). Nawiasy fontów szeryfowych przejściowych są zaokrąglone, ale krańce szeryfów są ucięte pod kątem prostym. Zwykłe dodanie kątów prostych i doskonale prostych linii nadaje tej kategorii fontów bardziej nowoczesny i techniczny styl. Ta kategoria fontów szeryfowych zwana jest przejściową, ponieważ stanowi etap przejściowy pomiędzy fontami szeryfowymi w starym stylu i współczesnym.
   Diot jest fontem szeryfowym współczesnym. Fonty szeryfowe współczesne dostarczają duży kontrast pomiędzy grubymi i cienkimi kreskami, a ich szeryfy są często całkowicie beznawiasowe. Fonty szeryfowe współczesne zostały wprowadzone podczas rewolucji przemysłowej jako radykalna alternatywa wobec stylu szeryfowego przejściowego. Obecnie te fonty kojarzą się z elegancją, wyrafinowaniem i modą, reprezentują one ponadczasowość. Fonty szeryfowe współczesne ze względu na swoje precyzyjne cienkie linie w rzeczywistości nadają się jedynie do wykorzystania w nagłówkach.
   W drugiej połowie XIX wieku, kiedy rozpowszechniły się reklamy, plakaty i ulotki, bardziej śmiała odmiana fontów szeryfowych współczesnych była potrzebna, aby zwrócić na siebie uwagę. Właśnie w tym czasie wprowadzono font szeryfowi belkowy. Kroje z szeryfami belkowymi, taki jak Rockwell, mają przemysłowy charakter pełen siły i hartu. Te kroje zostały zaprojektowane, aby były bardzo czytelne z odległości.

• Fonty bezszeryfowe;

    Chociaż szeryfowe fonty są nadal powszechnie stosowane, popularność i uniwersalność fontów bezszeryfowych wzrasta. Ten rodzaj fontów ma czystszy i bardziej współczesny wygląd. Wyróżnia się on w nagłówkach, zwłaszcza jeśli jest umieszczony w sąsiedztwie tekstu złożonego szeryfowym krojem. Jest to od długiego czasu powszechną praktyką w projektowaniu do druku. Jednak w Internecie jest odwrotnie, gdyż projektanci w tekście głównym używają bezszeryfowych fontów skontrastowanych z szeryfowymi fontami nagłówków. Zmiana w kierunku używania w Internecie bezszeryfowych fontów w tekście głównym spowodowana była głównie ograniczeniami starszych monitorów i matryc laptopów. Z biegiem lat jakość urządzeń wyświetlających obraz poprawiła się, jednak zmiany kreski i drobne szczegóły w fontach szeryfowych mogą sprawić, że stają, że stają się one niemalże nieczytelne przy małych rozmiarach na ekranach o niewielkiej rozdzielczości. Rozwiązaniem może być albo zwiększanie dla równowagi rozmiaru fontu, albo użycie bezszeryfowego fontu, który posiada mniej detali, przez co jest bardziej czytelne przy małych rozmiarach.
   Fonty bezszeryfowe bez względu na to, jak są używane, są niezwykle czytelne i praktyczne dla niemalże każdego celu. Najczęściej stosowanymi fontami bezszeryfowymi są Arial i Verdana. Każda z tych rodzin fontów przynależy do domyślnych zestawów fontów w obu głównych systemach operacyjnych, jednak w świecie projektowym mają one reputację nadużywanych i pospolitych. Z tego względu świetnie nadają się do tekstów głównych, gdzie bezstylowa czytelność jest celem, jednak w nagłówkach i artystycznych zastosowaniach często potrzebny jest bardziej niepowtarzalny charakter. Niekiedy sprawę załatwi wyraźniejszy font szeryfowy lub bardziej wyróżniający się font bezszeryfowy, ale z pewnością poza tymi dwiema kategoriami istnieje jeszcze wiele innych możliwości.

• Fonty odręczne;

   Przed wynalazkiem systemów ruchomych czcionek cały tekst musiał zostać wyryty, namalowany lub napisany odręcznie. Wadą pisma odręcznego jest to, że próba uzyskania jednakowego kształtu liter, wyrównania i odstępów jest sprawą niezwykle trudną. W wyniku tych wyzwań tekst napisany ręcznie może być trudny do odczytania. Jednak pismo odręczne ma tę wspaniałą cechę, że jest symbolem humanizmu i nadaje tekstowi konkretnym wymiar osobisty.

Fonty odręczne

   Kroje odręczne wprowadzają osobowość bez czynnika błędu ludzkiego. Litery i wyrównanie w foncie odręcznym są jednolite i jeśli font jest dobrze zaprojektowany, rozstawienie również powinno być dobre. Tak jak w przypadku innych fontów, nie można liczyć na to, że osoby odwiedzające stronę internetową będą miały zainstalowane wybrane przez autora fonty odręczne. Aby więc wykorzystać je w Internecie, należy przekształcić swój tekst odręczny na obrazki lub zastosować jakąś technikę zastępowania tekstu.

• Fonty nowatorskie;

   Fonty nowatorskie, znane również jako fonty ozdobne czy dekoracyjne, stanowią ogromną większość fontów, które są dostępne za darmo w Internecie. Niektóre fonty z tej kategorii, są zmodyfikowanymi wersjami popularnych fontów szeryfowych i bezszeryfowych, a inne są zupełnie niepowtarzalnymi pomysłami, które lepiej byłoby nazwać sztuką konceptualną niż krojem fontu. Te fonty ze swej natury są mniej czytelne aniżeli ich tradycyjne odpowiedniki, ale jeśli są stosowane oszczędnie, to mogą nadać projektowi ogromnie wiele osobowości i błysku.
   Fonty nowatorskie bardzo często tworzą dobre początkowe bloki dla projektu logo i dekoracyjnych elementów.

Fonty nowatorskie

• Fonty symboliczne (dingbaty);

   W początkach druku dingbaty były ozdobnymi znakami, które stosowano do oddzielania drukowanego tekstu i wypełniania światła. Pierwsze dingbaty składały się głównie z ozdobników i najczęściej używanych symboli. Jednak wraz z rewolucją fontów cyfrowych całkowicie zmieniła się idea fontów symbolicznych. Obecnie dowolny szereg elementów graficznych może zostać zdefiniowanych jako znaki w foncie symbolicznym.

Fonty symboliczne

   Chociaż te fonty mogą się nie wydawać godne uwagi z punktu widzenia składu, mogą okazać się przydatne jako wspomagające elementy graficzne i ikony. Ponieważ fonty składają się ze skalowanych wektorowych kształtów, można dowolnie zmieniać rozmiar glifów dingbatów bez utraty ich wyrazistości.
   W systemie Windows domyślnie zainstalowanymi dingbatami są Wingdings i Webdings – fonty symboliczne. W Internecie jednak dostępne są jednak setki innych fontów symbolicznych.

Wybór fontu do projektu

   Znając wszystkie techniczne aspekty kształtu liter i kategorii krojów pisma, jak również posiadając dostęp do wszystkich fontów na świecie, można nadal mieć spory problem z wyborem odpowiednich fontów. Wynika to stąd, że wyboru fontu dokonuje się w takim samym stopniu na podstawie kwestii technicznych, co również artystycznych walorów i subiektywnych skojarzeń.
   Na etapie obserwacji i doświadczeń związanych z projektowaniem stron internetowych można doszukać się kilku zasad, które mogą pomóc w wyborze właściwej czcionki dla witryny internetowej.
   Podstawową zasadą w wyborze fontów jest fakt aby nie wybierać ich zbyt wiele. Aby uniknąć chaosu na stronie internetowej dobrze jest zastosować nie więcej niż czterech fontów. Łączenie w jednym projekcie dwóch różnych fontów szeryfowych lub dwóch różnych fontów bezszeryfowych również może prowadzić do niepowodzenia.
   Ważnym kryterium wyboru czcionki jest dążenie do prostoty. Do prezentacji w niskich rozdzielczościach najlepiej nadają się litery o prostych kształtach. Fantazyjne czcionki nie sprawują się dobrze w sieci. Jest tak dlatego, że po pierwsze, czcionki dekoracyjne mogą zmniejszyć percepcję przekazu informacyjnego, a po drugie, o ile czcionki nie mają dużego rozmiaru bity finezyjnych szczegółów są tracone przy rozdzielczościach oferowanych przez monitory. Czcionki takie jak Galena, Silica czy Bliss, mające proste, a jednocześnie dystyngowane kształty znaków, świetnie się prezentują i są doskonale czytelne z ekranów monitorów.
   Faktem jest, że im większa jest czcionka tym więcej pikseli definiuje literę co przy skromnych rozdzielczościach monitorów ma istotne znaczenie dla wyglądu elektronicznych stron. Czcionka o rozmiarze 16 punktów będzie wyglądała korzystniej i będzie znacznie bardziej czytelna niż użyta w mniejszej wielkości. Duże czcionki typu  dekoracyjne nie tylko dodają dramaturgii sieciowym stronom ale również szybciej przyciągają uwagę. Litery wyglądają lepiej ponieważ jest więcej pikseli na uformowanie ich kształtu. Także czcionki cienkoliniowe o dużych rozmiarach pomagają w tworzeniu lepszej grafiki sieciowej. Czcionki takie jak Vellve, TF Forever, Showcard Gothic czy TF Ardent są naturalne dla banerów i nagłówków natomiast Alinea Sans, Alinea Roman czy Bookman są świetne jako czcionki do tekstów.
   W sieci istnieją również narzędzia umożliwiające dobór i testowanie czcionek bezpośrednio na stronie. Pod adresem http://www.typetester.org znajduje się serwis Typetester. Umożliwia on testowanie wyglądu tekstu pisanego różnymi czcionkami, wielkościami  i w różnych kolorach.W Internecie najlepiej pracują czcionki o bezszeryfowych kształtach - szczególnie w zwykłych tekstach. Na wydrukach papierowych szeryfy czcionek stanowią niewielki procent całej litery. Jednak na ekranie, z powodu niedostatecznej liczby dostępnych pikseli szeryfy uzyskują znacznie większy procent pokrycia. Może to powodować powstanie niepotrzebnego szumu dla procesu percepcji informacji.
   Dlatego najlepszymi czcionkami dla stron sieciowych i publikacji internetowych są czcionki bezszeryfowe (bardziej czytelne niż szeryfowe), w stylu pogrubionym (zapewniające większy poziom kontrastu), o zwężonej szerokości (gwarantujących większą liczbę słów w ograniczonej przestrzeni) – np. czcionki w rodzaju Helvetica Bold Condensed.
   Podsumowując powyższe zagadnienie zwiazane z typografi należało by wspomnieć, iż samo pisanie na potrzeby Internetu zdecydowanie różni się od pisania na potrzeby mediów drukowanych. Internet nie jest w żaden sposób linearny, nie ma w nim ciągłości stron. Internet jest hiperprzestrzenią, po której poruszanie się wymaga odpowiedniego przygotowania. Tekst w Internecie jest także przyswajany zupełnie inaczej.