Poniżej znajduje się 5 kroków, dzięki którym layout może stać się o wiele bardziej przejrzysty, a jego użyteczność znacznie wzrośnie.

1. Ilość znaków w linii

Dla czytelnika zbyt krótkie lub długi mogą okazać się rozpraszające i męczące. Dla optymalnej czytelności ilość znaków w linii powinna wahać się pomiędzy 40 a 80 (włączając spacje). Dla jednej kolumny liczba 65 znaków jest uważana za idealną.

Prostym sposobem skalkulowania ilości znaków w linii jest zastosowanie zasady Roberta Bringhursta. Mianowicie polega ona na pomnożeniu rozmiaru czcionki przez 30. Daje nam to około 65 znaków w linii. Implementacja w kodzie CSS przedstawia się w ten sposób:

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

2. Odstępy między liniami (leading)

Definicję leadingu można znaleźć w dziale Terminy strony. Jednak jak sam nagłówek mówi — jest to odstęp między liniami. Leading sprawia, że tekst jest bardziej czytelny. Ma także niebagatelny wpływ na typograficzny kolor tekstu — im mniejszy leading tym ciemniejszy tekst się wydaje i na odwrót.

Istnieje wiele czynników, które wpływają na leading. Niektóre z nich to rozmiar czcionki, odstępy między słowami, to czy czcionka jest pogrubiona czy nie. Im dłuższa nasza linia tekstu, tym większy powinien być leading. Natomiast im większy rozmiar czcionki, tym mniejszy odstęp jest wymagany. Regułą jest ustawianie leadingu większego o 2 — 5 pikseli od faktycznego rozmiaru czcionki.

W kodzie CSS leading można ustawić za pomocą atrybutu line-height. Poniżej deklaracja.

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

3. “Wiszące cytaty” (hanging quotes)

Znaczniki cytatów powinny znajdować się na marginesie tekstu. Zawieranie ich w znaczniku body tekstu sprawia, że zaburzają one całościowy rytm.

Ten problem rozwiązuje właściwość blockquote.

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

Oczywiście wartość negatywnego wcięcia (czyli elementu text-indent) może się różnić w zależności od czcionki, jej wielkości oraz wielkości marginesów.

4. Wyróżnianie tekstu

Wyróżnianie ważnych treści w tekście jest bardzo istotne. Jeszcze bardziej istotne jest wyróżnianie ich w taki sposób, aby nie rozpraszać czytelnika. Mimo, że znakomita większość ludzi uważa, że najlepszym wyborem jest pogrubianie tekstu, nie jest to zawsze najlepszy wybór. Najpowszechniejszym sposobem wyróżniania jest czcionka pochylona — italic (powinno się stosować znaczniki em a nie i). Oczywiście istnieje wiele innych opcji, takich jak: pogrubienie, mały caps lock (ten wariant działa tylko wtedy, gdy czcionka posiada taką wersję), zmiana koloru, itp. Najważniejszym jednak jest aby ich nie łączyć.

Różne sposoby implementacji w kodzie CSS:

h1 {
font-weight: bold;
}
span {
text-transform: uppercase;
}
p {
font-style: italic;
}

5. Sieroty i bękarty

Wdowa to krótkie sformułowanie lub słowo na końcu paragrafu. Bękart to to samo co wdowa, jednakże znajduje się na początku bądź końcu kolumny odseparowanej od kolejnego paragrafu. Jak większość pomyłek typograficznych wpływają na stopień czytelności tekstu. Mogą być kontrolowane przez różne atrybuty arkuszy stylów CSS takie jak: wordspacing, letter-spacing, line-height i inne. Nie zawsze jednak pozwala to na rozwiązanie problemu.

Nie ma prostego sposobu na to, aby zniwelować pojawianie się sierot i bękartów w tekście za pomocą CSS. Istnieją natomiast różne wtyczki jQuery, które w miarę dobrze radzą sobie z ich usuwaniem.

Poniższa infografika może pomóc z doborem odpowiedniego typu czcionki.

Czcionek dekoracyjnych używa się zazwyczaj w większych rozmiarach niż 30 pikseli. Często dekoracyjne czcionki są używane w reklamie. Do druku najlepiej zastosować “klasyczne” czcionki, raczej szeryfowe. To one najlepiej sprawdzają się w druku i do nich jesteśmy przyzwyczajeni. Skoro niektóre czcionki są lepszym wyborem jeśli chodzi o druk, na pewno istnieją czcionki stworzone na potrzeby sieci — czcionki ekranowe.

Dobierając czcionki trzeba jednak być bardzo uważnym. Każda kolejna użyta czcionka spełnia swoją rolę, niezależnie od specyfikacji projektu. Dwie główne zasady, o których powinno się pamiętać podczas łączenia różnych czcionek to:

1. KONTRAST — jak mówią, przeciwieństwa się przyciągają. Zatem jeśli wybierasz parę czcionek do swojej strony, weź pod uwagę fakt, że jeśli będą zbyt podobne do siebie nie stworzy to zamierzonego efektu. Najlepiej połączyć czcionki dekoracyjne z tymi, przeznaczonymi do druku (czcionki szeryfowe z bezszeryfowymi), bądź wyróżnić część tekstu pogrubieniem czcionki z tej samej rodziny.

