Na blogu Smashing Magazine ukazał się ciekawy artykuł na temat aktualnych trendów w typografii na stronach internetowych. Wyniki przeprowadzonych badań powinny zainteresować wszystkich tych, którzy zabierają się za projektowanie stron internetowych.

Fonty szeryfowe czy bezszeryfowe?

Jeśli chodzi o rodzaj fontów użytych w nagłówkach serwisów internetowych, to okazuje się według badań, że na 60% witryn użyta jest czcionka bezszeryfowa, natomiast na pozostałych 40% – szeryfowa. Najczęściej spotykanymi fontami bezszeryfowymi w nagłówkach stron są: Arial, Verdana, Lucida Grande i Helvetica.

Jeszcze więcej zbadanych witryn, bo aż 66% używało fontu bezszeryfowego w akapitach strony. Najpopularniejszymi fontami używanymi w treści są: Arial, Verdana i Lucida Grande.

Najczęściej spotykanymi fontami szeryfowymi w nagłówkach stron są: Georgia i Baskerville. Georgia dominuje również jako font szeryfowy wykorzystywany w akapitach. Na drgim miejscu jest wiekowy już Times New Roman.

Jakie fonty są najbardziej popularne?

Okazuje się, że mimo możliwości zastosowania na witrynach nowych fontów (instalowanych domyślnie np. z systemem Windows Vista czy Mac OS X) projektanci stron w dalszym ciągu używają starszych ale za to sprawdzonych rozwiązań. Pierwsze trzy miejsca jeśli chodzi o popularność występowania fontów na witrynach internetowych zajmują: Georgia, Arial i Verdana.

Przyznam się, że ja sam, pracując nad nowym wyglądem Grafikomanii eksperymentowałem z nowymi fontami dostępnymi po zainstalowaniu Windows Vista, ale nie przypadły mi one do gustu, szczególnie jeśli chodzi o wygląd w akapitach – były małe a ich krawędzie rozmyte, co sprawiało, że stawały się słabo czytelne.

Jasne czy ciemne tło strony?

Tutaj nic się nie zmienia od lat. Dominuje wersja z jasnym tłem i ciemnymi fontami, chociaż już nie zawsze w kolorze czarnym. Również tło strony nie zawsze jest białe. Coraz częściej można spotkać witryny o mniejszym kontraście między tłem a tekstem. Osobiście najczęściej spotykam serwisy, które zamiast białego tła mają jakiś pastelowy, np. jasno szary lub kremowy).

Wielkość fontów w nagłówkach

Jeśli chodzi o wielkość fontów w nagłówkach stron to dominują dwa przedziały: 18-20 i 24-26 pikseli. Oczywiście przy ustalaniu wielkości fontów trzeba brać pod uwagę po pierwsze rodzaj użytej czcionki oraz to, jak nagłówki będą się prezentowały w stosunku do pozostałego układu strony – czy nie będą za małe lub, co bardziej prawdopodobne – za duże.

Wielkość fontów w akapitach

W tym wypadku dominuje już od dłuższego czasu jedna wielkość – 13 pikseli. Na drugim i trzecim miejscu, ale już ze sporą stratą są wielkości 14 i 12 pikseli. Myślę jednak, że 14 pikseli będzie zyskać na popularności ze względu na coraz łatwiejszą dostępność monitorów o dużych rozdzielczościach, na których ta wielkość fontu jest bardziej czytelna.

Stosunek wielkości fontów w nagłówkach i akapitach

W przebadanych serwisach stosunek wielkości fontów w nagłówkach i akapitach wyniósł 1.96. Oznacza to, że wybierając w projekcie witryny wielkość czcionki dla nagłówków musielibyśmy pomnożyć przez 2 wielkość fontu użytego w akapitach. Jak już wspomniałem wcześniej, trzeba jednak być ostrożnym i nie przesadzić.

Warto również wziąć pod uwagę tradycyjną skalę wielkości czcionek w poligrafii (6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24, 36, 48, 60, 72 punktów – taka wersja jest obecnie na Grafikomanii) lub sekwencję (np. 16, 24, 40, 64, 104).

Wysokość linii wiersza w artykułach

Na przeważającej liczbie zbadanych stron stosunek wysokości linii wiersza w artykułach do wielkości fontu (obie wielkości mierzone w pikselach) wyniósł 1,48 i jest bliska wielkości stosowanej w tradycyjnym druku książkowym, która wynosi 1,5. Oznacza to, że optymalną wartością line-height jest 150%.

Ilość znaków w jednej linii tekstu

Najczęściej spotykana liczba znaków w jednej linii wahała się w granicach 82-84. Na drugim miejscu uplasowały się serwisy, gdzie na jedną linię wiersza przypadało 88-90 znaków.

Wygląd linków i wyrównywanie tekstu

Prawie połowa witryn (46%) miała linki w postaci podkreślonego tekstu, podczas gdy na pozostałych stronach odnośniki w tekście były zaznaczone innym kolorem.

Interesująco, moim zdaniem, przedstawia się wynik ilości stron, na których tekst nie był wyrównany do obu krawędzi bloku z tekstem. Na 96% stron tekst w akapitach był wyrównany do lewej a wartość padding-left była ustawiona na niespełna 12 pikseli.

Ciekaw jestem jak wy podchodzicie do aspektu poprawnej typografii na stronach i blogach, ktore tworzycie. Czy przy projektowaniu serwisów korzystacie z jakichś narzędzi on-line pomagających we właściwym dobraniu fontów? Jeśli tak, to jakie polecacie?