Jak widać, wszyscy mocno zajęci i nikt nie ma czasu wrzucić w linkach od czytelników czegoś ciekawego.  W takim układzie pomogę wam trochę i zaoszczędze trochę waszego cennego czasu – nie musicie szukać nowych fontów. Są tutaj.

Zaczynamy od Junction (do pobrania tutaj – .zip-package )autorstwa Caroline Hadilaksono. Bardzo ładne, eleganckie i stonowane sans-serif’y. Kolejną pozycją na naszej liście jest font Nadia Serif. Do pobrania za darmo, aczkolwiek autorzy proszą o przysłanie do nich PDF’a bądź innego formatu pliku zawierającego pracę, do której font był wykorzystany. Wersja na PC i na mac’a.

Manfred Klein zaprojektował bardzo ładną czcionkę Nilland. W zestawie znajdziemy 6 różnych krojów – normlane, pogrubione, bardzo pogrubione, black – cokolwiek to znaczy, małe kapitaliki i małe kapitaliki pogrubione.

Następne na liście znajdziemy bardzo czytelne sans-serify CarthoGothic – dostępne są cztery kroje. Zanim jednak z nich skorzystacie zapoznajcie się z licencją.

Na tej liście nie mogło zabraknąć klasycznej szeryfowej czcionki Bergamo Std. Dostępna w czterch różnych krojach: regular, italic, bold i bold italic. Podobnie jak w poprzednim przypadku warto zapoznać się z licencją.

Z pewnością, jak większość designerów, nie lubicie (a wręcz nienawidzicie) słynnej czcionki Comic Sans. Wszyscy wiedzą, że ludzie, którzy nie mają bladego pojęcia o designie nadużywają tej czcionki przy każdej nadarzającej się okazji. Na nasze szczęście kilka ładnych lat temu niejaki Hannes von Döhren stworzył alternatywę dla niesławnego Comic Sans’a – HVD Comic Serif. Różnicę widać od razu – jest to czcionka szeryfowa … no i w ogóle fajnie wygląda.

Elegancka, aczkolwiek w trochę starym stylu, zaprojektowana przez Darden Studio: Birra Stout.

Listę tą stwtorzyłem na podstawie wpisu w smashingmagazine.com – chłopaki jak zwykle odstawili kawał dobrej roboty. Mam nadzieję, że dzięki tym kilku czcionkom naszym młodym “designerom” uda się stworzyć wspaniałe projekty.

Jeżeli znacie i moglibyście polecić jakieś inne fajne darmowe fonty zapraszam do dodawania linków w sekcji po prawej stronie.

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.