2. PROSTOTA — wszyscy wiemy, że od nadmiaru głowa boli. Nawet najbardziej skomplikowane projekty mogą zostać wykonane przy użyciu dwóch czcionek. Dlatego ograniczajcie ich liczbę do minimum. Więcej nie znaczy tutaj lepiej.

Również należy pamiętać, że jeśli dobierzemy dwie czcionki, i nawet jeśli ich rozmiar będzie identyczny, niekiedy należy go zmienić aby dopasować wysokości średnie.

Zanim wybierzemy czcionki do projektu należy zatem zadać sobie pytania — jak dużo tekstu trzeba będzie przeczytać? Jaki jest jego cel? Co jest ważniejsze? Czytelność czy estetyka? Co chcemy osiągnąć? Wrażenie powagi i profesjonalizmu czy dekoratywność? Czy strona będzie naprawdę czytana czy jedynie skanowana przez użytkowników? Te wszystkie pytania sprawią, że bez problemu dobierzemy czcionkę do każdego projektu. Najważniejsza jest specyfikacja wymagań przed nim stawianych a także spodziewana “publiczność”. To właśnie od tych czynników zależy rodzaj i wielkość czcionki jakiej użyjemy.

W tym wpisie skupię się jednak na czymś innym. Mianowicie dużej typografii. Mowa tutaj o różnorakiego typu nagłówkach, ale nie tylko one są wyróżniane dużymi rozmiarami. Do osiągnięcia efektu dramaturgii oraz w layoutach silnie skoncentrowanych na typografii często używa się czcionek display’owych czyli inaczej — dekoracyjnych. Wszyscy wiemy, że im większy tekst, tym lepiej przyciągnie
uwagę.

Poniżej znajdziecie kilka przykładów dużej typografii w Internecie.

Carsonified

Agencja Interaktywna Ryana Carsona (na Twitterze jako @ryancarson), znana przez chyba każdego designera na świecie przywiązuje ogromną wagę do typografii. W zasadzie ich layout operuje na jednym kolorze bazowym (kolorze tła, zmieniającym się na każdej podstronie), jednym kolorze dla tekstu i linków oraz sporadycznych grafik. Świetny przykład użycia czcionek sans-serif (w menu) i serif w treści.

Finch

Porfolio Francisca Inchaustego pokazuje jak świetne, duże logo może wpłynąć na cały design strony. W zasadzie logo jest jedynym elementem graficznym na stronie (pomijając ikony). Połączenie wielkiego, pogrubionego loga z zdecydowanie mniejszą czcionką szeryfową daje świetne efekty.

Our Type

Our type jest firmą zajmującą się projektowaniem czcionek. Jak na specjalistę w branży przystało pokazują jak należy się posługiwać typografią, i to w technologii Flash.

Fl-2

W serwisie Fl-2 na próżno szukać standardowych czcionek. Duża, pogrubiona czcionka została użyta do wyróżnienia tego, co w portfolio firmy najważniejsze — czyli realizacji. O wiele mniejszą, pochyloną czcionką wystylowana została nawigacja strony.

37 Signals

Mimo, że 37 signals nie jest agencją interaktywną, a producentem aplikacji i tak na ich stronie można zauważyć duże przywiązanie wagi do typografii. Strona ta nie jest tak przejrzysta i minimalistyczna jak wcześniej przytoczone przykłady jednak można zwrócić tu uwagę na wyróżnianie nagłówków. Tutaj typografia idzie w parze z marketingiem. Okazuje się, że hasło reklamowe A better way to work jest bardziej istotne niż samo logo firmy (biorąc pod uwagę wielkość elementów).

Mad in Spain

Możnaby powiedzieć, że to portfolio jakiegoś hiszpańskiego grafika. Jest to jednak strona konferencji. Gra czcionek (pochylonej dla linków, szeryfowej dla treści oraz bezszeryfowej dla loga) oraz odstępów między poszczególnymi elementami daje wspaniały efekt.

Tputh

Niekonwencjonalny projekt strony z nowinkami z światka Internetu i social-media. Fenomenalna typografia i nawiązujący do komunistycznych plakatów design.

Grip Limited

Myślicie, że to plakat? Nie. To strona internetowa jednej z agencji. Mimo, że efekt całościowy daje wrażenie ogromnego nagromadzenia elementów, co rozprasza uwagę użytkownika to niemniej jednak robi wrażenie.

Drachal

Strona rodzimej graficzki. Dla urozmaicenia, mamy tu do czynienia z czcionką nazywaną mianem grunge, czyli zabrudzoną, nieregularną. Ta czcionka świetnie komponuje się z całością strony.

Digital Labs

Kolejna agencja interaktywna udowadnia, że warto stawiać na typografię. Zwłaszcza w połączeniu z ciekawą infografiką.

Reasumując — wielkie czcionki są bardzo popularne w webdesignie. Nie tylko wśród agencji internetowych (to po prostu najlepsze przykłady). Warto zastanowić się co chcemy osiągnąć, zanim użyjemy ogromnej czcionki dla naszego loga lub nagłówka. W powyższych przykładach można zauważyć bardzo przemyślane działania — czcionka zawsze czemuś służy. Głównie zwróceniu uwagi, ale też marketingowi, czy efektom czysto wizualnym. Stosowanie dużych czcionek bezmyślnie może jedynie rozproszyć uwagę użytkownika i sprawić, że nie będzie w stanie przyswoić sobie wszystkich treści, jakie chcemy mu przekazać.