Darmowy fragment publikacji:
• Kup książkę
• Poleć książkę
• Oceń książkę
• Księgarnia internetowa
• Lubię to! » Nasza społeczność
Spis treści
Przedmowa
Interfejsy użytkownika w nowoczesnych
aplikacjach webowych
Layouty CSS — nauka i sztuka
Typografia internetowa: zasady, wskazówki
i najczęstsze błędy
Użyteczność nowoczesnych stron internetowych
Kolor: webdesign, użyteczność i doznania użytkownika
Optymalizacja wydajności stron internetowych
Projektuj, by sprzedać. Stymulowanie konwersji
Jak zapewnić stronie doskonałą markę
Co mówią eksperci. Wywiady i wypowiedzi
Za kulisami: historia Smashing Magazine
Autorzy
Skorowidz
5
7
25
55
109
139
165
187
209
225
255
273
274
The Smashing Book.indd 3
2012-12-06 18:52:21
The Smashing Book.indd 4
2012-12-06 18:52:21
Alessandro
Cattaneo,
Yves Peters
i Jon Tan
ypografia
interne-
towa:
zasady,
wskazówki
i najczęstsze błędy
The Smashing Book.indd 55
2012-12-07 13:53:06
T ypografia jest duszą designu, bijącym sercem „piśmienności” wizualnej. W tym
rozdziale zgłębimy zagadnienie typografii internetowej oraz opiszemy metody
i techniki kompozycyjne, które pozwalają tchnąć życie w dokumenty oraz umożli-
wiają zrozumienie ich przekazu.
Jak to ujął Robert Bringhurst, autor nieocenionego Elementarza stylu w typografii,
„typografia istnieje, by uświetnić treść”. Dobór krojów i skład — dla wzbogacenia zna-
czenia tekstu i ożywienia go — jest istotny sam z siebie, a już szczególnie w typografii
internetowej. To dobry punkt wyjścia, ale bynajmniej nie wyczerpująca definicja.
Typografia jest dziedziną wiążącą się z wieloma zagadnieniami i zastosowaniami,
a zakres ten poszerza się wraz z postępującą digitalizacją informacji. Nie chodzi tylko
o wybranie najlepszej rodziny fontów, ale o wzbogacenie komunikacji, zwiększenie
czytelności, ugruntowanie marki i wizerunku firmy, sprzedaż oraz ułatwienie odbior-
com zrozumienia treści. Niestosowanie się do powszechnych zasad typografii czasami
w zupełności wystarczy, by całkowicie zniechęcić odbiorcę do lektury.
Krój gotycki, którego Gutenberg użył w 1455 roku — czyli roku narodzin typo-
grafii — może nie odpowiadać gustowi współczesnego czytelnika, ale nawet jak na
dzisiejsze standardy nie można mu odmówić pięknej formy i dobrego składu. Przy
projektowaniu na potrzeby internetu nie mamy tak dużych możliwości zadbania
o wygląd wiersza ani nie możemy używać takich ligatur jak Gutenberg na papierze
i pergaminie ponad pół tysiąclecia temu.
Metody produkcji uległy z czasem zmianie, a w internecie przybrały już zupełnie
inną formę. Skład nie jest już pracą manualną wykonywaną przez specjalistów, lecz
opiera się na poleceniach ujętych w wirtualnym modelu tworzonym przez designe-
rów. Tekstu nie drukuje się już na papierze, lecz wyświetla się go na ekranie w for-
mie pikseli. Właśnie to sprawia, że typografia w internecie wygląda inaczej. Zamiast
wskazywać papier lub inny materiał, na którym tekst ma być drukowany, musimy się
poruszać po różnorakich rodzajach ekranów, rozdzielczościach, przeglądarkach i sys-
temach operacyjnych (które z kolei używają różnych silników graficznych). W pracy
z typografią trzeba pilnować, żeby sprawdzała się w każdych warunkach.
W dzisiejszych czasach od mnóstwa fontów dzieli nas zaledwie jedno kliknięcie.
Nie oznacza to bynajmniej, że wszystkie z nich sprawdzają się w internecie. Więk-
szość z nich jest dostosowana do potrzeb druku, a nie do ekranów o względnie nie-
wielkiej rozdzielczości, na których przeglądamy sieć. Szeroka dostępność profesjo-
nalnie zaprojektowanych fontów oraz konieczność zadbania o spójność prezentacji
na przestrzeni różnych platform i przeglądarek sprawiają, że znajdujemy się w takiej
samej sytuacji jak niegdyś projektanci i drukarze. Możemy używać jedynie garstki
fontów, z którymi jesteśmy za pan brat. Czasami, dzięki stylom CSS, mamy możli-
wość wykorzystania ich potencjału w pełni.
56
Typografia internetowa: zasady, wskazówki i najczęstsze błędy
The Smashing Book.indd 56
2012-12-06 18:52:30
Pierwsza strona pierwszego tomu Biblii Gutenberga, którą wydrukowano
ok. 1455 roku z wykorzystaniem wczesnej czcionki gotyckiej. Ozdobne,
kolorowe inicjały były pisane odręcznie przez skrybów
Typografia internetowa: zasady, wskazówki i najczęstsze błędy
57
The Smashing Book.indd 57
2012-12-06 18:52:31
Webdesign rozwijał się równolegle do składu komputerowego (DTP), choć nie-
zależnie od niego. Webdesign wciąż jest jednak w powijakach — dużo mu brakuje,
choć jednocześnie może zaoferować równie dużo. HTML i CSS (oraz JavaScript
i Flash, jeśli to konieczne) umożliwiają nam efektywną pracę. Niektóre ze starych za-
sad i wytycznych typograficznych, choć nie wszystkie, znajdują zastosowanie w sieci.
Internet jest nowym i odmiennym medium, umożliwiającym komunikację między
redaktorami a czytelnikami, a jego charakter wpływa na typografię i skład.
Typografia i typografia internetowa
Pisanie traktujemy zwykle jako nieskomplikowaną czynność. Często sądzimy, że
poprawienie błędów gramatycznych, określenie kolejności elementów w layoucie
strony i wybranie czytelnego fonta w zupełności wystarczy. Tymczasem z typografią
wiąże się kilka czynników, o których nagminnie zapominamy — zwłaszcza w inter-
necie, gdzie pisanie i publikowanie jest bardzo pochłaniającą czynnością, a problem
jakości tekstu bywa często lekceważony. W tym rozdziale omówimy różne techniki
typograficzne, dobre przyzwyczajenia, praktyczne zasady, a także często pojawiające
się błędy. Najpierw jednak przyjrzyjmy się bliżej podstawowym założeniom typo-
grafii internetowej.
Na czytelność wpływa forma kroju, optymalizacja na potrzeby ekranu oraz mi-
krotypografia. Czytelność to inaczej łatwość, z jaką odróżnia się poszczególne znaki,
litery i glify. Nie możemy wprawdzie zmienić wyglądu powszechnie znanych kro-
jów, ale za to możemy wybrać właściwy font i poprawnie go wykorzystać. Wielu
designerów działa w zgodzie z pewnymi konwencjami, a także używa określonych
metod heurystycznych i technik typograficznych. Przykładowo uważa się, że wielkie
litery przegląda się trudniej niż małe; z kolei zwykły tekst jest czytelniejszy od tekstu
zapisanego kursywą. Odpowiednie skontrastowanie tekstu głównego z tłem zwięk-
sza czytelność, podobnie jak określenie właściwej długości wiersza i interlinii. Przy
pobieżnym przeglądaniu tekstu górna połowa liter ma większe znaczenie od dolnej,
podczas gdy wysokość wydłużeń górnych i dolnych odgrywa istotną rolę w rozpo-
znawaniu liter. Z tego powodu wielu sądzi, że kroje szeryfowe są czytelniejsze. Jak
widzisz, o czytelności decyduje wiele czynników.
Czytelność jest dla designera najważniejsza. O czytelności decyduje layout,
rozmieszczenie bloków tekstowych oraz wygląd poszczególnych elementów. W celu
poprawienia czytelności można uwzględnić sposób, w jaki ludzie odczytują tekst.
Przede wszystkim czytelnicy przyswajają sobie materiały internetowe inaczej niż ma-
teriały drukowane. Zrozumienie tego zachowania i projektowanie z uwzględnieniem
58
Typografia internetowa: zasady, wskazówki i najczęstsze błędy
The Smashing Book.indd 58
2012-12-06 18:52:31
Przykłady rzymskich krojów Williama Caslona — słynnego
osiemnastowiecznego angielskiego typografa
Typografi a internetowa: zasady, wskazówki i najczęstsze błędy
59
The Smashing Book.indd 59
2012-12-06 18:52:33
Niektórzy designerzy uznają typografię za podstawę wszelkiego webdesignu. Na stronie
Dustina Curtisa typografia jest szczególnie mocno zaakcentowana i dominuje nad
całością kompozycji, wspomagana jedynie subtelnymi dodatkami graficznymi
jego charakteru — na czym zresztą opiera się projektowanie doznań użytkownika
— jest nieodzowne. Z typografią internetową wiążą się pewne kluczowe zagadnienia.
Długość wiersza odnosi się do długości pojedynczych wierszy tekstu. Opty-
malna długość jest inna w zależności od sytuacji, ale przy większych blokach tekstu
złożonych w chorągiewkę do lewej zaleca się używać 45 – 75 znaków (w tym znaki
interpunkcyjne i spacje). Za optimum uznaje się 66 znaków — taka długość pozwala
na wygodne czytanie i skraca drogę, po której wzrok przechodzi z końca jednego
wiersza do początku kolejnego. Wiersze nie powinny też być za krótkie, gdyż ciągłe
przeskakiwanie również męczy wzrok.
Zaskakujące jest to, że zgodnie z naszymi najnowszymi badaniami nad typogra-
ficznymi wzorcami projektowymi1 w popularnych, zasobnych w tekst i kładących
szczególny nacisk na typografię witrynach (magazynach internetowych, blogach itp.)
wiersze są dłuższe i zawierają zazwyczaj od 70 do (maksymalnie) 100 znaków. Średnia
liczba znaków w wierszu to ok. 75 – 85. Niestety żadne badania nie wskazują, czy
wydłużenie wiersza wpływa na czytelność pozytywnie, czy negatywnie.
Ponadto na wielu stronach tekst jest rozmieszczony w więcej niż jednej kolum-
nie, a długość wierszy w wielokolumnowych layoutach może być mniejsza. Tekst
w węższych akapitach zwykle się justuje, ale z powodu braku dokładnej kontroli nad
odstępami międzywyrazowymi i dywizami w przeglądarkach lepsze efekty uzyskuje
się zwykle przy dłuższych wierszach.
1 http://www.smashingmagazine.com/?p=8182
60
Typografia internetowa: zasady, wskazówki i najczęstsze błędy
The Smashing Book.indd 60
2012-12-06 18:52:33
O ile określenie właściwej długości jest ważne, czytelność można znacznie zwięk-
szyć poprzez dobór właściwej interlinii. Interlinia to wysokość pojedynczego wiersza,
przestrzeń między dwoma kolejnymi wierszami; innymi słowy: odległość między
liniami bazowymi dwóch wierszy tekstu. Interlinia zwykle powinna być odpowied-
nio duża, aby wydłużenia górne liter nie zahaczały o wydłużenia dolne. Przeglądarki
domyślnie używają interlinii o wysokości jednego firetu, czyli wysokości kroju — to
zwykle za mało, żeby tekst był czytelny. Przyjmuje się, że w akapitach należy używać
interlinii o wysokości półtora firetu. Nasze badania wykazały zresztą, że średnia wiel-
kość interlinii (1,48 wysokości kroju) przystaje do tej reguły. Prosta zasada nakazuje,
by zwiększać interlinię wraz z wydłużaniem wiersza.
Zauważ, że w CSS można określić interlinię wartością wyrażoną bez jednostki
miary. Taka wartość pełni rolę czynnika skalowania odnoszącego się do stopnia pisma
i sprawia, że interlinia zmienia wielkość wraz ze zmianą rozmiaru tekstu. Przy kro-
jach bezszeryfowych z reguły należy używać większych interlinii niż przy krojach sze-
ryfowych, a w przypadku nagłówków — mniejszych niż w akapitach. Ponadto przy
ciemniejszych krojach często należy stosować większe interlinie niż przy jaśniejszych.
Trentwalton.com — zapadający w pamięć typograficzny projekt Trenta Waltona
Typografia internetowa: zasady, wskazówki i najczęstsze błędy
61
The Smashing Book.indd 61
2012-12-06 18:52:33
Tracking, czyli regulowanie odstępów międzyliterowych bądź gęstości tekstu,
również można określić względem długości wiersza. Definiowanie trackingu war-
tościami subpikselowymi w internecie, czyli środowisku graficznym o stosunkowo
niewielkiej rozdzielczości, może być problematyczne, ponieważ rezultaty bywają
niespójne. Z tego powodu trackingu często się używa do wyróżniania podtytułów.
Reguła twierdzi, że im większa jest długość wiersza, a odstępy międzywyrazowe zosta-
ły już dostosowane, tym łatwiej uzasadnić zwiększenie odstępów międzyliterowych.
Rób to jednak ostrożnie. Pary znaków niektórych krojów szeryfowych mogą na siebie
nachodzić i w zasadzie powinny być zapisywane ligaturami.
Przy eksperymentowaniu z trackingiem upewnij się, czy pary „AV”, „ft” i „co”
można bez problemu odczytać oraz czy można odróżnić „vv” od „w”. Najdrobniejsza
niedokładność może sprawić, że tekst stanie się zupełnie nieczytelny.
Regulowanie odległości pomiędzy konkretnymi parami znaków nazywa się z ko-
lei kerningiem. W przypadku par znaków w rodzaju „ff”, „fl” i „ffl”, które powinny
być ligaturami, konieczne może być dostosowanie odstępów. W niektórych przypad-
kach kerning może podziałać na korzyść wyglądu tekstu, np. w przypadku przybliże-
nia do siebie liter „T” i „e”.
Odstępy międzywyrazowe można określić względem długości wiersza i inter-
linii. Przy krótszych wierszach można wybrać mniejsze odstępy międzywyrazowe.
Przy dłuższych często warto wprowadzać większe odstępy, zwłaszcza jeśli interlinia
jest dość duża.
Pojęcie szarości tekstu nie odnosi się do barwy, lecz do rozmieszczenia znaków
na stronie. Właściwą szarość bloku tekstu można poznać po tym, że dany blok wy-
gląda tak samo, kiedy patrzysz na niego normalnie, jak i kiedy mrużysz oczy. Nic nie
powinno się wyróżniać. Jeśli coś się wyróżnia, to tekst ma nierówny rytm. Jednolitą
szarość należy przełamywać tylko wtedy, kiedy chce się celowo zwrócić na coś uwagę.
O szarości decyduje także kerning, na który niestety nie mamy obecnie wpływu,
ponieważ przeglądarki nie obsługują go w odpowiedni sposób.
Ogólne terminy z zakresu typografii
Oto krótki przegląd terminów z zakresu typografii2, który pozwoli nam uniknąć nie-
porozumień w dalszej części artykułu.
Akcent
Znak położony blisko litery lub przylegający do niej, który zmienia jej wymowę.
Przykłady: ç, à, ò, é, Å.
2 Przegląd ten jest częściowo oparty na słowniczku TypeNow (dostępnym niegdyś pod adresem http://
www.typenow.net/glossary.htm; obecnie można go znaleźć w archiwum http://archive.org) — przyp. tłum.
62
Typografia internetowa: zasady, wskazówki i najczęstsze błędy
The Smashing Book.indd 62
2012-12-06 18:52:33
Przegląd terminów typograficznych oparty na ilustracjach z Wikipedia.de
Chorągiewka od lewej
Rozmieszczenie wierszy, przy którym dodatkowa przestrzeń jest umieszczona po pra-
wej krawędzi łamu, a tekst jest wyrównany do lewego marginesu.
Chorągiewka od prawej
Rozmieszczenie wierszy, przy którym dodatkowa przestrzeń jest umieszczona po le-
wej krawędzi łamu, a tekst jest wyrównany do prawego marginesu.
Glif
Każdy znak kroju (np. G, $, ?, 7) jest przedstawiany jako glif. Jeden znak może być
przedstawiony w jednym kroju więcej niż jednym glifem, czyli dodatkowymi glifami
alternatywnymi.
Inicjał
Pierwsza wielka litera akapitu, powiększona tak, by rozciągać się na kilka wierszy.
Kapitaliki
Kapitaliki są „wielkimi literami” o rozmiarze mniejszym niż wersaliki. W wielu apli-
kacjach można utworzyć kapitaliki poprzez skalowanie wersalików, ale takie sztuczne
kapitaliki nie mają odpowiedniego ciężaru i proporcji. W prawdziwej kapitalikowej
odmianie kroju litery mają taki sam ciężar jak wersaliki, lecz mniejszy rozmiar.
Krój bezszeryfowy
Krój, w którego skład nie wchodzą szeryfy.
Ligatura
Znak zawierający dwie lub więcej liter, określający ich relację przestrzenną.
Typografia internetowa: zasady, wskazówki i najczęstsze błędy
63
The Smashing Book.indd 63
2012-12-06 18:52:34
Linia główna
Wyobrażona linia, na której opierają się litery.
Linia górna
Wysokość wersalików.
Linia średnia
Linia określająca wysokość małych liter; jej wysokość zwykle równa się wysokości
litery „x”.
Łuki
Zaokrąglone i eliptyczne elementy, które określają podstawowy kształt liter w rodza-
ju C, G, O i b, c, e, o, p. Podobne do elementu zwanego „okiem”.
Oś
Prawdziwa lub wyobrażona linia, wokół której nakreślona jest litera.
Poprzeczka
Pozioma kreska łącząca dwie linie wielkiej litery, tak jak w „A” i „H”.
Szeryf
Mała kreska znajdująca się na końcu głównych kresek liter. Kroje dzielą się na szery-
fowe i bezszeryfowe.
Światło wewnętrzne
Pusta przestrzeń zawarta w literze. Może być całkowicie zamknięta, tak jak w literach
„d” i „o”, albo tylko częściowo, tak jak w „c” i „m”.
Wersalik
Wielka litera.
Zakończenie
Bezszeryfowa końcówka kreski.
Ludziom zdarza się często używać terminów „krój pisma” i „font” zamiennie.
Tymczasem „krój” odnosi się do kształtu znaków, a „font” jest plikiem zawierającym
glify. Przykładowo: Georgia jest krojem, Georgia-Bold.ttf jest fontem — plikiem za-
wierającym pogrubioną odmianę kroju. Innymi słowy, font jest zbiorem liter, cyfr,
symboli i innych znaków składających się na krój. Fizycznym odpowiednikiem fonta
jest natomiast czcionka.
Kiedy wypowiadamy się na temat wyglądu tekstu, to mówimy o kroju. Analo-
gicznie odtwarzamy pliki MP3, ale słuchamy piosenek.
64
Typografia internetowa: zasady, wskazówki i najczęstsze błędy
The Smashing Book.indd 64
2012-12-06 18:52:34
Względne i absolutne jednostki wielkości pisma
Prawdopodobnie najbardziej charakterystyczną właściwością cyfrowego składu jest
to, że użytkownik ma możliwość dostosowania wielkości pisma do własnych po-
trzeb. Webdeweloper może w kodzie CSS określić wielkość pisma w jednostkach
względnych lub bezwzględnych. Jednostki absolutne w zasadzie służą do pracy nad
składem materiałów drukowanych, a wykorzystywanie ich do składu treści publiko-
wanych w internecie nie jest dobrym pomysłem. Wyjątkiem są arkusze stylów two-
rzone na potrzeby drukarek, gdzie jednostki bezwzględne pomagają określić wymiary
elementów na papierze. Obsługiwane jednostki bezwzględne to pt, pc, cm, mm i in,
ale można też używać wartości xx-small, x-small, small, medium, large,
x-large i xx-large.
Podanie „bezwzględnej” wielkości tekstu nie uniemożliwia użytkownikowi
wprowadzania zmian; dzisiejsze przeglądarki pozwalają na znaczące manipulowanie
wyglądem tekstu. Chodzi raczej o to, że designerzy używający takich jednostek nie
mogą określić proporcji między elementem-rodzicem a elementem-dzieckiem, która
zostałaby zachowana także przy wszelkich wprowadzanych przez użytkownika zmia-
nach wielkości. Wspomniana „bezwzględność” odnosi się zatem do tego, jak element
jest zdefiniowany w arkuszu stylów, a nie do jego wyglądu na ekranie.
Podanie „bezwzględnej” wielkości tekstu nie uniemożliwia użytkownikowi
wprowadzania zmian.
Współczesne przeglądarki domyślnie nadają tekstowi elementu body wielkość 16
pikseli, jeśli żadna inna wartość nie została jasno zdefiniowana w arkuszu stylów. Dla
uniknięcia skomplikowanych kalkulacji Richard Rutter sugeruje, by nadawać teksto-
wi elementu body wielkość 62,5 , co zmniejsza jego rozmiar do 10 pikseli (16 px
× 0,625 = 10 px). Dzięki temu można np. określić wielkość 18-pikselowego nagłówka
wartością 1.8em zamiast 1.125em (18 px / 16 px = 1,125), co jest wygodniejsze.
W praktyce wielkość pisma zwykle określa się jednostkami względnymi, takimi
jak px, em i wartościami procentowymi. Wielkość piksela jest określona w stosunku
do rozdzielczości ekranu. Im wyższa jest rozdzielczość, tym większe jest zagęszczenie
pikseli, a tekst zazwyczaj odpowiednio mniejszy.
Em jest jednostką miary określoną wielkością punktową kroju, którego uży-
wasz3. Jeśli w tekście nie występuje powiększona interlinia, em równa się odległości
3 Wartość „em” pierwotnie odnosiła się do firetu, czyli szerokości wielkiego „M” danego kroju, jako że
„M” powszechnie odlewano tak, by obejmowało całą szerokość czcionki. Tymczasem „M” w nowo-
czesnych krojach zwykle jest nieco krótsze od firetu. Co więcej, ponieważ w niektórych krojach (m.in.
chińskich i arabskich) wielkie „M” w ogóle nie występuje, to jednostka „em” współcześnie odnosi się
do wysokości danego kroju.
Typografia internetowa: zasady, wskazówki i najczęstsze błędy
65
The Smashing Book.indd 65
2012-12-06 18:52:34
między liniami podstawowymi kolejnych wierszy. Em jest jednostką względną i pełni
rolę mnożnika, bazując na rodzicu elementu tekstowego. 1 em w odniesieniu do
16-punktowego tekstu jest zatem równy 16 punktom. Jeżeli domyślny rozmiar tek-
stu w przeglądarce to 16 pikseli, 1 em wynosi 16 pikseli, czyli jest równy wielkości
wyświetlanego tekstu. Kiedy użytkownik zmniejsza rozmiar tekstu do 14 pikseli, to
2 em równa się 28 pikselom (2 × 14 px = 28 px).
Zaletą określania wielkości pisma jednostkami em jest to, że dają one możliwość
ustalenia proporcji między elementem-rodzicem a elementem-dzieckiem, a także
wykorzystania dziedziczenia CSS, w ramach którego dziecko elementu „dziedziczy”
wielkość rodzica, jeżeli nie jest podane inaczej. Jeśli na przykład domyślna wielkość
pisma to 16 pikseli, tekst elementu body ma wielkość 2 em, a nagłówek znajdu-
jący się w elemencie body ma wielkość 1,5 em, to wielkość tekstu nagłówka jest
półtora razy większa od rozmiaru tekstu elementu body (1,5 × 2 × 16 px = 48 px).
Wartości procentowe w pewnym stopniu przypominają wartości em: znacznik
główny dokumentu, dziedziczenie i relacja między rodzicem a dzieckiem w CSS
określają wielkość pisma każdego elementu. W powyższym przykładzie można by
równie dobrze nadać tekstowi elementu body rozmiar 200 , a nagłówka 150
— wynik byłby taki sam (48 px).
W niektórych sytuacjach określenie właściwości min-width i max-width
wartościami procentowymi i jednostkami em pomaga w zachowaniu czytelnej dłu-
gości wiersza. Średnia szerokość znaków to na ogół dwie trzecie firetu, wobec czego
wartość idealnej długości wiersza mieści się pomiędzy 30 a 50 em.
Ponieważ Internet Explorer 6 nie umożliwia użytkownikom skalowania tekstu
o wielkości określonej pikselami, zaleca się korzystać z wartości procentowych
i jednostek em.
Ponieważ Internet Explorer 6 nie umożliwia użytkownikom skalowania tekstu o wiel-
kości określonej pikselami, zaleca się korzystać z wartości procentowych i jednostek
em. Uważaj jednak przy używaniu jednostek względnych w składzie; zastosuj jakąś
skalę lub hierarchię (o czym przeczytasz dalej), aby mieć pewność, że elementy tek-
stowe o różnym ciężarze są dokładnie odwzorowywane i odpowiednio wyświetlane.
W praktyce rzadko używa się innych jednostek względnych. Jednostka „ex” oraz
słowa kluczowe smaller i larger (które zmniejszają i zwiększają stopień pisma
o 1,2 em) są wprawdzie powszechnie obsługiwane, lecz nie pojawiają się często w ar-
kuszach stylów. Zauważ, że punkty (pt) przydają się w arkuszach tworzonych na
potrzeby drukowania, ale nie powinno się ich używać przy składaniu tekstu wy-
świetlanego na ekranie. Drobne różnice w domyślnych ustawieniach przeglądarek
66
Typografia internetowa: zasady, wskazówki i najczęstsze błędy
The Smashing Book.indd 66
2012-12-06 18:52:34
użytkowników mogą bowiem spowodować pojawienie się niepożądanych typogra-
ficznych efektów ubocznych. Aby mieć pewność, że tekst będzie wyglądać jednako-
wo niezależnie od przeglądarki, użyj kodu CSS do wyzerowania wszystkich wartości
i utworzenia niezależnego środowiska, które będzie się sprawdzać w różnych prze-
glądarkach. Istnieją różne sposoby na wyzerowanie ustawień w CSS — od najprost-
szego * { padding: 0; margin: 0; } po dość rozbudowane, takie jak Reset
Stylesheet Erica Meyera4.
Przestrzeń negatywna jest przydatna
Przestrzeni negatywnej w typografii internetowej nie sposób przecenić. Pusta prze-
strzeń daje tekstowi „miejsce na oddech” oraz ułatwia czytelnikowi przyswajanie
informacji. Przestrzeń negatywna znajduje się między poszczególnymi elementami
kompozycji i jej niewidocznymi obszarami: w odstępach między obrazami, margi-
nesach i kolumnach (makroprzestrzeń), a także w wierszach, wyrazach i podpisach
obrazów (mikroprzestrzeń).
Uwaga, jaką przywiązano do szczegółów typograficznych, w tym zwłaszcza do pustej przestrzeni,
w portfolio Elliota Jaya Stocksa jest niesamowita. Zwróć uwagę na wyważone zastosowanie aktywnej
przestrzeni negatywnej w celu wyróżnienia cytatu blokowego oraz pasywnej przestrzeni w akapicie
4 http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
Typografia internetowa: zasady, wskazówki i najczęstsze błędy
67
The Smashing Book.indd 67
2012-12-06 18:52:35
Przestrzeń negatywna, która prowadzi czytelnika od jednego elementu do dru-
giego, organizuje kompozycję i strukturyzuje informacje, nosi nazwę „aktywnej
przestrzeni negatywnej”, a ta, która reguluje formę bloku tekstowego, jest „pasywną
przestrzenią negatywną”.
W praktyce istnieje wiele problemów z czytelnością i użytecznością, które można
rozwiązać, a przynajmniej złagodzić rozsądnym i wyważonym wykorzystaniem pu-
stej przestrzeni. Zaledwie kilka dodatkowych pikseli dopełnienia, marginesu, długo-
ści wiersza lub interlinii może znacząco wpłynąć na ogólną czytelność treści. Ponadto
wcięcie cytatów, obrazów i list nie tylko wzmacnia strukturę i wygląd layoutu, ale
także może dodać całej kompozycji dynamizmu i siły wyrazu.
Strona z portfolio ClapClap jest zdominowana przez przestrzeń negatywną, która zwraca
uwagę na jakość przedstawianych produktów, uwypukla je i nadaje im charakter
Kiedy odpowiednia równowaga między treścią a otaczającą ją przestrzenią nie
jest zachowana, tekst staje się trudniejszy do odczytania i przeglądania, co wywołuje
u czytelnika frustrację i niepewność co do sensu informacji. Ta zasada sprawdza się
zwłaszcza w sieci, gdzie wielu designerów zapełnia przestrzeń „nad zgięciem” w ce-
lu przyciągnięcia uwagi użytkownika. Tak skonstruowane witryny są zabałaganione
i niewygodne w użyciu, przy czym designerzy z całą pewnością nie dążą do uzyskania
takiego efektu. Z perspektywy użytkownika pusta przestrzeń dostarcza wskazówek
i punktów zaczepienia, które zwiększają przyjemność odczytywania treści oraz spra-
wiają, że są one bardziej intuicyjne.
68
Typografia internetowa: zasady, wskazówki i najczęstsze błędy
The Smashing Book.indd 68
2012-12-06 18:52:35
Niektórzy designerzy twierdzą, że w kompozycji nie powinno się znajdować za
dużo pustej przestrzeni. To nie zawsze prawda, jako że spójność bloków tekstu jest
nieodzownym warunkiem uzyskania zrównoważonej kompozycji. Wyważenie pozy-
tywnej i negatywnej przestrzeni jest kluczem do stworzenia pięknego, harmonijnego
i estetycznego projektu. Jak to ujął Mark Boulton w jednym ze swoich artykułów:
„Kiedy już nauczysz się tworzyć przestrzeń i manipulować nią zarówno w obrębie
treści, jak i poza nią, będziesz mógł dostarczyć czytelnikom odpowiednich wskazó-
wek, dokładniej pozycjonować produkty, a być może nawet ujrzeć swoje materiały
w zupełnie nowym świetle”5.
Typografia i siatki
Siatka typograficzna jest dwuwymiarową strukturą składającą się z serii przecinają-
cych się poziomych i pionowych osi służących do organizowania treści. Prawidłowo
zastosowana siatka pełni funkcję szkieletu, za pomocą którego designer może rozmie-
ścić tekst i obrazy w racjonalny, intuicyjny i naturalny sposób. To nieuchwytna dusza
projektu, która decyduje o jego rytmie, porządku i spójności; często jest używana
przez designerów, którzy chcą się rozeznać, jak rozmieścić informacje i ujarzmić swój
popęd twórczy. Siatek używa się też często wtedy, kiedy trzeba szybko uporządkować
elementy graficzne. Siatka jest najbardziej wyrazistym przejawem woli do zachowa-
nia porządku w projektowaniu graficznym.
Zamiast zdawać się na intuicję przy obmyślaniu, jak rozmieścić elementy, za po-
mocą siatek można matematycznie określić ich położenie w obrębie sztywnej, dwuwy-
miarowej struktury — wiadomo wtedy, gdzie coś powinno się znajdować. Większość
webdesignerów jest zdania, że siatkę należy utworzyć jeszcze przed rozmieszczeniem
treści. Problem polega na tym, by znaleźć równowagę między siatką a charakterem
samej treści. Niektórzy twierdzą, że siatki tłumią zmysł twórczy, ale dla innych są
one wartościowym systemem, który wymusza na designerach dbałość o szczegóły
i dążenie do perfekcji.
Designer zwykle zaczyna opracowanie opartych na siatkach kompozycji od zera,
czyli od pustego obszaru roboczego lub czystej kartki. Szukając odpowiedniej siatki,
designer w oparciu o ogólne zasady i formuły kompozycyjne (np. złotą proporcję,
zasadę trójek) dzieli kartkę na harmonijne sekcje i dobiera naturalnie estetyczne pro-
porcje stron i kolumn. Wreszcie, eksperymentuje z marginesami, by uzyskać idealną,
dynamiczną strukturę typograficzną. Wtedy pozostaje już tylko uzupełnić strukturę
o treść, uzależniając wszelkie decyzje kompozycyjne od sztywnych ograniczeń siatki.
5 http://www.alistapart.com/articles/whitespace/
Typografia internetowa: zasady, wskazówki i najczęstsze błędy
69
The Smashing Book.indd 69
2012-12-06 18:52:35
Blueprint jest jednym z wielu frameworków CSS, które ułatwiają opracowanie stron w oparciu
o siatki. Można też skorzystać z Typogridphy (opartego na 960.gs), YUI Grids i YAMI
Co ciekawe, jak to ujął Mark Boulton w artykule „Five simple steps to designing
grid systems”6: „Takie podejście sugeruje, że rzeczy zaprojektowane z myślą o estetyce
są automatycznie łatwiejsze w użyciu” (co określa się mianem Aesthetic Usability Ef-
fect — z ang. „efekt estetycznej użyteczności”). Wyważona kompozycja jest z natury
bardziej zadowalająca estetycznie, a zatem łatwiejsza w użyciu i bardziej sprzyjająca
komunikacji z odbiorcą.
Za najpopularniejszy rozkład siatki można uznać taki, który jest oparty na złotej
proporcji. Aby zadowolić gości przyjemną i intuicyjną kompozycją, rozważ wykorzy-
stanie jej przy podziale obszaru roboczego. Złota proporcja jest stosunkiem określają-
cym rozmieszczenie obiektów względem siebie, a wynoszącym 1,618033988749895
≈ 1,618. Z potęgą tej proporcji można się zetknąć niemal w każdym miejscu we
wszechświecie.
6 http://www.markboulton.co.uk/journal/comments/simple_steps_to_designing_grids/
70
Typografia internetowa: zasady, wskazówki i najczęstsze błędy
The Smashing Book.indd 70
2012-12-06 18:52:36
Utworzenie layoutu opartego na złotej proporcji
Rozważmy przykład, który widnieje powyżej. Chcemy utworzyć layout o usta-
lonej szerokości. Szerokość całego layoutu to 960 pikseli. Treść chcielibyśmy zawrzeć
w szerszym bloku ( content ), a pasek boczny w węższym ( aside ). Jak wyli-
czyć szerokość kolumn?
• Najpierw należy obliczyć szerokość bloku content , tak by jej stosunek
do szerokości całego layoutu wynosił 1,62. Dzieląc 960 pikseli przez 1,62,
uzyskujemy szerokość około 593 pikseli.
• Następnie odejmujemy 593 piksele od szerokości layoutu (960 pikseli), co
daje 367 pikseli (960 px – 593 px = 367 px).
• Gdybyśmy teraz obliczyli stosunek szerokości content do aside
(593 px / 367 px ≈ 1,615) oraz szerokości layoutu do bloku content
(960 px / 593 px ≈ 1,618), to otrzymalibyśmy mniej więcej tę samą wartość.
Oto właśnie sens złotej proporcji. To samo dotyczy też płynnych i elastycznych
layoutów.
Oczywiście nie ma żadnego przymusu korzystania ze złotej proporcji. W osta-
tecznym rozrachunku liczy się jedynie rezultat, który powinien mieć spójną struktu-
rę, a złota proporcja jest tylko jednym ze środków do osiągnięcia tego celu. Można
też używać płynnych siatek, o których przeczytasz w rozdziale o layoutach.
Typografia internetowa: zasady, wskazówki i najczęstsze błędy
71
The Smashing Book.indd 71
2012-12-06 18:52:36
Estetyczny projekt oparty na siatce, skoncentrowany na typografii — widok z siatką
i bez. Stworzony przez Marka Boultona i Khoi Vinha na potrzeby prezentacji
„Grids are Good” (http://www.subtraction.com/2007/03/19/oh-yeeaahh)
72
Typografia internetowa: zasady, wskazówki i najczęstsze błędy
The Smashing Book.indd 72
2012-12-06 18:52:38
Rytm pionowy
Typograf Robert Bringhurst stwierdził kiedyś, że „przestrzeń w typografii jest jak
czas w muzyce. Można ją dzielić w nieskończoność, ale z kilku proporcjonalnych
odstępów jest dużo więcej pożytku niż z nieskończonego wyboru arbitralnie dobra-
nych interwałów”. Wykorzystanie czasu w muzyce w uregulowany sposób nazywamy
rytmem. W typografii i webdesignie uregulowane wykorzystanie przestrzeni prowa-
dzi nas do założeń pracy z siatkami i rytmem pionowym. Podobnie jak harmonię
w muzyce można uzyskać jedynie poprzez zastosowanie proporcjonalnych interwa-
łów, harmonię w typografii może zapewnić jedynie wykorzystanie odstępów o odpo-
wiednich proporcjach.
Rytm pionowy w artykule „Setting Type on the Web to a Baseline Grid”7 Wilsona Minera
Dla zobrazowania pojęcia pionowego rytmu wyobraź sobie typowy podręcznik
z ćwiczeniami, w którym tekst jest rozmieszczony w wierszach. Linie główne są roz-
mieszczone w równej odległości od siebie. Jeżeli tekst idealnie „siedzi” na liniach
głównych (tj. linie główne dokładnie pokrywają się z liniami głównymi tekstu), to
można powiedzieć, że projekt charakteryzuje się jednolitą równowagą pionową. Od-
nosi się to nie tylko do głównej treści, ale także do nagłówków, przypisów i notatek
7 http://www.alistapart.com/articles/settingtypeontheweb/
Typografia internetowa: zasady, wskazówki i najczęstsze błędy
73
The Smashing Book.indd 73
2012-12-06 18:52:38
na marginesie. Gdybyś położył w tle layoutu kartkę w linię i użył jej jako zbioru
niewidzialnych linii pomocniczych do układania tekstu, to uzyskałbyś layout o pio-
nowym rytmie. Rzecz jasna, wertykalnie rytmiczny tekst łatwiej się czyta i przegląda,
ponieważ wydaje się „siedzieć” we właściwym miejscu.
Nieodzownym czynnikiem utrzymania rytmu pionowego jest interlinia, czyli
odległość między dwiema liniami głównymi. Właściwość line-height w CSS
w zasadzie definiuje siatkę, która określa rytm tekstu, dając czytelnikowi subtelne
wskazówki kierujące jego wzrok po płynnej, regularnej ścieżce. Ponieważ rytm wer-
tykalny odnosi się do wielkości pisma, naturalnym rozwiązaniem jest określenie in-
terlinii względnymi wartościami em. Miłym efektem ubocznym jest to, że wyważenie
layoutu jest widoczne w kompozycji niezależnie od tego, jaki w niej wykorzystano
krój, styl czy rozmiar tekstu.
Aby utrzymać pionowy rytm w CSS, należy sprawić, by odstępy między elemen-
tami i interlinią były takie same jak rozmiar siatki linii głównych. Jeśli na przykład
używasz 18-pikselowej siatki linii głównych (tj. odstęp między dwiema liniami bazo-
wymi wynosi 18 pikseli), to interlinia też powinna być 18-pikselowa, tak samo jak
światło między akapitami. Oto przykład:
body {
font-family: Arial, sans-serif;
font-size: 0.625em;
/* tekst ma teraz wielkość 0,625 × 16px = 10px */
line-height: 1.8em;
/* interlinia ma teraz wielkość 18 pikseli */
}
Gdybyś chciał na przykład oddzielić akapity pustym wierszem, musiałbyś utwo-
rzyć odpowiedni margines o wielkości interlinii. W innym wypadku wyglądałoby to
tak, jakby akapit był nieodpowiednio położony.
p {margin-bottom: 1.5em; }
Rzecz jasna, możesz poeksperymentować z przestrzenią pionową, aby zwiększyć
dynamizm na stronie i sprawić, że rytm tekstu będzie mniej przewidywalny. Każdą
wariację należy jednak wprowadzić z uwzględnieniem rytmu pionowego i odnieść
do interlinii. Ponadto inne elementy tekstowe (nagłówki, przypisy, obrazy, podpisy
obrazów itp.) zawsze powinny mieć rozmiar będący jakąś wielokrotnością interlinii.
Tę relację można wyrazić następującym wzorem:
podstawowa interlinia/wielkość tekstu nagłówka = interlinia nagłówka
74
Typografia internetowa: zasady, wskazówki i najczęstsze błędy
The Smashing Book.indd 74
2012-12-06 18:52:38
W pracy nad projektem warto skorzystać z przedstawiającego linie siatki obrazu
tła. W praktyce uzyskanie rytmu pionowego nie zawsze jest możliwe, zwłaszcza kiedy
trzeba sobie radzić z wieloma obrazami o różnych rozmiarach. Tym niemniej i tak
warto starać się utrzymać rytm choćby częściowo — nawet tyle wystarczy, żeby zna-
cząco ulepszyć stronę.
Tradycyjna skala typograficzna
Hierarchia i skala
W każdym układzie typograficznym musi panować jakaś hierarchia. Hierarchia
w swojej istocie zwiększa czytelność, gdyż daje jasne wskazówki wizualne co do struk-
tury i organizacji tekstu. Hierarchia określa, jak należy odczytywać treść; pokazuje
użytkownikowi, gdzie zacząć, a gdzie skończyć; odróżnia nagłówki od tekstu główne-
go. Choć szarość tekstu można wykorzystać do skontrastowania nagłówków i tekstu
głównego, hierarchia wskazuje na różnicę wielkości tych elementów. Hierarchia ma
duże znaczenie dla przejrzystości layoutu i jest ważnym czynnikiem wpływającym
na czytelność typografii internetowej. Jeff Croft w prezentacji „Elegant Web Typo-
graphy” zwrócił uwagę, że tekst tradycyjnie składano z uwzględnieniem określonej
skali. Warto zrozumieć, że relacje między różnymi wielkościami tekstu w obrębie
kompozycji są istotne. Aby stworzyć dobrą hierarchię tekstu, zawsze opieraj się na
jakiejś skali — czy to tradycyjnej:
6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24, 36, 48, 60, 72
czy takiej, którą sam z zamysłem stworzyłeś. Skala zapewnia harmonijność i spój-
ność tekstu. Niektórzy designerzy przy definiowaniu wielkości nagłówków i tekstu
głównego wolą korzystać z ciągu Fibonacciego (np. 16 – 24 – 40 – 64 – 104)8.
8 Ciąg Fibonacciego jest spiralą wzrostu, w której suma każdej pary równa się kolejnej liczbie ciągu:
16+24 = 40; 24+40 = 64 itp. Ponieważ ciągi Fibonacciego pomagają designerom w uzyskiwaniu złotej
proporcji, często używa się ich do ulepszania estetyki kompozycji.
Typografia internetowa: zasady, wskazówki i najczęstsze błędy
75
The Smashing Book.indd 75
2012-12-06 18:52:38
Oto przykład prostej skali typograficznej zdefiniowanej w CSS:
body {
font-size: 0.625em;
/* ponieważ domyślny rozmiar tekstu w przeglądarce to 16 pikseli, zmniejszyliśmy wielkość tekstu
elementu body do 10 pikseli, co ułatwia obliczenia */
}
p { font-size: 1.4em; /* 14px */ }
h1 { font-size: 4.8em; /* 48px */ }
h2 { font-size: 3.6em; /* 36px */ }
h3 { font-size: 2.4em; /* 24px */ }
h4 { font-size: 2.1em; /* 21px */ }
h5 { font-size: 1.8em; /* 18px */ }
h6 { font-size: 1.6em; /* 16px */ }
Na stronie AIGA panuje ładna, przejrzysta i intuicyjna hierarchia, uzyskana
poprzez subtelne wykorzystanie koloru, stopni pisma i interlinii
76
Typografia internetowa: zasady, wskazówki i najczęstsze błędy
The Smashing Book.indd 76
2012-12-06 18:52:39
Rzecz jasna, aby uzyskać odpowiednią hierarchię typograficzną kompozycji, nie
musisz się ograniczać do pracy nad samą wielkością tekstu; możesz używać kolorów,
różnych stylów liter (m.in. inicjałów, wersalików, kapitalików), kursywy i innych ele-
mentów, aby wskazać czytelnikowi strukturę treści oraz względny ciężar znajdujących
się na stronie bloków tekstu (tak jak na stronie AIGA, którą widać powyżej).
Stylizacja akapitów
Akapity można potraktować jako znaki interpunkcyjne większych ciągów myślo-
wych. Typografowie wykorzystują elementy takie jak jednowierszowe odstępy, wcię-
cia, znaki paragrafu oraz inne ornamenty, „wycięcia” i inicjały do wyróżniania aka-
pitów z tego ciągu.
Odstęp jednowierszowy jest dziś w sieci najczęściej używanym do wyróżniania
akapitów elementem i najczęściej występującym w przeglądarkach stylem domyśl-
nym. Ogólnie rzecz biorąc, wcięcie wciąż jest najczęściej wykorzystywanym separa-
torem w wydawnictwach drukowanych. Pod pewnymi względami konwencje doty-
czące formatowania akapitów i tworzenia wcięć idealnie ilustrują rozbieżność między
siecią a drukiem. W druku koszty wciąż są istotną kwestią, podczas gdy w internecie
problemów z kosztami w ogóle nie ma. Ostatecznie użyteczność jest jedynym stan-
dardem, wobec którego ocenia się typografię internetową.
Jeżeli używasz wcięć, to powinieneś mieć na uwadze konwencję
nakazującą pominięcie wcięcia w akapicie następującym bezpośrednio
po nagłówku lub podtytule.
Jeżeli używasz wcięć, to powinieneś mieć na uwadze konwencję nakazującą pominię-
cie wcięcia w akapicie następującym bezpośrednio po nagłówku lub podtytule. Trady-
cja nakazuje również, by nie tworzyć wcięć w akapitach następujących po listach i wy-
dzielonych cytatach. Taki efekt można uzyskać bez wykorzystywania nadmiaru kodu,
używając selektorów rodzeństwa. Jeśli na przykład już nadałeś akapitom wcięcia:
p { text-indent: 2.5em; }
to możesz usunąć je z akapitów znajdujących się po nagłówkach od h1 do h3:
h1 + p, h2 + p, h3 + p { text-indent: 0; }
Sęk w tym, że należy to robić tylko wtedy, gdy cytaty i wcięcia są wyrówna-
ne do lewej z wysuniętymi znakami interpunkcyjnymi. Robert Bringhurst twierdzi,
że „jeśli wcięcia akapitów są umiarkowanie duże, to dla spójności można wykorzy-
stać takie same wcięcia przy cytatach”. To samo można odnieść do list na stronach
Typografia internetowa: zasady, wskazówki i najczęstsze błędy
77
The Smashing Book.indd 77
2012-12-06 18:52:39
internetowych. W obydwu przypadkach trzeba wprowadzić odstęp, by oddzielić listy
i cytaty od otaczających je akapitów.
Wszystkie przeglądarki mogą się pochwalić dobrą obsługą podstawowych sty-
lów akapitów, ale złożona obsługa inicjałów może już sprawiać problemy. Niektóre
przeglądarki wciąż jeszcze nie obsługują w pełni pseudoselektorów i selektorów są-
siadującego rodzeństwa. Możliwość wskazywania fontów do wykorzystania w tekście
głównym też jest ograniczona, a niespójności w renderowaniu tekstu na przestrzeni
różnych platform i przeglądarek niezmiennie ograniczają możliwości twórcze oraz
zmniejszają precyzję.
W artykule „The Paragraph in Web Typography and Design”9 Jon Tan omawia
inne sposoby stylizacji i przedstawia fragmenty kodu CSS, który można wykorzystać
w projektach.
Akapity nie muszą być nudne. W tym przykładzie pierwszy wiersz pierwszego akapitu jest wyrównany
do lewej, ale pierwsze wiersze kolejnych akapitów mają wcięcie o wielkości 1 em. Same akapity
są zaś ułożone w chorągiewki do lewej i oddzielone odstępami o wielkości połowy interlinii
9 http://jontangerine.com/silo/typography/p/
78
Typografia internetowa: zasady, wskazówki i najczęstsze błędy
The Smashing Book.indd 78
2012-12-06 18:52:39
Wprowadzony tutaj inicjał nie podlega regulacji w pionie; akapity nie są wyjustowane
i nie są oddzielone odstępami
Wprowadzony tutaj wiszący inicjał nie podlega regulacji w pionie; akapity są wyjustowane
i oddzielone odstępami o wielkości połowy interlinii
Typografia internetowa: zasady, wskazówki i najczęstsze błędy
79
The Smashing Book.indd 79
2012-12-06 18:52:40
Fonty
Do najbardziej irytujących aspektów współczesnej typografii internetowej należą
ograniczenia, z jakimi designer musi się zmierzyć, kiedy chce stworzyć bogaty, dzia-
łający na różnych przeglądarkach i spójny projekt. Ze względu na zróżnicowanie
domyślnie zainstalowanych fontów w różnych systemach operacyjnych trudno prze-
widzieć, czy komputer użytkownika będzie wyświetlał dane fonty prawidłowo, czy
też stworzy szum typograficzny, co zmniejszy czytelność tekstu oraz sprawi, że poru-
szanie się po layoucie stanie się trudniejsze.
Rzecz jasna, zawsze można ograniczyć wybór fontów do tych, które należą do
zbioru „Core Web fonts” („podstawowych fontów internetowych”) — dziesięciu
fontów zaprojektowanych w latach dziewięćdziesiątych i dwutysięcznych jako stan-
dardowy pakiet fontów przeznaczonych do używania w sieci. Obecnie są one do-
myślnie zainstalowane na ponad 95 komputerów na całym świecie, przez co często
są preferowanymi krojami dla tekstu głównego.
Podstawowe fonty internetowe i ich autorzy
Te fonty to Andale Mono (krój nieproporcjonalny bezszeryfowy), Arial (bez-
szeryfowy), Comic Sans MS (pisanka), Courier New (nieproporcjonalny szeryfowy
linearny), Georgia (szeryfowy), Impact (bezszeryfowy), Times New Roman (szeryfo-
wy), Trebuchet MS (humanistyczny bezszeryfowy), Verdana (humanistyczny bezsze-
ryfowy) oraz Webdings (dingbat).
W ostatnich latach popularność zyskały także Palatino (krój humanistyczny sze-
ryfowy, obecny na Macintoshach), Helvetica (bezszeryfowy), Lucida Sans Unicode
(bezszeryfowy), Tahoma (humanistyczny bezszeryfowy) i Lucida Grande (humani-
styczny bezszeryfowy).
Georgia, niektóre fonty Lucida, Monaco, Trebuchet i Verdana zostały opracowa-
ne z myślą o wykorzystaniu na ekranie w celu zwiększenia czytelności tekstu w sieci.
Tak samo jak osławiony Times New Roman, fonty Arial, Lucida, Georgia i Trebuchet
80
Typografia internetowa: zasady, wskazówki i najczęstsze błędy
The Smashing Book.indd 80
2012-12-06 18:52:40
sprawdzają się najlepiej w rozmiarze od 26 pikseli wzwyż oraz w charakterze estetycz-
nych nagłówków. Verdana, Georgia, Lucida i Arial są z kolei popularnym wyborem
dla tekstu głównego. W większości przypadków trzeba jednak pamiętać o szczegóło-
wym określeniu interlinii i długości wiersza; wybór fonta to dopiero początek.
W Windows Vista i Microsoft Office 2007 wprowadzono zbiór ClearType Font
Collection 2007, który składa się z sześciu nowych domyślnie zainstalowanych fon-
tów: Calibri (krój humanistyczny bezszeryfowy), Cambria (szeryfowy), Candara (hu-
manistyczny bezszeryfowy), Consolas (nieproporcjonalny), Constantia (szeryfowy)
i Corbel (bezszeryfowy). Choć mało kto z nich korzysta, są one domyślnie zainsta-
lowane na większości współczesnych komputerów używających systemu Windows.
Można je też zainstalować na Macintoshu.
Zauważ, że wiele pakietów oprogramowania automatycznie instaluje dodatko-
we fonty. Przykładowo Office 2003 instaluje ponad sto nowych krojów. Oczywiście
nie wszystkie z nich są szczególnie wysublimowane i nie wszystkie sprawdzają się
w internecie, ale trzeba przyznać, że dają przynajmniej większy wybór. Możesz też
rzucić okiem na „Font Matrix”10 Richarda Ruttera, gdzie znajduje się lista fontów
dołączanych do różnych wersji Macintoshów, Windows, Microsoft Office i Adobe
Creative Suite.
Stosy fontów w CSS
O ile wybór „bezpiecznych” fontów jest ograniczony, to nic nie stoi na przeszkodzie,
by umieścić w arkuszu inne kroje. Stos fontów CSS to lista preferowanych czcionek
określonych atrybutem CSS font-family, na podstawie której przeglądarka użyt-
kownika wybiera krój, w jakim ma być wyświetlony dany tekst — jest to pierwszy
krój na liście, którego font jest zainstalowany na komputerze.
Jeżeli chcesz na przykład użyć kroju Baskerville, to możesz go podać w stosie
fontów CSS wraz z jego zamiennikami:
body { font-family: Baskerville, Times New Roman, Times,
serif;
}
Jeśli na komputerze użytkownika nie ma fonta Baskerville, przeglądarka spraw-
dza, czy dostępny jest font z kolejnej pozycji — Times New Roman, następnie Ti-
mes, a jeśli żadnego z nich nie znajduje, to wybiera dowolny font szeryfowy.
10 http://24ways.org/2007/increase-your-font-stacks-with-font-matrix
Typografia internetowa: zasady, wskazówki i najczęstsze błędy
81
The Smashing Book.indd 81
2012-12-06 18:52:40
Najczęściej występujące we wszystkich systemach fonty według „Combined
font survey results” Codestyle.org z kwietnia 2012 roku11
Nathan Ford wspomina w artykule „Better CSS Font Stacks”12, że przy tworze-
niu stosu fontów należy przede wszystkim dokładnie przemyśleć, jaką rolę pełni dany
fragment tekstu. Jedne fonty sprawdzają się lepiej w tekście głównym, a inne w na-
główkach. W pierwszej kolejności powinieneś zatem rozsądzić, czy dany fragment
tekstu jest nagłówkiem, śródtytułem, czy akapitem. Stos fontów powinien na ogół
przestrzegać następującego schematu:
font-family: idealny, zamiennik, powszechny, dowolny;
„Idealny” krój nagłówka nie musi być koniecznie „bezpieczny”, więc możesz się
rozejrzeć za różnymi możliwościami. Wiele fontów zdołało się szeroko upowszech-
nić, więc użytkownicy zwykle nimi dysponują — chyba że wybrałeś jakiś rzeczywiście
11 http://www.codestyle.org/css/font-family/sampler-CombinedResults.shtml
12 http://unitinteractive.com/blog/2008/06/26/better-css-font-stacks/
82
Typografia internetowa: zasady, wskazówki i najczęstsze błędy
The Smashing Book.indd 82
2012-12-06 18:52:40
nietypowy. „Idealny” krój tekstu głównego to taki, który pasuje do ogólnej kompo-
zycji i jest czytelny.
„Zamienniki” w przypadku tytułów i bloków tekstowych zwykle przypominają
kroje idealne (pod względem kształtu i typu), ale są bardziej popularne i szerzej
dostępne.
„Powszechny” krój jest podobny do pierwszych dwóch, lecz nie dzieli z nimi
specyficznych cech; zwykle jest prostszy i mało charakterystyczny.
Wreszcie, krój „dowolny” jest krojem zapasowym, który umożliwia wyświetlenie
tekstu, w przypadku gdy żaden z innych fontów nie jest dostępny na komputerze
użytkownika.
Oto przykłady popularnych stosów fontów dla nagłówków:
• Baskerville, Palatino Linotype, Times, Times New Roman, serif;
• Cambria, Georgia, Times, Times New Roman, serif;
• Franklin Gothic Medium, Arial Narrow Bold, Arial, sans-serif;
• Futura, Century Gothic, AppleGothic, sans-serif;
• Garamond, Hoefler Text, Palatino, Palatino Linotype, serif;
• Geneva, Verdana, Lucida Sans, Lucida Grande, Lucida Sans Unicode,
sans-serif;
• Georgia, Times, Times New Roman, serif;
• GillSans, Trebuchet, Calibri, sans-serif;
• Helvetica, Helvetica Neue, Arial, sans-serif;
• Lucida Sans, Lucida Grande, Lucida Sans Unicode, sans-serif;
• Palatino, Palatino Linotype, Hoefler Text, Times, Times New Roman, serif;
• Trebuchet, Tahoma, Arial, sans-serif;
• Verdana, Tahoma, Geneva, sans-serif.
Oto przykłady popularnych stosów fontów dla tekstu głównego:
• Arial, Helvetica Neue, Helvetica, sans-serif;
• Baskerville, Georgia, Cambria, Times, Times New Roman, serif;
• Cambria, Georgia, Times, Times New Roman, serif;
• Century Gothic, Apple Gothic, sans-serif;
• Consolas, Lucida Console, Monaco, monospace;
• Courier New, Courier, monospace;
• Futura, Century Gothic, AppleGothic, sans-serif;
Typografia internetowa: zasady, wskazówki i najczęstsze błędy
83
The Smashing Book.indd 83
2012-12-06 18:52:40
Travis Gertz wykorzystuje w swoich eksperymentach różne stosy fontów CSS, przedstawiając
użytkownikom piękne wykorzystanie typografii w designie. W powyższym przykładzie Helvetica Neue
została wykorzystana do wyświetlenia tekstu głównego, a Baskerville do dat, nagłówków i cytatów
• Geneva, Lucida Sans, Lucida Grande, Lucida Sans Unicode, Verdana,
sans-serif;
• Georgia, Palatino, Palatino Linotype, Times, Times New Roman, serif;
• GillSans, Calibri, Trebuchet, sans-serif;
• Helvetica Neue, Arial, Helvetica, sans-serif;
• Lucida Sans Unicode, Lucida Grande, Lucida Sans, Verdana, Arial, sans-serif;
• Palatino, Palatino Linotype, Georgia, Times, Times New Roman, serif;
• Times, Times New Roman, Georgia, serif;
• Trebuchet, Lucida Sans Unicode, Lucida Grande, Lucida Sans, Arial,
sans-serif;
• Verdana, Geneva, Tahoma, sans-serif.
84
Typografia internetowa: zasady, wskazówki i najczęstsze błędy
The Smashing Book.indd 84
2012-12-06 18:52:40
Przy tworzeniu stosu fontów trzeba zwrócić uwagę na to, czy podane kroje nie są
przypadkiem za mało rozpowszechnione, oraz sprawdzić, czy zamienniki i powszech-
nie dostępne fonty też sprawdzają się w kompozycji. Zamieszczanie bardzo różnych
fontów w stosie zwykle nie jest dobrym pomysłem, ponieważ zróżnicowanie stopnia
pisma, długości wiersza i interlinii może przynieść nieoczekiwane rezultaty — być
może nawet sprawić, że nagłówki i tekst przestaną być czytelne, czy wręcz rozłożyć
layout. Wreszcie, musisz uwzględnić możliwość wystąpienia sytuacji, w której wy-
korzystany będzie np. drugi font ze stosu fontów nagłówków i trzeci font ze stosu
fontów tekstu głównego. Czy tekst byłby w takich warunkach klarowny i łatwy do
odczytania? Co z innymi kombinacjami? Przemyślenie sprawy na samym początku
pozwala na uniknięcie problemów później.
Przemyślenie sprawy na samym początku pozwala na uniknięcie
problemów później.
Techniki podmiany tekstu
Choć fonty ze zbioru „Core Web fonts” pozwalają na spójną i niezależną od platformy
pracę z typografią, niektórzy designerzy wolą eksperymentować z nietypowymi usta-
wieniami tekstu dla uzyskania niekonwencjonalnych efektów. Istnieją różne techniki
zastępowania zwykłego tekstu na stronie obrazem lub filmem, który osadza wybrany
font i pokazuje go użytkownikowi — to istotne, zwłaszcza jeśli na urządzeniu użyt-
kownika dany font nie jest zainstalowany. Techniki te są zwykle oparte na obsłudze
JavaScriptu po stronie klienta i skryptach działających po stronie serwera, które na
bieżąco generują zagnieżdżany tekst, zapewniając, że jest on dostępny i czytelny.
Można ogólnie mówić o czterech rodzajach technik podmiany tekstu:
• Statyczna podmiana przy użyciu obrazu, gdzie designer zwyczajnie zastę-
puje tekst obrazem, na którym znajduje się ten tekst, jednocześnie pilnując,
by właściwa treść była przyjazna dla wyszukiwarek. Techniki zastępowania
tekstu obrazem Radu, Pharka i Malarkeya przewidują — kolejno — wpro-
wadzanie dużych ujemnych marginesów, odstępów międzyliterowych i wcięć
do ukrycia tekstu, a także wykorzystanie właściwości background do wy-
świetlenia obrazu. Zauważ, że wykorzystanie samego elementu img do wy-
świetlania treści tekstowych (bez zastosowania podanych powyżej technik
podmiany tekstu) wiąże się ze złamaniem zasady tworzenia semantycznego
kodu HTML, wobec czego należy tego unikać.
Typografia internetowa: zasady, wskazówki i najczęstsze błędy
85
The Smashing Book.indd 85
2012-12-06 18:52:40
• Dynamiczna podmiana przy użyciu obrazu, która idzie o krok dalej niż
podmiana statyczna, automatyzując tworzenie obrazów przy użyciu Java-
Scriptu (po stronie klienta) lub PHP (po stronie serwera). Projektant wczy-
tuje plik z fontem na serwer, gdzie skrypt generuje obrazy mające zastępować
tekst. Do wykorzystujących tę metodę technik należą Scalable Inline Im-
age Replacement, Dynamic Text Replacement, Facelift Image Replacement
i Scalable Jens Image Replacement.
• Dynamiczna podmiana przy użyciu filmu, która polega na wykorzystaniu
animacji Flash z osadzonymi fontami. Animacje są przywoływane, kiedy tyl-
ko tekst ma być podmieniony (np. przy użyciu sIFR). Zaletą tej techniki
jest to, że tekst można zaznaczyć i skopiować. Niestety dzieje się to kosztem
wydłużenia czasu wczytywania strony, a żeby ta technika w ogóle mogła za-
działać, to przeglądarka użytkownika musi zapewniać obsługę Flasha i Java-
Scriptu. sIFR (ang. Scalable Inman Flash Replacement), pomimo że znacznie
ogranicza dostępność, pozostaje najbardziej znaną techniką podmiany tekstu
w sieci, oferowaną przez różne wtyczki i aplikacje.
sIFR w działaniu: font Meta Pro Book osadzony w filmie Flash
86
Typografia internetowa: zasady, wskazówki i najczęstsze błędy
The Smashing Book.indd 86
2012-12-06 18:52:40
Dave Shea przeprowadził eksperyment z Cufón: tekst główny jest zgrabniejszy i przyjemniej się go
czyta. Cufón i atrybut @font-face to obecnie najbardziej obiecujące techniki typograficzne w sieci
• Dynamiczna podmiana przy użyciu elementów canvas i VML, która jest
oparta na dwóch różnych częściach: generatorze fontów, który konwertuje
fonty na własnościowy format przy użyciu VML, oraz silniku graficznym.
Cufón13, który jest przykładem zastosowania tej techniki, nie wymaga żad-
nych wtyczek, jest kompatybilny z różnymi przeglądarkami i działa szybciej
niż porównywalne techniki. Jego zaletą jest to, że użytkownicy mogą zazna-
czyć i skopiować cały tekst na stronie bez zaznaczania podmienionego tekstu
osobno — coś takiego nie jest możliwe przy sIFR i pozostałych technikach.
Innym przykładem jest Typeface.js14.
13 http://wiki.github.com/sorccu/cufon
14 http://typeface.neocracy.org/
Typografia internetowa: zasady, wskazówki i najczęstsze błędy
87
The Smashing Book.indd 87
2012-12-06 18:52:40
Niezależnie od tego, na którą technikę się zdecydujesz, dopilnuj, by treść pozo-
stawała dostępna i czytelna także wtedy, kiedy Flash czy JavaScript nie są zainstalo-
wane lub aktywne w przeglądarce. Statyczna podmiana przy użyciu obrazów powo-
duje duże problemy z dostępnością. Dynamiczne techniki z kolei zwykle zwiększają
obciążenie serwera i czasami wymagają jakiejś formy buforowania. Tak czy inaczej,
Cufón i sIFR zyskują na popularności, a Cufón jest często preferowany ze względu
na jego kompatybilność międzyplatformową i niewielkie wymagania, pomimo że nie
jest tak elastyczny jak sIFR.
Atrybut @font-face
Osadzanie fontów przy użyciu technik podmiany tekstu często pochłania dużo czasu
i wiąże się z różnymi osobliwościami, ponieważ designerzy muszą zamieszczać fonty
w filmach Flash lub korzystać z działających po stronie serwera bibliotek do gene-
rowania obrazów z tekstem. Minusem tych technik jest to, że zwykle opierają się na
obsłudze JavaScript przeglądarki i są dość trudne w użyciu. Rzecz jasna, wbudowana
obsługa fontów przy użyciu zwykłego CSS byłaby wygodniejszym i bardziej intu-
icyjnym rozwiązaniem. Takim właśnie rozwiązaniem ma być atrybut @font-face
modułu CSS3 Web Fonts.
Osadzanie fontów przy użyciu @font-face odbywa się w dwóch krokach. Na-
leży zacząć od dodania nowego fonta do listy dostępnych fontów w arkuszu stylu
przy użyciu właściwości @font-face:
@font-face {
font-family: MuseoSans;
src: url( fonts/museo_sans.otf ) format ( opentype );
font-weight: bold;
}
W tym przykładzie designer podaje Museo Sans jako jeden z dostępnych fontów,
których przeglądarka może użyć do wyświetlenia tekstu. Następnie, aby obstylować
element tekstowy nowym fontem, podajemy go w deklaracji CSS:
h1 {
font-family: MuseoSans, Arial, sans-serif;
}
Przeglądarka wczytuje plik museo_sans.otf, którego używa do wyświetlenia na-
główków h1. Jeżeli przeglądarka nie obsługuje właściwości @font-face, to zostanie
88
Typografia internetowa: zasady, wskazówki i najczęstsze błędy
The Smashing Book.indd 88
2012-12-06 18:52:40
ona zwyczajnie zignorowana. Zauważ, że na serwer można wczytywać tylko dostępne
za darmo fonty, jako że są one udostępniane nie tylko przeglądarkom, ale i użytkow-
nikom, którzy mogą je z serwera pobrać. W umowie licencyjnej powinno być jasno
powiedziane, że font może być używany z atrybutem @font-face.
Typekit jest prostym rozwiązaniem, które oferuje licencję na linkowanie do
fontów w internecie, umożliwiając designerowi zamieszczanie komercyjnych
fontów na stronach (zrzut autorstwa Andy’ego Clarka)
Można skorzystać również z Typekit15 i Fontdeck16. Obydwie usługi oferują pro-
ste rozwiązanie, polegające na udzieleniu licencji na linkowanie do fonta w sieci, co
umożliwia osadzenie komercyjnych fontów w layoucie. Plik z fontem lub określone
odmiany kroju znajdują się na zewnętrznym serwerze, a designer będący abonentem
Typekit może wypożyczyć font (co nie jest równoznaczne z jego zakupem). Przy za-
płacie designer otrzymuje plik JavaScript do zamieszczenia na stronie i wykorzystania
z prostym kodem CSS.
15 http://blog.typekit.com/2009/05/27/introducing-typekit/
16 http://ilovetypography.com/2009/08/07/the-font-as-service/
Typografia internetowa: zasady, wskazówki i najczęstsze błędy
89
The Smashing Book.indd 89
2012-12-06 18:52:41
Wybór właściwego kroju
Kiedy mamy do wyboru spośród dosłownie setek tysięcy krojów, znalezienie jednego
na potrzeby określonego celu może się wydawać onieśmielające. Typowym błędem
jest wybranie ładnego, atrakcyjnego kroju — to stawianie formy ponad funkcją, czyli
zabieranie się za sprawę od niewłaściwej strony. Wbrew pozorom „wygląd” kroju to
najmniejsze zmartwienie. Skoro jednak wygląd nie jest tak istotny, to czym się kiero-
wać przy podejmowaniu decyzji? W tym kontekście najważniejszym kryterium jest
kontekst, w jakim krój ma być używany, i cel, jakiemu ma służyć.
Zastanów się nad tekstem i narracją
Przed wybraniem kroju i dopracowaniem layoutu zawsze, o ile to możliwe, powi-
nieneś najpierw przeczytać tekst. Wydawałoby się, że to oczywiste, ale krój i wygląd
tekstu powinny być zależne od sensu. Mamy tu jednak drobny problem, ponieważ
w epoce internetu często mamy do czynienia z dwoma bardzo odmiennymi rodza-
jami narracji.
Narracja zaaranżowana to taka, którą znamy i kochamy. Twórca takiej narracji
od początku zna sens i znaczenie tekstu. Odbiorcy czytają go od początku do końca,
zdobywając tym samym wiedzę.
Z narracją emergentną mamy do czynienia, kiedy treść jest tworzona już po
ukończeniu projektu, tak jak w przypadku serwisów społecznościowych, których
użytkownicy tworzą tekst, czy też na stronach z CMS-ami lub silnikami blogowymi,
na których pojawiają się ciągle nowe materiały. Odbiorcy mogą pobieżnie przeglądać
takie treści, skacząc po stronie, zbierając strzępki informacji i zatrzymując się tylko
wtedy, kiedy coś przykuwa ich uwagę.
W przypadku narracji zaaranżowanej z tekstem można się zapoznać w całości,
pojąć jego znaczenie, ton i niuanse, a następnie dobrać odpowiedni krój. Co jednak
robić przy narracji emergentnej? Jakoś sobie radzić. Przyjrzeć się marce i środowisku.
Wyobrazić sobie kontekst, w jakim tekst będzie odczytywany. Wybrać krój, który
wzbogaca sens tekstu, ale raczej wtapia się w całość, zamiast zwracać na siebie uwagę.
Nie wspinaj się na górę w pantoflach
Praktycznie każdy liternik tworzy kroje o jasno określonych właściwościach, prze-
znaczone do użytku w konkretnych warunkach. Do webdesignera należy rozeznanie
się, z jakimi warunkami ma do czynienia, zanim jeszcze wybierze odpowiedni krój.
Z jednej strony mamy kroje, które sprawdzają się w niewielkich rozmiarach i w nie-
sprzyjających warunkach (buty trekingowe), a z drugiej kroje ozdobne (pantofle).
Kroje „trekingowe” są twarde: mają rozpoznawalny kształt, duże odstępy mię-
dzyliterowe, wyraźne szeryfy i światło wewnętrzne, wysoką linię średnią oraz pułapki
90
Pobierz darmowy fragment (pdf)