Jak zaprojektować dobrą typografię na strony www

Jak odwiedzający czytają treść na stronie www? Jak podaje Time ponad połowa odwiedzających przegląda tekst przez zaledwie 15 sekund. Jeśli przyjmiemy, że dorosły w ciągu minuty czyta 250 słów, twój odwiedzający przeczyta ich… 62.

Zwykle użytkownik scrolluje stronę przez dwie sekundy, znajduje sekcję, która go interesuje, a następnie „skanuje” treść, szukając konkretnych informacji.
Co to wszystko oznacza dla ciebie jako web developera?

 

Jeśli chcesz uczynić stronę bardziej przyjazną dla użytkownika, a jednocześnie po prostu dobrze ją zaprojektować, musisz zwracać większą uwagę na typografię.
W zeszłym tygodniu pisaliśmy o tym, jakie znaczenie ma dobrze złożony tekst dla odbioru strony i co zrobić, aby treść była bardziej czytelna. Jaka jest optymalna długość wiersza, jak dostosować interlinię do wysokości pisma i jak zakodować treść, aby zachowała wizualną spójność? Tego możecie dowiedzieć się z tego tekstu.

W drugiej części zajmiemy się profesjonalnym wyglądem tekstu.

 

1. Typografia dla web developerów – wdowy, bękarty i szewce

Wdową nazywamy krótki wiersz lub pojedyncze słowo pozostawione na końcu akapitu. Z kolei bękart to słowo lub krótki wiersz poprzedniego akapitu, który otwiera nową kolumnę tekstu. Szewc to podobny błąd typograficzny: jest to samotny wiersz nowego akapitu pozostawiony na dole poprzedniego łamu.

Wdowy i bękarty tworzą brzydkie „dziury” w tekście, zaburzają rytm czytania, a do tego pogarszają czytelność. Można ich uniknąć przez dopasowanie wielkości fontu, interlinii, kerningu (dopasowaniu odległości międzywyrazowych lub międzyliterowych) lub przez ręczne „złamanie” wiersza.

Dobra typografia na strony www
Typografia dla web developerów – wdowy, bękarty i szewce

Niestety, w CSS nie jest to tak łatwe, jak w programach do składania tekstu, zwłaszcza jeśli projektujesz stronę responsywną, gdzie układ tekstu będzie dostosowany do wymiarów strony. Możesz usuwać je ręcznie, a jeśli posługujesz się JS, David Storey podpowiada tutaj, jak zmienić zwykłe spacje na spacje nierozdzielające (twarde).

 

2. Typografia dla web developerów – podkreślenia

Jak podkreślić ważne informacje lub słowa kluczowe w tekście? Mądrze użyte podkreślenie zwróci uwagę czytelnika na te informacje, które są istotne i których może szukać, ale podkreślenie zbyt mocne rozprasza uwagę i zaburza harmonię tekstu.

Dobra typografia na strony www
Typografia dla web developerów – podkreślenia

Podkreśleniem może być pogrubienie, kursywa, kapitaliki, inny krój pisma lub kolor – możliwości jest wiele. Niezależnie od tego, którą wybierzesz, staraj się być konsekwentny i trzymać się jej w obrębie tekstu. Kombinacja caps-pogrubienie-kursywa wyglądają mało profesjonalnie.

span {
 font-style: italic;
}

h1 {
 font-weight: bold;
}

h2 {
 text-transform: uppercase;
}

b {
 font-variant: small-caps;
}

Pamiętaj, że font-variant zadziała tylko w tych krojach, które obsługują kapitaliki (czyli litery „drukowane” o wysokości małych liter).

 

3. Typografia dla web developerów – skala

Skala jest podstawą każdego projektu, niezależnie od tego, czy opierasz się na skali złotego podziału, ciągu Fibonacciego czy… Twojej własnej. Skala jest istotna, ponieważ ustala hierarchię typografii, a ta poprawia czytelność oraz tworzy harmonię i spójność tekstu.

Dobra typografia na strony www
Typografia dla web developerów – skala

W dużym skrócie chodzi o ustalenie, jakiej wielkości fontu użyjesz w kolejnych poziomach nagłówków i tekście głównym. Nie ustalaj tych wartości na chybił-trafił – wprowadź między nimi relacje.

h1 {
 font-size: 48px;
}

h2 {
 font-size: 36px;
}

h3 {
 font-size: 24px;
}

h4 {
 font-size: 21px;
}

h5 {
 font-size: 18px;
}

h6 {
 font-size: 16px;
}

p {
 font-size: 14px;
}

 

4. Typografia dla web developerów – justowanie i dzielenie wyrazów

Kiedy na twojej stronie mają się znajdować bloki tekstu, musisz zadbać o ich justowanie. Pełne justowanie (do prawej i lewej krawędzi) na stronach responsywnych może doprowadzić do powstania nieładnych przerw w tekście, kiedy spacje będą rozciągnięte.

Jeśli decydujesz się na wyrównanie tylko do prawej, zadbaj, aby lewa „krawędź” tekstu zachowała ładną linię: bez mocnych „wcięć” i dziwnych, „poszarpanych” wierszy, które utrudniają lekturę. Kluczem do estetycznego wyglądu jest tu równowaga długości wierszy.

Dobra typografia na strony www
Typografia dla web developerów – justowanie

W CSS nie ma jednego prostego rozwiązania, które pozwoli ci kontrolować długość wierszy w justowaniu do prawej, dlatego długość wierszy musisz dopasować ręcznie. Więcej na temat dzielenia wyrazów i dzielenia wierszy możesz przeczytać tu.

 

8 typograficznych tricków dla web developerów – podsumowanie

Większość czytelników nie zauważa dobrej typografii, ale bez trudu rozpoznaje i reaguje na złą typografią: najczęściej porzucają stronę i szukając informacji w innych źródłach.
Warto zatem zadbać o to, aby tekst na stronie był złożony poprawnie. Nie tylko uczyni to projekt bardziej przyjaznym dla użytkownika, ale również podniesie komfort korzystania ze strony.

Podstawowe rzeczy, na które należy zwrócić uwagę, to stopień (wysokość pisma) oraz interlinii, którą ustala się indywidualnie. W ślad za wysokością tych dwóch elementów idzie długość wiersza oraz sposób wyrównania tekstu i unikanie błędów typograficznych – wdów, szewców i bękartów.

Te elementy można zauważyć „gołym okiem”, ale o dobrej typografii przesądza jeszcze jeden: zachowanie spójności i harmonii, które uzyskasz również przez dostosowanie tekstu do siatki linii bazowych. Tu znajdziesz kalkulator, który pomoże ci obliczyć jej wysokość.

Dobra typografia jest uzupełnieniem każdego profesjonalnego projektu i świadczy o poziomie umiejętności web developera. Wykorzystaj skład tekstu, aby twoje strony www wyróżniały się na tle konkurencji!

 

8 typograficznych tricków dla web developerów – część 1