poniedziałek, 12 października 2009

Typografia w Internecie

No cóż, wakacje się skończyły. Czas zabierać się do pracy. Teraz przyszło mi na dokształcanie się w kwestii typografii. Wcześniej nawet nie do końca wiedziałam co to jest (co i dziwne nie jest, bo definicja w Wikipedii porażająca tez nie jest), ale powoli.

Typografia to ogólnie sposób zapisu informacji w taki sposób by był jak najlepiej czytelny. Głównym celem tej dziedziny nauki jest, aby czytelnik na pierwszy rzut oka wręcz wiedział czy ten tekst opłaca mu się czytać czy nie. A jeśli tak to maksymalnie uprzyjemnić mu tę sprawę. Stąd powstały pewne sprawdzone wytyczne jak to robić, aby dobrze się czytało.

Mówi się, że podczas optymalizacji typografii to optymalizacji: usability (funkcjonalność, użyteczność), accessibility(dostępność) i readability(czytelność). Poniżej przedstawię pokrótce najważniejsze z nich.

1. Measure (miara) - czyli ilość znaków w jednej linii. Okazuje się że dla tekstu pisanego jednokolumnowo powinno być 40-80 znaków (razem ze spacjami) w jednej linii. 65 to idealnie.

2. leading - odstęp między kolejnymi wierszami, fachowo: interlinia. Czasem wraz z rozmiarem czcionki nazywana wysokością linii. Dobra reguła to 2-5 pt więcej niż ma czcionka którą piszemy. Przykładowo dla 12 pt dobre będzie 15 lub 16 pt(wysokości).

3. hanging quotes/punctuation - tłumacząc na polski "wiszące cudzysłowia/wypunktowania". A chodzi po prostu o to, żeby wszelkie znaki interpunkcyjne (także wypunktowania) były poza główną kolumną (niejako wystawały poza kolumnę).

4. Widows and Orphans. Widows (nie mylić z Windows!!) to słowo lub linia na końcu lub początku paragrafu. Orphans jest tym samym tylko, że na końcu kolumny. A chodzi o to, aby nie było pojedynczego wyrazu w ostatniej linijce paragrafu (widow) ani pojedynczej linii gdy rozpoczynamy nową kolumnę.

5. Clean rags - to zakończenia kolejnych wierszy w przypadku, gdy tekst nie jest justowany. Ważna rzecz polega na tym, aby pilnować żeby zbytnio nie różniły się między sobą kolejne linijki w paragrafie pod względem długości, bo takie coś wygląda dziwnie:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eleifend mauris vel nibh interdum molestie. Nulla facilisi.
Pellentesque commodo elit imperdiet erat luctus at porttitor lacus luctus. Sed mi massa, gravida vitae faucibus ac,
lacinia ac nunc. Curabitur sagittis varius lacinia. Phasellus iaculis justo non velit vulputate id fermentum neque ultricies.


6. Emphasis (nacisk) - to niepotrzebne podkreślanie wyrazów. Polega to na tym, że w trakcie tekstu zwykłego (jaki ja teraz próbuję stworzyć) umieścimy jakieś WAŻNE SŁOWO w ten właśnie sposób (a niektórzy jeszcze podkreślenie dodają). Wystarczy użyć jeden stopień wyżej podkreślenie a nie wszystko co się da. Na tej stronie możecie znaleźć dokładny opis hierarchii podkreślania słowa: http://www.markboulton.co.uk/

7. rozmiar czcionki - raczej logiczna sprawa. Warto jednak wziąć jeszcze pod uwagę dla kogo ta strona jest kierowana (np. dla osób starszych lepsza byłaby nieco większa czcionka). Zazwyczaj lepiej żeby litery były troszkę za duże niż za małe (patrząc na tendencje dzisiejszego Internetu).

8. traktowanie tekstu jako UI - co to znaczy? To np linki w kolorze niebieskim, zróżnicowanie kolorów na stronie (z rozwagą!!), itp.

9. Warto zwrócić uwagę na np. wyrównanie do siatki, przejrzeć nagłówki, które zostały juz sprawdzone przez społeczność Internetu (Headlines for typography)
Dla zainteresowanych polecam odnośniki na wikipedii (po wpisaniu "typografia") oraz stronę anglojęzyczną webtypography.net

A tak na marginesie. Wiecie skąd tekst Lorem ipsum...? Jest to zwyczajowy tekst używany w Internecie jako okreslenie: "Tu jest jakiś tekst". Jeżeli chcecie wiedzieć historię czy w ogóle coś więcej (tekstu) to odsyłam do Googla :)

Brak komentarzy: