Teksty na stronach WWW stwarzają liczne problemy. Już sam wybór kroju i wielkości czcionki nie jest łatwy. W tym artykule przedstawię przegląd zagadnień dotyczących czcionek na stronach WWW oraz najlepsze rozwiązania dotyczące wyboru czcionki i jej wielkości.

Rodzaje czcionek

Dwie główne charakterystyki czcionek dotyczą:

• obecności lub braku szeryfów,
• przestrzeni przeznaczonej na każdy znak.

Szeryfowe, bezszeryfowe

Szeryfy są ornamentami zdobiącymi końce linii tworzących litery. Rys. 1 przedstawia szeryfy litery H w kroju Times New Roman. Kroje pisma w których litery mają szeryfy nazywamy szeryfowymi. Do krojów tych należą między innymi: Garamond, Georgia, Palatino oraz Times New Roman.

Jeśli litery nie mają szeryfów, krój taki nazywamy bezszeryfowym. Popularnymi krojami bezszeryfowymi są: Arial, Helvetica, Switzerland, Zurich, Tahoma, Trebuchet oraz Verdana. Rys. 2 przedstawia literę H w kroju Arial.

Czcionki szeryfowe są zazwyczaj stosowane w publikacjach drukowanych, bezszeryfowe – w publikacjach elektronicznych. Jednym z powodów jest fakt, że rozdzielczość monitorów jest znacznie niższa od rozdzielczości, jaką operują drukarki. Szeryfy widoczne na urządzeniach o rozdzielczości 72-96 dpi (rozdzielczość współczesnych monitorów) są – przynajmniej w przypadku niewielkich liter – postrzępione i nieładne.

Wyjątek stanowią kroje takie jak Georgia, które zostały przygotowane specjalnie z myślą o stosowaniu w publikacjach elektronicznych. Kształt liter i szeryfów zoptymalizowano tak, by otrzymać ładne i czytelne napisy w niskich rozdzielczościach.

Proporcjonalne, nieproporcjonalne

Druga cecha, czyli ilość miejsca przeznaczonego na jeden znak, wyznacza podział na czcionki proporcjonalne i nieproporcjonalne. Czcionki nieproporcjonalne, nazywane również czcionkami stałej szerokości (ang. monospaced fonts), charakteryzują się tym, że każdy znak zajmuje dokładnie tyle samo miejsca. Przykładem takiego kroju jest Courier New. W czcionkach proporcjonalnych ilość miejsca przeznaczonego na każdą literę zależy od jej szerokości. Zazwyczaj litera m zajmuje znacznie więcej miejsca niż litera i, gdyż jest od niej szersza.

Przeważająca część czcionek jest proporcjonalna. Czcionkami proporcjonalnymi są między innymi czcionki szeryfowe: Garamond, Georgia, Times New Roman, oraz bezszeryfowe: Arial, Helvetica, Tahoma, Trebuchet MS czy Verdana.

Rys. 3 przedstawia napisy wykonane w kroju nieproporcjonalnym Courier New oraz w krojach proporcjonalnych: Arial, Times New Roman. Jedynie w pierwszym przykładzie każda z liter zajmuje dokładnie jeden prostokąt. W pozostałych część liter nie mieści się (np. M), zaś część zajmuje mniej niż pół prostokąta (np. I).

Czcionki stałej szerokości stosuje się głównie do przedstawiania kodów programów komputerowych.

Inne podziały czcionek

Podziały czcionek na szeryfowe i bezszeryfowe oraz proporcjonalne i nieproporcjonalne są jasno zdefiniowane i powszechnie stosowane. Oprócz nich pojawiają się kategorie:

• krój odręczny (ang. cursive),
• krój fantazyjny (ang. fantasy).

Czcionki rodziny cursive imitują odręczne pismo. Często są to kroje pochylone, w których poszczególne litery są łączone na wzór pisma odręcznego. Przykładami tego rodzaju kroju są Comic Sans MS oraz Zapf-Chancery.

Natomiast kroje fantazyjne stosują rozmaite metody dekorowania liter. Przykładami takich krojów są Alpha Geometrique, Critter oraz Western.

