Fonty dla webmastera

W artykule przedstawiono zagadnienia związane z estetyką tekstów ciągłych wyświetlanych na ekranie monitora, ze szczególnym uwzględnieniem problematyki przeglądarek internetowych.

Różne zastosowania – różne kroje pisma

Teskty ciągłe wyświetlane na ekranie monitora mogą mieć różnorakie przeznaczenie:

1. Teksty przygotowywane do druku (wydruku). Mogą to być teksty edytowane w systemach do składu czy procesorach tekstu. Podejmując decyzję o wyborze fontu w takich zastosowaniach nie należy się kierować wyglądem ekranowym, priorytetem jest tu wygląd na papierze. Im lepszy hinting mają używane fonty tym lepiej prezentują się one na ekranie. Więcej na temat hintingu w dalszej części artykułu.

2. Teksty przeznaczone do czytania na ekranie monitora. Są to przede wszystkim teksty czytane w przeglądarkach internetowych, ale też na przykład teksty w prezentacjach mulimedialnych. Fonty używane w takich zastosowaniach powinny być specjalnie zaprojektowane do swojej funkcji. Powinny posiadać pewne cechy, które sprawiają, iż dobrze się je czyta na ekranie monitora. Cechy te zostały omówione w dalszej części artykułu.

3. Teksty przeznaczone do czytania na ekranie monitora, które mogą także zostać wydrukowane. Mogą to być wszelkiego rodzaju publikacje elektroniczne: książki, dokumentacje itp. Dość rozsądnym kompromisem w takich zastosowaniach wydaje się użycie fontu, który został zaprojektowany dla medium papierowego, ale który jednocześnie dobrze zachowuje się na ekranie monitora. Font taki musi posiadać najwyższej jakości hinting.

Cechy krojów pisma do zastosowań ekranowych

Podstawowy problem, jaki należy rozwiązać przy wyświetlaniu tekstów na ekranie to bardzo niska rozdzielczość monitora. O ile przy wydrukach z drukarek laserowych operuje się rozdzielczościami z zakresu 600-1200 dpi, przy druku książek rozdzielczościami 1200-2400 dpi, o tyle typowa rozdzielczość ekranowa to 72-96 dpi. Dla małych stopni pisma dysponuje się zatem niewielką ilością pikseli do oddania kształtu znaków.

Przykładowe litery kroju Georgia w stopniu 10 punktów zrastrowane w rozdzielczości 1200 i 85 dpi (w powiększeniu)

Kroje do zastosowań ekranowych powinny posiadać pewne cechy, które minimalizują skutki tego ograniczenia.

1. Krój o jak najprostrzych kształtach znaków. Im bardziej skomplikowany kształt, tym gorzej wygląda on po zrastrowaniu do niskiej rozdzielczości, gdyż nie daje się przenieść zbyt dużej ilości informacji. W szczególności duże przekłamania występują dla krojów szeryfowych. Szeryfy to często bardzo delikatne i wycyzelowane elementy znaków, stanowiące ich niewielką część. Gdy litera jest zamieniana na piksele, szeryf staje się stosunkowo dużym jej składnikiem (szczególnie dla małych stopni pisma), zakłócającym harmonię znaku, a przez to zmniejszającym czytelność tekstu.

Degeneracja kształtów szeryfów na przykładzie kroju Monotype Garamond

2. Krój o dużym stosunku wysokości minuskuł do wysokości majuskuł. Im stosunek ten jest większy, tym więcej pikseli jest do dyspozycji dla zrealizowania litery minuskułowej (a stanowią one większą część tekstu ciągłego). Stosunek ten nie może być jednak zbyt duży, dłuższy tekst może być mniej czytelny przez zbicie sąsiednich wierszy. W przeglądarkach internetowych istnieje ograniczona kontrola nad interlinią (chyba, że stosuje się CSS), więc kompensacja tego efektu jest kłopotliwa.

Stosunek wysokości majuskuł do minuskuł w krojach Verdana, Times New Roman i Gill Sans

