5 prostych kroków do lepszej typografii

Wszyscy kiedyś myśleliśmy, że typografia ogranicza się do wybra­nia czcionki, jej koloru, rozmi­aru oraz decyzji czy będzie ona pogru­biona czy nie. I wszyscy byliśmy w błędzie. Typografia jest bardzo rozbu­dowaną dziedz­iną, którą graficy i pro­jek­tanci często zaniedbują.

Poniżej zna­j­duje się 5 kroków, dzięki którym lay­out może stać się o wiele bardziej prze­jrzysty, a jego użyteczność znacznie wzrośnie.

1. Ilość znaków w linii

Dla czytel­nika zbyt krótkie lub długi mogą okazać się rozprasza­jące i męczące. Dla opty­mal­nej czytel­ności ilość znaków w linii powinna wahać się pomiędzy 40 a 80 (włącza­jąc spacje). Dla jed­nej kolumny liczba 65 znaków jest uważana za idealną.

Prostym sposobem skalku­lowa­nia ilości znaków w linii jest zas­tosowanie zasady Roberta Bringhursta. Mianowicie polega ona na pom­noże­niu rozmi­aru czcionki przez 30. Daje nam to około 65 znaków w linii. Imple­men­tacja w kodzie CSS przed­stawia się w ten sposób:

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

2. Odstępy między lini­ami (leading)

Definicję leadingu można znaleźć w dziale Ter­miny strony. Jed­nak jak sam nagłówek mówi — jest to odstęp między lini­ami. Lead­ing sprawia, że tekst jest bardziej czytelny. Ma także nieba­gatelny wpływ na typograficzny kolor tek­stu — im mniejszy lead­ing tym ciem­niejszy tekst się wydaje i na odwrót.

Ist­nieje wiele czyn­ników, które wpły­wają na lead­ing. Niek­tóre z nich to rozmiar czcionki, odstępy między słowami, to czy czcionka jest pogru­biona czy nie. Im dłuższa nasza linia tek­stu, tym więk­szy powinien być lead­ing. Nato­mi­ast im więk­szy rozmiar czcionki, tym mniejszy odstęp jest wyma­gany. Regułą jest ustaw­ianie leadingu więk­szego o 2 — 5 pik­seli od fak­ty­cznego rozmi­aru czcionki.

W kodzie CSS lead­ing można ustawić za pomocą atry­butu line-height. Poniżej deklaracja.

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

3. “Wiszące cytaty” (hang­ing quotes)

Znaczniki cytatów powinny zna­j­dować się na mar­gin­e­sie tek­stu. Zaw­ieranie ich w znaczniku body tek­stu sprawia, że zaburzają one całoś­ciowy rytm.

Ten prob­lem rozwiązuje właś­ci­wość blockquote.

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

Oczy­wiś­cie wartość negaty­wnego wcię­cia (czyli ele­mentu text-indent) może się różnić w zależności od czcionki, jej wielkości oraz wielkości marginesów.

4. Wyróż­ni­anie tekstu

Wyróż­ni­anie ważnych treści w tekś­cie jest bardzo istotne. Jeszcze bardziej istotne jest wyróż­ni­anie ich w taki sposób, aby nie rozpraszać czytel­nika. Mimo, że znakomita więk­szość ludzi uważa, że najlep­szym wyborem jest pogru­bianie tek­stu, nie jest to zawsze najlep­szy wybór. Najpowszech­niejszym sposobem wyróż­ni­a­nia jest czcionka pochy­lona — italic (powinno się stosować znaczniki em a nie i). Oczy­wiś­cie ist­nieje wiele innych opcji, takich jak: pogru­bi­e­nie, mały caps lock (ten wari­ant dzi­ała tylko wtedy, gdy czcionka posi­ada taką wer­sję), zmi­ana koloru, itp. Najważniejszym jed­nak jest aby ich nie łączyć.

Różne sposoby imple­men­tacji w kodzie CSS:

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

5. Sieroty i bękarty

Wdowa to krótkie sfor­mułowanie lub słowo na końcu para­grafu. Bękart to to samo co wdowa, jed­nakże zna­j­duje się na początku bądź końcu kolumny odsep­a­rowanej od kole­jnego para­grafu. Jak więk­szość pomyłek typograficznych wpły­wają na stopień czytel­ności tek­stu. Mogą być kon­trolowane przez różne atry­buty arkuszy stylów CSS takie jak: wordspacing, letter-spacing, line-height i inne. Nie zawsze jed­nak pozwala to na rozwiązanie problemu.

Nie ma prostego sposobu na to, aby zni­welować pojaw­ianie się sierot i bękartów w tekś­cie za pomocą CSS. Ist­nieją nato­mi­ast różne wty­czki jQuery, które w miarę dobrze radzą sobie z ich usuwaniem.