Ornamenty i czcionki specjalne

Osobną kategorią czcionek są ornamenty (ang. dingbat) oraz czcionki specjalne. Czcionki takie zawierają zestawy różnych symboli. Rys. 4 prezentuje alfabet napisany w kroju Webdings.

Archiwa czcionek

W internecie jest wiele archiwów zawierających darmowe czcionki, m.in.:

• http://www.digit.pl/czcionki/
• http://www.1001freefonts.com
• http://czcionki.skryptoteka.pl
• http://www.abstractfonts.com

Jeśli szukamy polskich czcionek do zastosowań komercyjnych i jednocześnie chcemy uniknąć jakichkolwiek niejasności dotyczących praw autorskich, możemy skorzystać z oferty firmy EXE z Wrocławia (http://www.exe.com.pl). Firma ta oferuje w niewielkiej cenie zestaw 100 polskich czcionek.

Szukając profesjonalnych czcionek polskich można odwiedzić witryny http://www.telefont.pl oraz http://www.theta.pl/pl/theta/polskie-fonty. Znajdziemy tam zestawy zawierające kilkaset profesjonalnych polskich czcionek. Nie są to jednak produkty tanie: zestaw taki kosztuje ok. 1000 zł.

Testowanie czcionek

Wygląd jednej czcionki

Do badania wyglądu czcionek stosowane są pangramy – zdania, które zawierają wszystkie litery alfabetu. Najpopularniejszymi pangramami angielskimi są: The quick brown fox jumps over the lazy dog oraz Jackdaws love my big sphinx of quartz.

W języku polskim stosowane jest zazwyczaj zdanie: Zażółć żółcią gęślą jaźń. Pangramem, który zawiera wszystkie polskie litery (a nie tylko znaki diakrytyczne) jest: Mężny bądź, chroń pułk twój i sześć flag.

Jeśli chodzi o testowanie większej ilości tekstu, to do tego celu wykorzystywany jest tekst Lorem ipsum (patrz: http://pl.wikipedia.org/wiki/Lorem_ipsum; http://www.lipsum.com; http://www.loremipsum.net). Pod adresem http://typetester.maratz.com znajdziemy serwis Typetester. Umożliwia on testowanie wyglądu tekstu pisanego różnymi czcionkami i w różnych kolorach.

Wygląd wielu czcionek

Do sprawdzenia wyglądu napisów w różnych czcionkach można wykorzystać skrypt PHP. Biblioteka GD zawiera funkcję {stala}imagettftext(){/stala}, która umożliwia napisanie napisu dowolną czcionką, także taką, która nie jest zainstalowana w systemie.Jeśli chcemy napisać tekst czcionką zainstalowaną w systemie, wywołujemy funkcję {stala}imagettftext(){/stala}, podając jako siódmy parametr nazwę kroju czcionki (np. Georgia):

$tekst = \"A B C...\";
$im = imagecreate(800, 30);
$white = imagecolorallocate($im, 255, 255, 255);
$black = imagecolorallocate($im, 0, 0, 0);
imagettftext($im, 16, 0, 20, 25, $black, \'Georgia\', $tekst);

Jeśli czcionka, której chcemy użyć nie jest zainstalowana w systemie, siódmym parametrem powinna być nazwa pliku .ttf (np. actionis.ttf):

imagettftext($im, 16, 0, 20, 25, $black, \'actionis.ttf\', $tekst);

Kompletny skrypt generujący obraz z tekstem napisanym wybranym krojem czcionki jest przedstawiony na listingu 1.

Wykorzystując funkcję {stala}imagettftext(){/stala} możemy przygotować skrypt, który sprawdza wygląd zadanego tekstu w wielu różnych krojach. Rys. 6 przedstawia taki test generowany przez skrypt PHP sprawdzający wszystkie czcionki z wybranego folderu.

Stosując podany skrypt możemy pobrać z internetu dowolną liczbę darmowych czcionek, a następnie sprawdzić wygląd zadanego tekstu w każdym z pobranych krojów. Krojów tych nie trzeba instalować w systemie, wystarczy wypakować pliki .ttf do ustalonego folderu.

Czcionki dla webmastera

Ogród Zen CSS

Jakich czcionek możemy używać w arkuszach stylów? Szukając odpowiedzi na to pytanie przeanalizowałem wszystkie oficjalne projekty z Ogrodu Zen CSS (http://www.csszengarden.com). Okazuje się, że wybór czcionek nie jest duży. Odnalazłem ich zaledwie 38 (w 199 projektach), jednak na przeważającej części witryn stosowane są wyłącznie takie czcionki, co do których nie ma wątpliwości, że będą wyglądały poprawnie.

Za czcionki takie autorzy projektów z Ogrodu Zen CSS uznali niemal wyłącznie czcionki standardowo dostępne na jednej z trzech platform: Windows, Macintosh oraz Linux. Są to:

• bezszeryfowe: Arial, Arial Black, Verdana, Helvetica, Tahoma, Trebuchet MS, Geneva, Lucida, Lucida Grande, Luicida Sans Unicode,
• szeryfowe: Georgia, Times New Roman, Palatino, Garamond,
• nieproporcjonalne: Courier, Courier New

Core fonts for the Web

W roku 1996 firma Microsoft uruchomiła projekt o nazwie Core fonts for the Web. Celem projektu było opracowanie zestawu czcionek przeznaczonych specjalnie dla środowiska WWW. Wprawdzie projekt ten został zamknięty w roku 2002, lecz opracowane czcionki po dziś dzień stanowią żelazny repertuar znacznej części stron WWW. Czcionki Core fonts for the Web to:

• bezszeryfowe: Arial, Verdana, Trebuchet MS,
• szeryfowe: Georgia, Times New Roman,
• nieproporcjonalne: Courier New, Andale Mono,
• specjalne: Comic Sans MS, Impact, Webdings.

Podobną inicjatywę podjęła firma Adobe, udostępniając zestaw Adobe WebType (http://www.adobe.com/type). Jednak czcionki te nie są popularne.

Czcionki dostępne na różnych platformach

Główny problem związany ze stosowaniem czcionek na stronach WWW polega na tym, że zestaw czcionek dostępnych na komputerze zależy od zainstalowanego oprogramowania. Użytkownik pracujący w Linuksie ma dostępne inne czcionki niż użytkownik systemu Windows.

Każda platforma systemowa ma własny zestaw czcionek. W systemie Windows możemy przyjąć, że zestawem tym jest zestaw Core fonts for the Web wzbogacony o krój Tahoma – bezszeryfową czcionkę wykorzystaną w interfejsie Windows (w kolejnych wersjach Windows Tahoma ma być zastąpiona nową czcionką Segoe UI). Zestawienie czcionek dostępnych w Linuksie oraz Macintoshu zawiera tabela 1.

Krój i wielkość czcionki w CSS

Wybór czcionki

Czcionki stosowane na stronach WWW są wymienione w arkuszach stylów. Służą do tego atrybuty font:

p {
    font: bold 120% Arial, sans-serif;
}

oraz font-family:

p {
    font-family : Verdana, Helvetica, sans-serif;
}

Każdy z wpisów może zawierać dowolną liczbę czcionek, np.:

font-family : \"Times New Roman\", Georgia, Palatino, serif;
font-family : Verdana, Tahoma, Helvetica, \'Trebuchet MS\', sans-serif;

W przypadku kilku wartości, przeglądarka zastosuje pierwszą, jaką znajdzie w systemie. Zauważmy, że nazwy, które zawierają białe znaki, np. Times New Roman lub Trebuchet MS, należy ująć w cudzysłów lub apostrofy. Ponadto nazwy czcionek oddzielamy przecinkami, a nie – jak w większości atrybutów – spacjami, np.:

border : 1px solid black;

Ostatnią podawaną wartością powinna być ogólna rodzina czcionek. Będzie ona stosowana przez przeglądarkę w przypadku, gdy żadna z wymienionych czcionek nie została odnaleziona w systemie. Dostępnymi rodzinami są:

• sans-serif – czcionki bezszeryfowe
• serif – czcionki szeryfowe
• monospace – czcionki nieproporcjonalne
• cursive – czcionki odręczne
• fantasy – czcionki fantazyjne

Praktyczne znaczenie mają wyłącznie pierwsze trzy rodziny, tj. sans-serif, serif oraz monospace. Pozostałe rodziny, z racji na rozbieżności między systemami, nie są stosowane.

W jaki sposób wybierać krój czcionki na stronach WWW, by efekty były jak najbardziej przewidywalne? Wystarczy wymienić jedną z czcionek dostępnych na każdej z platform, by mieć pewność co do wyglądu strony. Przykładami takich wpisów są:

p {
    font-family : Verdana, Helvetica, \"Bitstream Vera Sans\", sans-serif;
}
p {
    font-family : \"Trebuchet MS\", Geneva, Lucida, sans-serif;
}
p {
    font-family : Tahoma, \"Lucida Grande\", Helvetica, sans-serif;
}

Każdy z powyższych wpisów zawiera:

• jedną czcionkę platformy Windows (czcionka z zestawu Core fonts for the Web),
• jedną czcionkę platformy Macintosh,
• jedną czcionkę dla Linuksa,
• ogólną rodzinę czcionek.

W odniesieniu do krojów szeryfowych możemy pisać:

p {
    font-family : Georgia, Palatino, Times, serif;
}
p {
    font-family : \"Times New Roman\", \"New York\", \"Bitstream Vera Serif\", serif;
}

Powyższe wpisy są bardzo często skracane do pary: czcionka z zestawu Core fonts for the Web oraz ogólnej rodziny. Na przykład:

p {
    font-family : Georgia, serif;
}
p {
    font-family : Verdana, sans-serif;
}

Rozmiar tekstu

Wielkość tekstu na stronach WWW powinna być podana w taki sposób, by użytkownik mógł zwiększyć lub zmniejszyć rozmiar czcionki przy użyciu opcji Widok / Rozmiar tekstu (w Firefoksie: skróty klawiszowe Ctrl+, Ctrl-, Ctrl+0). Narzuca to pewne ograniczenia odnośnie rozwiązań stosowanych w CSS.

Użycie jednostek px lub pt uniemożliwia modyfikację wielkości tekstu w Internet Explorerze. Z tego powodu z jednostek tych należy zrezygnować.

Sądzę, że najlepszym wyjściem jest stosowanie rozwiązania podanego przez Dana Caderholma w pierwszym rozdziale książki \”Kuloodporne strony internetowe\”. Należy ustalić wielkość bazową tekstu w odniesieniu do całego dokumentu, stosując jedno ze słów kluczowych: xx-small, x-small, small, medium, large, x-large, xx-large, na przykład:

body {
    font-size : medium;
}

a następnie zmienić wielkość wybranych elementów witryny, stosując wartości procentowe:

p {
    font-size : 110%;
} h1 {
    font-size : 160%;
}h
2 {
    font-size : 120%;
}

Przy takim rozwiązaniu tekst będzie skalowalny w każdej przeglądarce, natomiast wielkość tekstu w całym projekcie możemy modyfikować, zmieniając atrybut font-size elementu body. Wartość medium odpowiada czcionce 16 px. Jest to wartość domyślna przeglądarek: IE 6, IE 7, FF 1.5, FF 2, Opera 7, Opera 9, Netscape 8.

Tabela 2 zawiera pełne zestawienie dostępnych słów kluczowych i odpowiadających im wielkości wyrażonych w pikselach. Zestawienie to przygotowałem badając zachowanie przeglądarek: IE 6, IE 7, FF 1.5, FF 2, Opera 7, Opera 9, Netscape 8.

Wszystkie atrybuty CSS dotyczące czcionek i tekstów

Poza poznanymi już atrybutami font, font-family oraz font-size, w CSS można zmienić kilka innych atrybutów tekstu. Powszechnie stosowanymi są font-style, font-weight, text-align, text-decoration, text-indent oraz line-height. Bardziej egzotyczne to: font-variant, text-transform, letter-spacing, word-spacing oraz white-space.

W specyfikacji CSS 2.1 wycofane zostały atrybuty font-size-adjust, font-stretch oraz text-shadow, które nigdy nie były w spójny sposób implementowane w przeglądarkach. Pełne zestawienie atrybutów CSS 2.1 dotyczących czcionek i tekstu prezentuje tabela 3.

Font

Atrybut ten może zawierać wartości atrybutów: font-style, font-variant, font-weight, rozmiar font-size, ewentualnie wzbogacony o wysokość interlinii line-height oraz font-family. Przykłady użycia:

font : 80% sans-serif;
font : small Verdana, sans-serif;
font : italic 140% Georgia, serif;
font : bold 140%/200% Verdana, sans-serif;
font : bold italic large \"Trebuchet MS\", sans-serif;
font : bold small-caps medium serif;

Zapis 140%/200% oznacza tyle samo, co:

font-size : 140%;
line-height : 200%;

Nazwa kroju musi występować jako ostatnia. Poniższy przykład jest niepoprawny:

font : \"Trebuchet MS\", sans-serif, 110%;

font-family

Specyfikacja rodziny czcionek. Najpewniejszą metodą jest ograniczenie stosowanych czcionek do zestawu podanego w tabeli 1. Wymieniając czcionki podajemy po jednej czcionce dla każdej platformy i dodajemy na końcu ogólną rodzinę czcionek:

font-family: Georgia, Palatino, Times, serif;

W powyższym przykładzie:

• Georgia – pochodzi z pakietu Core fonts for the Web i na pewno jest dostępna w systemach Windows,
• Palatino – dostępna na komputerach Macintosh,
• Times – dostępna w Linuksie,
• serif – rodzina czcionek szeryfowych.

Skróconą metodą jest:

font : Georgia, serif;

W tym przypadku stosujemy czcionkę z zestawu Core fonts for the Web i podajemy ogólną rodzinę czcionek. Są to dwie najpewniejsze metody specyfikowania czcionek na stronach WWW.

font-size

Rozmiar tekstu. Dostępne wartości możemy podzielić na:

jednostki bezwzględne:

• słowa kluczowe: xx-small, x-small, small, medium, large, x-large, xx-large,
• jednostki długości: in (cale), cm (centymetry), mm (milimetry), pt (punkty, 1/72 cala), pc (pica),

jednostki względne:

• słowa kluczowe: smaller, larger,
• jednostki długości: em (szerokość litery m), ex (wysokość litery x), px (piksel urządzenia),
• wartości procentowe.

Przykłady użycia:

font-size : medium;
font-size : 120%;
font-size : 1.5em;

Wielkość bieżącego kroju jest dostępna poprzez jednostki em oraz ex. em jest szerokością litery m w danym kroju, zaś ex wysokością litery x. Wykorzystując te jednostki możemy pisać:

font-size : 1.2em;
font-size : 0.8ex;

Jednostki em oraz ex pozwalają na definiowanie pudełek, których wymiary zależą od obszaru zajmowanego przez tekst:

width : 8em;
height : 4ex;

Najlepszą metodą specyfikowania rozmiaru tekstu jest wspomniana technika Dana Cederholma:

• domyślna wielkość tekstu na stronie ustalona w opisie elementu body jednostkami bezwzględnymi w postaci słów kluczowych (tj. xx-small, x-small itd.),
• wielkość tekstu poszczególnych elementów ustalona w procentach.

font-style

Styl kroju. Dostępne wartości: normal, italic.

font-weight

Grubość czcionki. Dostępne wartości: normal, bold.

font-variant

Kapitaliki. Dostępne wartości: normal, small-caps.

text-align

Wyrównanie poziome tekstu. Dostępne wartości: left, right, center, justify.

text-decoration

Ozdabianie tekstu. Dostępne wartości: none, underline, overline, line-through.

text-indent

Wcięcie akapitu. Zazwyczaj stosowane są jednostki em:

text-indent : 2em;

text-transform

Przekształcenie tekstu. Dostępne wartości: capitalize, uppercase, lowercase, none.

word-spacing

Odstępy między wyrazami. Przykłady użycia:

word-spacing : 2em;
word-spacing : 200%;

letter-spacing

Odstępy między literami. Przykłady:

letter-spacing : 1em;
letter-spacing : 140%;

white-space

Zachowywanie białych znaków w tekście oraz zawijanie wierszy. Dostępne wartości: normal, pre, nowrap, pre-wrap, pre-line.

line-height

Wysokość wiersza tekstu. Przykłady:

line-height : 150%;
line-height : 1.8;

Osadzanie czcionek

Specyfikacja CSS 2 zawierała informacje o tym, w jaki sposób możemy osadzić daną czcionkę w dokumencie WWW. Osadzenie miało polegać na pobieraniu czcionek wraz ze stroną WWW. W ten sposób miał być ominięty problem dostępności różnych czcionek na różnych platformach.

Rozwiązanie takie nie przyjęło się i zostało wycofane ze specyfikacji CSS 2.1. Wydaje się, że jednym z głównych powodów są prawa autorskie dotyczące czcionek. Osadzenie czcionek w dokumencie prowadziłoby w istocie do nieograniczonego rozpowszechniania czcionki. Nie mówiąc o tym, że po godzinie wędrowania po internecie mogłoby się okazać, że w systemie mamy zainstalowane tysiące czcionek (ten problem dałby się rozwiązać przy użyciu tymczasowego folderu na czcionki).

Osadzanie miało być realizowane w sposób następujący:

@font-face {
    font-family: \"Adler\";
    src: url(\"adler.ttf\");
}
p {
    font-family: \"Adler\", sans-serif;
}

Ograniczenia dotyczące tekstów

Napisy umieszczane na stronach WWW w postaci tekstu formatowanego za pomocą CSS podlegają wielu ograniczeniom. Po pierwsze zestaw dostępnych czcionek jest niewielki. Po drugie napisy takie mogą być wyłącznie poziome lub pionowe (liter i napisów nie możemy obracać). Po trzecie nie są dostępne żadne efekty graficzne. Z tego powodu, tam gdzie typografia projektu jest istotna, należy posłużyć się obrazami.

Napisy jako obrazy (tła)

Na listingu 2 widoczny jest fragment kodu XHTML z tekstem opowiadania Jacka Londona \”The Call of the Wild\” (\”Zew krwi\”). W celu wykonania napisów nagłówkowych (tj. elementów h1, h2 oraz h3) dowolnym krojem czcionki należy dodać style wyświetlające obrazy tła nagłówków (do tego celu są konieczne identyfikatory t1, t2, t3 itd.), ukryć tekst, wykonać obrazy z napisami.

The Call of the Wild
by Jack London
Chapter I
Into the Primitive

Buck did not read...

Chapter II
The Law of Club and Fang

Buck\'s first day...

Style CSS czterech pierwszych nagłówków są widoczne na listingu 3. Oczywiście tak wykonane napisy nie będą skalowane. Mogą również wystąpić problemy z dostępnością takich stron i indeksacją przez roboty.

h1, h2, h3 {
    margin-top   : 10px;
    width        : 800px;
    height       : 100px;
    margin-left  : auto;
    margin-right : auto;
    text-align   : left;
    font-size    : 1px;
    color        : white;
    background   : no-repeat 50% 50%;
}
#t1 {
    background : url(bkg-1-14.png);
}
#t2 {
    background : url(bkg-2-14.png);
}
#t3 {
    background : url(bkg-3-14.png);
}
#t4 {
    background : url(bkg-4-14.png);
}

Obecnie ukrywanie tekstu przed użytkownikiem wykonywane techniką zmniejszenia czcionki i pisania tekstu kolorem tła lub wykorzystujące atrybut display o wartości none nie są traktowane jako spam przez wyszukiwarki. Być może kiedyś jednak za takie zostaną uznane (podobnie jak to miało miejsce z różnymi technikami wklejania dużej ilości niewidocznego tekstu w HTML kilka lat temu).

Rys. 7 i 8 przedstawiają witrynę wykonaną tą techniką po zastosowaniu dwóch różnych czcionek. Zaletą podanego rozwiązania jest to, że webmaster nie jest w żaden sposób ograniczony odnośnie wyboru kroju czcionki i wykonywania przeróżnych efektów i ornamentów liter.