3. Krój o odpowiednio dużych odległościach międzyliterowych. Litery wyświetlane na ekranie monitora nie powinny się stykać ze sobą w żadnej sytuacji (nawet dla bardzo małych wielkości). Oczywiście odległości międzyliterowe nie powinny być zbyt duże - nie mogą zakłócać czytelności odległości międzywyrazowych.

Wpływ odległości międzyliterowych na czytelność tekstu na przykładzie fontów z krojami Verdana i Century Gothic

4. Font o najwyższej jakości hintingu. Jedynie mechanizm hintingu zaimplementowany w fontach TrueType pozwala na bardzo dokładną kontrolę nad sposobem przekładania krzywych na piksele (z dokładnością do pojedynczego piksela). Nie można tego powiedzieć o fontach zapisanych w formacie Type1, gdzie mechanizmy hintingu są o wiele uboższe.

Porównanie hintingu w fontach TrueType i Type1 (Century725 BT)

Kodowanie hintingu jest procesem niezwykle złożonym i długotrwałym, wymaga pracy hintera o najwyższych kwalifikacjach. Z tego względu w tanich fontach czy fontach darmowych hinting jest bardzo niskiej jakości.

Hinting w darmowym foncie z krojem Angostura

Problemy odmian krojów

Pogrubienie kroju wyświetlanego na ekranie monitora w małych wielkościach wymaga dużego skoku w grubości znaków. Jeśli na przykład pionowa kreska litery >mź w odmianie normalnej ma grubość jednego piksela, to pogrubiona wersja musi mieć już grubość dwóch pikseli, co jest bardzo dużym przyrostem. Dodatkowym problemem jest możliwość wypełniania się małych zamkniętych obszarów w rysunku liter.

Zalewanie małych zamkniętych obszarów w odmianach pogrubionych (Comic Sans MS)

Pochylone wersje krojów źle wyglądają na ekranach monitorów. Problem polega na tym, iż pionowe kreski w wersjach pochylonych stają się schodkowane, co bardzo zmniejsza czytelność tekstu. O ile krótkie wyróżnienia pochyłą odmianą kroju są do przyjęcia, o tyle dłuższy tekst praktycznie nie daje się czytać.

Przykładowy tekst złożony Verdaną w odmianie pochylonej

Późna rewolucja

Bardzo długo nie istniały kroje pisma zaprojektowane specjalnie do oglądania na ekranie mintora. Przez długie lata królowały kroje Times (New) Roman i Arial. Wprawdzie fonty z tymi krojami posiadają doskonały hinting, ale zupełnie nie sprawdzają się one w zastosowaniach ekranowych. Times (New) Roman został zaprojektowany jeszcze w latach trzydziestych (pod nadzorem Stanleya Morisona) dla zupełnie innego medium - dla potrzeb gazety Times (stąd nazwa). Krój ten (w mojej ocenie) nie posiada żadnej osobowości, jest mdły i nijaki. Swoje zrobiła też jego popularność, jest on po prostu wszechobecny. Równie popularny i równie bezosobowy jest Arial, krój zaprojektowany w 1982 roku przez Robina Nicholasa i Patricię Saunders.

Sytuację zmienił dopiero projekt firmy Microsoft. Firma ta zleciła zaprojektowanie krojów, które mogłyby być powszechnie używane w przeglądarkach internetowych. Głównym celem stała się - co zrozumiałe - jak najlepsza czytelność na ekranie monitora. Najbardziej spektakularnym efektem projektu Microsoftu stały się kroje Verdana, Georgia i Trebuchet.

W przypadku wymienionych krojów odwrócono proces projektowania. Najpierw stworzono bitmapy. Pozbyto się podstawowego ograniczenia – nie trzeba było dopasowywać pikseli do już istniejących obwiedni wektorowych. Możliwe stało się zaprojektowania wyglądu znaków w kluczowych wielkościach z dokładnością do każdego piksela. Dopiero na końcu obrysowano kontury krzywymi matematycznymi. Dało to rewelacyjne rezultaty.

