CSSElite

Ostatnio musiałem z racji wykonywanego zawodu poczytać na temat typografii. Jest to w sumie temat dosyć stary, bo ciągnie się przynajmniej od czasów Gutenberga, a może nawet i wcześniej, aczkolwiek czołowe polskie portale pewne zasady omijają. Z racji tego, że jest to dosyć leciwa już sztuka (można typografię nazwać sztuką – i nie chodzi o obrazki ASCII) pewne zasady przyjęły się i to nie z racji czyjegoś “widzimisię” tylko naprawdę ułatwiają projektowanie łatwych i przyjemnych w odbiorze stron internetowych.

Okazuje się, że “złota zasada” podziału 1:1.62 świetnie się sprawdza w tym przypadku. Zachowanie określonych proporcji w projekcie jest jednym z najistotniejszych czyniników decydującym o całokształcie projektu. Głupi uczy się na błedach własnych, a mądry na cudzych tak więc przyjżyjmy się najczęściej odwiedzanym portalom w Polsce (… na podstawie www.alexa.com), żeby się czegoś nowego nauczyć.

Przykładowy tekst  z onet’u, który przy przeanalizowaniu CSS’ów w FireBug’u ujawnia, że nie ma nigdzie nic na temat wysokości lini -  wygląda tak:

Film realizuje telewizja NHK, jedyny publiczny nadawca w Japonii. Pierwszą część dokumentu o polskiej emigracji Japończycy nakręcili w 2007 roku. Film pokazujący przygotowania Polaków do wyjazdu na Wyspy oraz oczekującą na nich rzeczywistość okazał się hitem w Kraju Kwitnącej Wiśni. W samym Tokio obejrzało go ponad 3 miliony widzów, a producentom od razu zamarzyła się kontynuacja projektu. “To był dokument, który miał pokazać przeciętnemu Japończykowi, dlaczego Polacy decydują się opuścić swój kraj i często bez znajomości języka wyjechać za granicę” – opowiada Kucaj. “Dla Japończyków sama idea emigracji jest egzotyczna. Chcieli zrozumieć, jak po rozszerzeniu Unii Europejskiej zmienił się kontynent oraz w jaki sposób ludzie zaczęli się przemieszczać, zostawiając za sobą rodziny i przyjaciół”.

A teraz ten sam tekst, w którym odstęp pomiędzy liniami jest uzależniony od wielkości użytej (w tym wypadku 12px) czcionki – czyli pomnożony razy 1.62. Liczyłem na wszelkie dostępne pod ręką sposoby no i coż …

zawsze wychodziło mi 19.44 – zaokrąglając daje nam line-heigt: 19

Tak więc, zwróćcie uwagę, że ten sam tekst czyta się łatwiej i dochodząc wzrokiem do końa linii nie musimy rozpoczynając nową szukać jej początku:

Film realizuje telewizja NHK, jedyny publiczny nadawca w Japonii. Pierwszą część dokumentu o polskiej emigracji Japończycy nakręcili w 2007 roku. Film pokazujący przygotowania Polaków do wyjazdu na Wyspy oraz oczekującą na nich rzeczywistość okazał się hitem w Kraju Kwitnącej Wiśni. W samym Tokio obejrzało go ponad 3 miliony widzów, a producentom od razu zamarzyła się kontynuacja projektu. “To był dokument, który miał pokazać przeciętnemu Japończykowi, dlaczego Polacy decydują się opuścić swój kraj i często bez znajomości języka wyjechać za granicę” – opowiada Kucaj. “Dla Japończyków sama idea emigracji jest egzotyczna. Chcieli zrozumieć, jak po rozszerzeniu Unii Europejskiej zmienił się kontynent oraz w jaki sposób ludzie zaczęli się przemieszczać, zostawiając za sobą rodziny i przyjaciół”.

Oczywiście możecie powiedzieć, że czepiam się jakiegoś tam szczegółu, ale jeżeli czytujecie całe artykuły w ilościach powiedzmy … 90% pojawiających się danego dnia, to nie sposób nie zauważyć, że coś jest nie tak. A tymbardziej, jeżeli jedna linika kodu może coś poprawić to dlaczego tego nie zrobić. Zrzuty w 4′ech kolorach przed i po:

Podobnie ma się sprawa z Wirtualną Polską … aczkolwiek informacje tam zamieszczane są tak krótkie, że zanim się zorientujemy, że można trochę poprawić odstępy między liniami artykuł się kończy. No cóż.

W przypadku Gazety i Interii doszukałem się tego (oczywiście w CSS’ach),  że chłopaki sprwujący pieczę nad wyglądem strony coś w tej sprawie zrobili. W Interii szybkie przestawienie z 17px na 19px w przypadku odstępu między liniami ORAZ odstępów między paragrafami na 19px (z 9′ciu … nie wiem z kąd wytrzasnęli taki numer …) znacznie poprawia “czytalność”. Proszę:

Pomijam (chwilowo) kwestię użytych fontów w nagłówkach – przydały by się jednak jakieś sans-serif, ale jest to oddzielny temat.

Reasumując tą pobieżną analizę – trzymajcie się zasady:

Odstęp między liniami = wielkość czcionki tekstu * 1.62

a napewno artykuły na waszych stronach / blogach będzie się łatwiej czytało. Pamiętając oczywiście o tym, żeby treść była wartościowa.

Krótkie spostrzeżenie na temat jednego z moich ulubionych blogów – antyweb – wartościowy merytorycznie i pisany w ciekawy sposób – aczkolwiek: Grzesiek – zmień odstępy między liniami na większy  – jeżeli oczywiście chcesz się trzymać tej trochę przywielgaśnej czcionki 15px  – na 24px. Od razu przyjemniej.

Wracając do tematu. Liczba 1.62 nie wzięła się w sumie z nikąd. Zapoznajcie się z tym.  Większość z Was powinna to pamiętać jeszcze ze szkoły, ale mogę się założyć, że nauczycielka “wciskając” wam tę wiedzę nie wspomniała czegoś w stylu: uczcie się tego dzieciaki, bo przyda się kiedyś przy projektowaniu stron internetowych. Znajdźcie chwilę czasu, żeby poklikać też w tą. Nawet bez znajomości angielskiego zorientujecie się w czym rzecz.

Następnym razem zajmiemy się wykorzystaniem 1.62 przy projektowaniu “layoutów” do stron / blogów. Zobaczycie jak się sprawdza. Dla niecierpliwych znających angielski polecam artykuł ze smashingmagazine.

Zapraszam do komentarzy.

Popularity: 98% [?]