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

Dla wielu ludzi, w tym także projektantów, typografia ogranicza się do wyboru fontu, określenia jego wielkości i ewentualnie zdecydowaniu, czy font powinien być pogrubiony, czy pochylony.
Jeśli dla ciebie typografia też kończy się na tych trzech wyznacznikach, czas rozszerzyć swoje horyzonty.

Dobra typografia to ostateczne dopełnienie dobrego projektu. Nie zdawaj się na przypadek („hej, ten font jest taki fajny!”) ani nie wybieraj na chybił-trafił. Dokonuj wyborów świadomie, z myślą o celu, jaki chcesz osiągnąć dzięki użyciu określonych fontów, krojów i odmian pisma, wielkości.

Znajomość typograficznych podstaw da ci również większą kontrolę nad całym projektem i pomoże zachować jego spójność – jedną z najważniejszych cech w projektowaniu graficznym. Oczywiście podane niżej zasady możesz zastosować w każdym typie mediów: od projektów do druku aż po projektowanie na potrzeb sieci, jednak my skupimy się właśnie na tym ostatnim.

Przygotowaliśmy dla ciebie 8 prostych rad, jak użyć CSS do ulepszenia twojej typografii, a tym samym – poprawienia UX.

1. Typografia dla web developerów: długość wiersza

Pewnie nie raz w swoim życiu trafiałeś na teksty łatwiejsze i trudniejsze do przeczytania. Nie do zrozumienia: do przeczytania. Za czytelność tekstu odpowiada nie tylko stopień pisma i jego interlinia, ale również sama długość wiersza.

Zbyt duża długość wymusza inny rytm ruchów gałki ocznej, co jest męczące, a przy tym utrudnia odnalezienie początku kolejnego wiersza. Z kolei wiersze za krótkie utrudniają koncentrację na rozumieniu tekstu – ich stosowanie ma sens tylko przy niewielkich ilościach tekstu.

Optymalna długość wiersza zamyka się między 40 a 80 znakami, wliczając w to spacje. Idealna długość dla tekstu w jednej kolumnie to dokładnie 65 znaków ze spacjami.
Aby obliczyć długość wiersza, użyj metody Roberta Bringhursta, prawdziwego guru typografii. Pomnóż stopień wysokości pisma przez 30. Jeśli więc wysokość pisma wynosi 10 px, pomnożone przez 30 da ci wielkość 300 px, czyli około 65 znaków w wierszu.

Kod powinien wyglądać mniej więcej tak:

p {
 font-size: 10px;
 max-width: 300px;
}

2. Typografia dla web developerów: interlinia

Interlinia to odległość między kolejnymi wierszami tekstu. Odgrywa ona dużą rolę w zachowaniu czytelności tekstu: właściwa interlinia ułatwia płynne przejście od końca wiersza do początku następnego poniżej. Interlinia znacząco poprawia także wygląd całości.

Pamiętaj, że interlinia odpowiada również za „kolor” typografii. Im jest mniejsza, tym bardziej zbity, gęsty i „czarny” jest cały tekst, a to nie zawsze jest przyjazne dla użytkownika.

Na wielkość interlinii wpływają różne czynniki: wybrany font, jego wielkość, krój liter (szeryfowe czy bezszeryfowe, jedno- czy dwuelementowe), odległości między znakami – wszystko to wpływa na odpowiednią wysokość interlinii.
Możesz zrobić krótki test: wygeneruj przykładowy tekst i sprawdzić, jak zmienia się jego objętość oraz interlinia, kiedy zmieniasz krój pisma np. z Courier 12 pkt na Times 12 pkt.

Im dłuższy wiersz, tym większa interlinia jest potrzebna, z kolei im większy jest stopień pisma, tym mniejszej interlinii wymaga.
Na początek przyjmij zasadę, aby wyznaczać interlinię o 2-5 pt większą niż stopień pisma – dokładna miara jest zależna od kroku fontu, jakiem się posługujesz. Jeśli zatem twoje pismo dziełowe występuje w wysokości 12 pt, interlinia powinna mieć 15-16 pt.

body {
 font-family: Helvetica, sans-serif;
 font-size: 12px;
 line-height: 16px;
}

3. Typografia dla web developerów: cytaty zawieszone

Jeśli w tekście zobaczysz cytat, który otwiera cudzysłów umieszczony jakby na marginesie, masz do czynienia z bardzo staranną typografią. Wydaje ci się to dziwne lub egzotyczne? Cudzysłów umieszczony w bloku tekstu odcina się od niego, zaburza wielkość marginesu i zaburza „rytm” czytelnika.
Zawieszone cytaty pozwalają utrzymać wyrównanie do lewego marginesu, a tym samym poprawiają czytelność.

blockquote {
 text-indent: -0.8em;
 font-size: 12px;
}

Wartość em oczywiście zależy od wielkości fontu, jego kroju oraz wielkości marginesu.

4. Typografia dla web developerów: rytm pionowy tekstu

Siatka i linie bazowe są podstawą dla typograficznej spójności i pionowego rytmu całej strony. Rytm pomaga czytelnikom podążać za tekstem, a także wpływa na zachowanie spójności, ponieważ proporcje i równowaga są zachowane na całej przestrzeni strony, niezależnie od tego, jak zmieni się wielkość fontu i interlinii.

Aby zachować rytm pionowy w CSS, potrzebujesz zachowania odległości między elementami a także odległości między wierszami (interlinia) takiej wielkości, jakiej jest wielkość siatki linii bazowych.
Powiedzmy, że używasz siatki o wielkości 15 px – pomiędzy kolejnymi liniami jest 15 px. Odległość między liniami będzie miała zatem 15 px, podobnie jak odległość między akapitami.

body {
 font-family: Helvetica, sans-serif;
 font-size: 12px;
 line-height: 15px;
}

p {
 margin-bottom: 15px;
}

To sprawi, że każdy akapit wyrówna się do siatki linii bazowych, zachowując rytm i układ tekstu.

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

Dla wielu odbiorców czytanie z ekranu jest mniej efektywne i bardziej męczące niż czytanie tradycyjnego druku. Ma to związek nie tylko z wysokim kontrastem medium i sposobem wyświetlania liter – nawet najlepsze monitory nie mają tak wysokiej rozdzielczości jak druk – ale również z typografią, jakiej używają projektanci i web developerzy.

Jeśli budując stronę www jesteś również odpowiedzialny za typografię, zrób to z głową: nie wybieraj fontu na chybił-trafił, ale zastanów się, jaki efekt chcesz osiągnąć i jakie wrażenie chcesz uzyskać.

Zwróć uwagę na elementy, które podniosą czytelność i uczynią stronę bardziej przyjazną dla użytkownika: długość wiersza, wysokość interlinii i zachowanie rytmu tekstu przez wyrównanie do linii bazowej siatki. Wisienką na typograficznym torcie jest takie złożenie cytatów, aby cudzysłów wychodził delikatnie w przestrzeń lewego marginesu.

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