Typografia na stronach WWW

Autor: Jerzy Maciążek, dodano: 30-07-2003
Kategoria: Projektowanie WWW

Znaczenia kroju pisma na stronach www nie należy lekceważyć. Wpływa on na przyjemność czytania i estetykę strony. Poniżej zawarliśmy artykuł, przedstawiający założenia typografii, które pomogą Wam odpowiednio zaprezentować tekst.

Zastosowanie różnych krojów pisma

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

Teksty przygotowywane do druku. 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.

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. 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:

Krój o jak najprostrzych kształtach znaków.
Do prezentacji w niskich rozdzielczościach najlepiej nadają się litery o prostych kształtach. Fantazyjne czcionki nie sprawują się dobrze w sieci. 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.
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.


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

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.

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.

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.
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.


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.
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ć.
Bardzo długo nie istniały kroje pisma zaprojektowane specjalnie do oglądania na ekranie monitora. 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 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
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.

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

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.


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 (www.microsoft.com/typography/fonts). 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 doskonał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:


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.
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.

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.

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 zastosowań 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.

Microsoft Web Core Fonts
Oprócz Ariala, 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:

Trebuchet MS
Georgia
Verdana
Comic Sans
Arial Black
Impact
Arial
Times New Roman
Courier New
Webdings

Adobe WebType (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
Minion Web Italic
Minion Web Bold
Myriad Web
Myriad Web Italic
Myriad Web Bold
Myriad Condensed Web
Myriad Condensed Web Italic
Caflisch Script Web
Mezz Web Bold
Penumbra Serif Web
Giddyup Web

Minion Web jest dostępny bezpłatnie, jest bowiem składnikiem uaktualnień Service Pack 1 i Service Pack 2 do Internet Explorera 4.0.

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

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 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, 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ą instrukcję 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.

Ocena 2.56/5 (51.12%) (448 głosów)

Komentarze:


  • Dodał: Gość data: 2010-02-09
    Zastanawia mnie Twoja wypowiedź:
    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....
    - to twoje zdanie, ale mam wrażenie że większość zajmujących się typografią ma kompletnie odmienną opinię. Czyżby mylili się także ci nieszczęśni, którzy przepłacają kupując nie do końca jak twierdzisz profesjonalne pakiety softu ze stajni Adobe. Drogie przyzwyczajenie, czy owczy pęd?


Dodaj komentarz:


Temat:
Twój nick:
Komentarz:
 

Prosimy o kulturę wypowiedzi. Komentarze zawierające niecenzuralne zwroty, bądź obrażające inne osoby będą usuwane. Kod HTML w wypowiedziach jest niedozwolony. Wydawca nie odpowiada za treść komentarzy.