Typografia

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?

4 komentarz(e)y na temat “Aktualne trendy w typografii na stronach internetowych

  1. Dzięki bardzo pomocne informacje, właśnie się chciałem zorientować jak to wygląda na chwilę obecną… dodam tylko, że można również spotkać rozwiązania z google fonts, czy @fontface, ale to mniejszość

    1. To prawda, że od chwili, gdy powstał ten wpis możliwości zastosowania różnych fontów na stronach internetowych się zwiększyły, ale myślę, że popularność tych nowych rozwiązań wzrośnie na dobre dopiero wtedy, jak wszystkie najpopularniejsze przeglądarki będą je obsługiwać. Mam tu na myśli przede wszystkim Internet Explorera.

  2. Fajny pożyteczny wpis napisany ludzkim językiem. Z punktu widzenia SEO – super!
    Zmiany trendów w zakresie typografii ciągle następują, obecne trendy: http://www.smashingmagazine.com/2013/05/17/typographic-design-patterns-practices-case-study-2013/#more-152489

    Ja zawsze staram się pisać jasno i klarownie, chociaż to dosyć względne pojęcie:-) Każdy je rozumie po swojemu, dlatego warto mieć grono recenzentów, które ma inny punkt widzenia na tą samą rzecz,

    Co do typografii – kieruję się zwykłym rozsądkiem – ma być czytelnie. Jeśli chodzi o wyrównanie – staram się zawsze stosować justowanie do obu marginesów (lewy, prawy), ponieważ uważam, że tak jest bardziej czytelnie i poprawnie.

    Jeśli chodzi o linki, to różnie, chociaż zawsze należy je pokazać po to aby Internauta je widział (brak sztuczności), inny kolor linka to dobry pomysł, aczkolwiek niedowidzący mogą tego nie zobaczyć. Z tego powodu warto rozważyć podkreślenie w przypadku linków. A najważniejsze to nie przesadzać z ich liczbą i dbać aby odnosiły się do aktualnych stron / podstron – to wpływa dobrze na organiczne pozycjonowanie stron www.

Komentarze zostały wyłączone.