Verdana. Verdana posiada wszystkie cechy wymienione wcześniej jako pożądane dla krojów ekranowych. Priorytetem w przypadku Verdany było jej zastosowanie, ucierpiała troche na tym jej osobowość. Jest typowym koniem pociągowym - jest w miarę przeźroczysta, dobrze sprawdza się w każdych okolicznościach, w każdym kontekście.

Przykładowy tekst złożony Verdaną

Georgia. Georgia jest jednym z niewielu wyjątków wśród krojów szeryfowych, doskonale czytelnych na ekranie.

Przykładowy tekst złożony Georgią

Trebuchet. Nietrudno zauważyć pewne podobieństwa Trebucheta do Verdany. Jest to jednak krój bardziej charakterystyczny, a przez to nadający tekstowi pewien rys.

Przykładowy tekst złożony Trebuchetem

Używanie niestandardowych fontów

Możliwość użycia konkretnego fontu do wyświetlania tekstów ciągłych w przeglądarkach internetowych ogranicza to, czy dany font jest zainstalowany w systemie operacyjnym, w którym działa docelowa przeglądarka.

Verdana, Georgia i Trebuchet są załączane do Internet Explorera w wersji 4.0 i wersji późniejszych, sama Verdana do Windows 98 i wersji późniejszych (jakie fonty są dołączne do poszczególnych produktów Microsoftu można sprawdzić na stronie http://www.microsoft.com/typography/fonts/ default.asp). Mając na uwadze popularność Internet Explorera i systemu Windows, istnieją duże szanse, że przynajmniej Verdana jest zaintalowana w docelowym systemie operacyjnym . A ponieważ HTML pozwala na definiowanie kolejności szukania fontów do wyświetlania tekstów (na przykład w postaci: font face=Verdana, Arial, Helvetica, sans-serif), nic nie stoi na przeszkodzie, aby chociaż próbować użycia doskonłych fontów zaprojektowanych dla Microsoftu.

Co jednak zrobić, gdy trzeba użyć zupełnie niestadardowych fontów, które na pewno nie są zaistalowane w docelowym systemie operacyjnym? Istnieją co najmniej dwa sposoby na ominięcie tego ograniczenia.

Sposób pierwszy. Użycie bitmapy. Rozwiązanie to posiada jednak pewne wady. Po pierwsze, bitmapa ma dużo większą objętość, niż ten sam tekst przeznaczony do wyświetlenia przez przeglądarkę bezpośrednio. Po drugie, w większość tesktów w małych wielkościach wymaga antyaliasingu. A programy, w których najczęściej rastrowane są teksty (Photoshop, ImageReady, Fireworks), dla małych wielkości robią to dość nieumiejętnie. Rozmywają one niepotrzebnie pionowe lub poziome linie oraz znacznie rozmywają szeryfy, co bardzo zmniejsza czytelność dłuższych tekstów. Lepszy mechanizm antyaliasingu (rozmywania) został zastosowany bezpośrednio w systemach operacyjnych rodziny Windows, gdzie opisana niedogodność jest wyeliminowana.

Porównanie różnych metod antyaliasingu (dwukrotne powiększenie). W kolejności czytania: bez antyaliasingu, Windows 98, Windows 2000, Photoshop (opcja crisp)

W systemie Windows 95 antyaliasing tekstów wyświetlanych na ekranie jest dostępny po zainstalowaniu pakietu Plus!, lub po zainstalowaniu małego programu, dostępnego na witrynie Microsoftu. W Windows 98 jest to już integralna część systemu (Panel sterowania | Ekran | Efekty | Wygładzaj krawędzie czcionek ekranowych). Jakościowo najlepszy antyaliasing znajduje się w sytemach Windows NT 4/2000, gdzie rozmywanie jest dokonywane przy użyciu 16 pośrednich stopni (podczas gdy w Windows 95/98 są to 4 stopnie).

Photoshop i ImageReady mają kłopoty z prawidłowymi odległościami międzyliterowymi. Wiąże się to z tym, iż aplikacje te używają własnych (a nie systemowych) bibliotek do obsługi fontów. Skutkiem tego są nie zawsze dobre odległości międzyliterowe, co jest szczególnie widoczne dla małych stopni pisma. Natomiast Fireworks (po wyłączeniu opcji Auto Kerning) rastruje fonty tak samo jak rasteryzator systemowy.

Porównanie odległości międzyliterowych dla rasteryzatora systemu Widows i programu Photoshop (z wyłączonymi opcjami Auto Kerning i Fractional Widths)

Przy tworzeniu bitmapy celowe wydaje się więc (kiedy jest to możliwe) generowanie tekstów przy użyciu rasteryzatora sytemowego i zrobienie zrzutu z ekranu. Daje to lepszy rezultat niż rastrowanie tekstów w programach graficznych.

Sposb drugi. Dołączenie fontów do witryny. Istnieją systemy pozwalające na użycie dowolnego fontu w tworzonej witrynie, a następnie wysłanie go razem ze ściąganą witryną (WEFT firmy Microsoft czy TrueDoc firmy Bitstream). Jest to sposób także zwiększający znacznie objętość witryny, szczególnie gdy wykorzystywanych jest kilka fontów.

Różne fonty do zastostowań ekranowych

Kilka firm doceniło nośność nowego medium i zaczęło projektować fonty do zastosowań ekranowych. W większości przypadków są to przeróbki od lat istniejących krojów, lepiej lub gorzej dostosowane do nowych potrzeb. Dlatego wybierając taki a nie inny font należy brać pod uwagę wszystkie aspekty przydatności fontów do zastosowań ekranowych wymienione we wcześniejszej części artykułu.

1. Microsoft Web Core Fonts (http://www.microsoft.com/ typography). Oprócz Verdany, Georgii i Trebucheta na witrynie Microsoftu umieszczono kilka innych fontów do zastosowań internetowych. Wszystkie fonty posiadają polskie znaki diakrytyczne. Są to fonty darmowe. [Ostatnio firma Microsoft wycofała się z projektu i fonty te nie są już dostępne do ściągnięcia].

Przykładowe fonty z pakietu Web Core Fonts

2. Adobe WebType (http://www.adobe.com/type). Jest to zestaw 12 fontów różnych kategorii (kroje dekoracyjne, pisanki i kroje tekstowe), przystosowanych do zastosowań ekranowych. Są to fonty komercyjne. Fonty te posiadają polskie znaki diakrytyczne. Minion Web jest dostępny bezpłatnie, jest bowiem składnikiem uaktualnień Service Pack 1 i Service Pack 2 do Internet Explorera 4.0. Font ten jest częścią pakietu możliwego do ściągnięcia spod adresu ftp://ftp.download.com/pub/explorer/ 39/ie4site/EN/FONTSUP.CAB.

Przykładowe fonty z pakietu WebType. Źródło: www.adobe.com

3. Agfa Monotype ESQ Fonts (http://www.agfamonotype.com/ newmedia/index.html). Duży i stale rozbudowywany zestaw fontów bardzo starannie pohintowanych. Są to fonty komercyjne. Fonty są dostępne z polskimi znakami diakrytycznymi.

Przykładowe fonty ESQ. Źródło: www.agfamonotype.com

Podsumowanie – nowa typografia

W tradycyjnej typografii istnieją kroje wyspecjalizowane, projektowane do zastosowań, w których powinny być używane – w gazetach, w książkach, na znakach drogowych itp. Kroje ekranowe można potraktować jako kolejne rozszerzenie specjalizacji – oto pojawiły się kroje do zastosowań ekranowych. Ale w typografii ekranowej należy brać pod uwagę czynnik, który w typografii papierowej nie miał aż tak dużego znaczenia. Oprócz wyboru właściwego kroju (na podstawie przydatności takiego a nie innego kształtu znaków do zakładanego celu i ograniczeń medium), równie ważny jest wybór fontu (a więc nośnika). Bardzo duże znacznie (czasami decydujące) ma bowiem jakość hintingu zakodowanego w danym foncie.

Większość tekstów ciągłych w typografii papierowej jest składana krojami szeryfowymi. Wynika to z dwóch przesłanek. Po pierwsze, powszechny jest pogląd, iż kroje szeryfowe są czytelniejsze niż kroje bezszeryfowe (choć teza ta jest często podważana). Po drugie, przeciętny czytelnik w wiekszości przypadków spodziewa się w tekście ciągłym właśnie kroju szeryfowego. Wyjątkami są teksty o charakterze technicznym, katalogi, prospekty, informatory itp. Obie te przesłanki nie przekładają się bezpośrednio na typografię ekranową. W przypadku czytelności sytuacja jest odwrotna: przeważnie czytelniejsze są kroje bezszeryfowe. Jeśli o chodzi o treść tekstu, to często trudno jest mówić o preferencjach, bo na przykład witryny internetowe są zupełnie nowym polem przekazu typograficznego. Natomiast w sytuacjach, gdy wersja ekranowa danego tekstu ma (może mieć) odpowiednik w wersji papierowej i tam należałoby użyć kroju szeryfowego, to rodzaju kroju raczej nie powinno się zmieniać. Przy podejmowaniu decyzji należy dokonać następującego wyboru: czy ważniejsza jest lepsza czytelność tekstu wynikająca z użycia kroju bezszeryfowego, czy ważniejsze jest poczucie komfortu związanego z napotkaniem przez czytającego preferowanego kroju szeryfowego. O ile bowiem łatwo sobie wyobrazić elektroniczną instukcję do programu czy witrynę internetową o telefonach komórkowych złożone krojem bezszeryfowym, o tyle elektroniczna wersja »Ogniem i mieczem« złożona takim krojem jest chyba nie do przyjęcia.

Dobór odpowiedniego kroju (w przypadku typografii ekranowej – także fontu) jest zawsze wyborem trudnym. Jest to jednak wybór niezwykle istotny. Zastosowanie nieodpowiedniego kroju czy fontu może przesądzić o tym, czy dany tekst zostanie przeczytany czy nie. Jeśli podczas czytania będzie narastało zmęcznie wynikające ze złej czytelności tekstu, to może nastąpić najgorszy z możliwych scenariuszy – czytanie zostanie przerwane.

Słowniczek

Antyaliasing (wygładzanie). Mechanizm wygładzający krawędzie obiektów w obrazach bitmapowych. Wygładzanie odbywa się najczęściej przez odpowiednie modyfikacje pikseli (wprowadzanie pikseli o mniejszym nasyceniu i jasności niż piksele obiektu).

Font. Nośnik pisma, w którym informacje o kształcie znaków pisma są zakodowane w postaci cyfrowej i zapisane w pliku/plikach. W szczególności kształty znaków pisma mogą być zdefiniowane przy wykorzystaniu krzywych matematematycznych. W takim przypadku można mówić o fontach wektorowych.

Hinting. Mechanizm pozwalający na zdefiniowanie sposobu przełożenia kształtów znaków w fontach wektorowych na piksele. Hinting jest zakodowany w foncie.

Krój pisma. Charakterystyczny obraz pisma drukarskiego o jednolitych cechach graficznych: rytmie, proporcji, dukcie, właściwościach optycznych itp., niezależnych od stopnia i odmiany pisma. Każdy krój pisma posiada swoją nazwę (na przykład Helvetica, Univers czy Garamond), podlegającą wraz z samym krojstrong ochronie prawnej.

Majuskuły (litery wersalikowe). Przedstawiają obrazy wielkich liter alfabetu.

Minuskuły (litery podrzędne, litery tekstowe). Przedstawiają obrazy małych liter alfabetu.

Pismo. Zespół znaków przyjęty przez określoną grupę ludzką umożliwiający widzialne i/lub trwałe przedstawienie myśli i mający to samo znaczenie dla wszystkich jej członków. Pismo w sensie drukarskim jest to pismo utrwalone na nośniku.

Rasteryzator. Program dokonujący przełożenienia informacji o kształtach znaków zakodowanych w foncie wektorowym na piksele.

Szeryfy (zaciosy). Poprzeczne lub ukośne zakończenia kresek znaków niektórych krojów pism, jednolite w swej formie graficznej w danym kroju pisma.

Miejsce publikacji

Pierwsza wersja artykułu została napisana dla serwisu HtmlZon@.