Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00203 008227 20658726 na godz. na dobę w sumie
wyszukaj dokładnie | pobierz wtyczkę
The Smashing Book #1. Edycja polska - książka
The Smashing Book #1. Edycja polska - książka
Autor: , Liczba stron: 280
Wydawca: Helion Język publikacji: polski
ISBN: 978-83-246-5609-7 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> web design
Porównaj ceny (książka, ebook (-30%), audiobook).
Czytaj online.
Komentuj

Smashing Magazine to marka znana w branży webowej na całym świecie. Profesjonalny blog o technologiach i projektowaniu stron, oferujący setki merytorycznych i aktualnych artykułów opartych na realnych przykładach, podbił serca milionów użytkowników.

Ta książka to zbiór najlepszych artykułów i porad dla projektantów stron internetowych. Znajdziesz w niej fachowe i sprawdzone informacje na temat tworzenia interfejsu użytkownika oraz typografii w sieci. Autorzy bardzo dużo uwagi poświęcają użyteczności nowoczesnych stron internetowych.

W dzisiejszych czasach nawet najdoskonalszy pomysł się nie sprzeda, jeżeli nie będzie opakowany w intuicyjny i przyjazny interfejs użytkownika. Co jeszcze znajdziesz w tej biblii twórców stron WWW? Optymalizacja wydajności witryn, tworzenie projektów zwiększających sprzedaż, teoria kolorów to tylko część zagadnień, które muszą zwrócić Twoją uwagę. Sięgnij po tę książkę, naprawdę warto!

Smashing Book. Edycja polska. Kultowy podręcznik dla projektantów i twórców stron internetowych!

Znajdź podobne książki Ostatnio czytane w tej kategorii

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)

Gdzie kupić całą publikację:

The Smashing Book #1. Edycja polska
Autor: ,
Sklep
Format
Cena
Helion.pl Helion.pl
książka
34,30 zł
Idź do sklepu »

Opinie na temat publikacji:

Inne popularne pozycje z tej kategorii:

Czytaj również:

Prowadzisz stronę lub blog? Wstaw link do fragmentu tej książki i współpracuj z Cyfroteką: