Jak dobrać odpowiednią czcionkę na stronie internetowej?

Jeśli studiowałeś grafikę komputerową albo interesujesz się typografią, to zapewne wiesz, czemu mamy tak szeroką gamę czcionek i jakie mają zastosowanie. Jednak większość z nas, chcąc przygotować własnego bloga lub prezentacje, po prostu nie wie jak się za to zabrać. Nic w tym dziwnego. Sam dobór czcionki może zająć sporo czasu, a kazdy styl służy określonemu efektowi.

Czym się różni czcionka od fontu?

Czcionka i font to pojęcia stosowane wymiennie. Jeśli chcemy być precyzyjni, to powinniśmy zrezygnować z terminu czcionka na rzecz fontu. Czy jednak jest to takie niezbędne? Okazuje się, że tak. Otóż czcionka jest metalowym bloczkiem prostopadłościanu, na którym znajduje się wypukła litera. Zbiór wszystkich czcionek, jak również całego materiału zecerskiego znajduje się w kaszcie drukarskiej. W jej skład wchodzą także spacje justujące. Cały komplet różnych pod względem odlanych wielkości czcionek z materiałem zecerskim stanowi krój danego pisma. Taką czcionkę odlewano z metalowych matryc, na których trzeba było uzyskać wgłębną formę do odlania główki czcionki.

A font? Font jest cyfrową postacią pisma z zachowaniem informacji o poszczególnych literach i znakach danego kroju pisma w postaci bitmapowej lub wektorowej. Z tego też powodu każdy użytkownik komputera korzysta właśnie z cyfrowej postaci pisma. W dziejach drukarstwa zamiana czcionki na font jest procesem rewolucyjnym i swego rodzaju doniosłym. Czcionka jako podstawowy materiał drukarski znana była od początku masowego powielania tekstu. Późniejsze modyfikacje dotyczyły głównie sposobu odlewania czcionek jak słynny wynalazek Gutenberga, czy dużo późniejszego składu tekstu. Dopiero font wyparł czcionkę, powodując rewolucję w drukarstwie. Możemy powiedzieć, że drukarstwo stało się pierwszą dziedziną zinformatyzowaną.

Odpowiednia typografia jest podstawą każdego projektu

Dlaczego zaczynam od typografii? Typografia internetowa odgrywa dzisiaj ogromną rolę w projektach stron i aplikacji internetowych. Coraz więcej projektów opiera całą swoją koncepcję wizualną o fonty. Pomimo tego, że obecne witryny internetowe posiadają coraz więcej grafik, animacji lub zdjęć, to właśnie tekst jest głównym elementem podczas ich przeglądania. Odpowiednio dobrany kolor, krój czy styl czcionki gwarantuje, że nasz artykuł przyciągnie uwagę większej liczby odwiedzających. Fonty swoją formą komunikują subtelne wiadomości, dlatego należy wybierać czcionki świadomie, podkreślając charakter naszej prezentacji czy też strony internetowej.

Powinniśmy więc znać i stosować zasady typografii w webdesignie, które sprawią, że czytelnicy z łatwością znajdą informacje, których szukają. Dlatego istnieje jedna zasada dotycząca typografii internetowej, która warto zapamiętać: tekst powinien być zawsze łatwy do przeczytania.

Typografia internetowa, czyli czytelność tekstów na stronach

  • Najpierw należy określić podstawowy rozmiar czcionki, który jest zwykle równy 16px. W miarę potrzeb należy dopasować wielkość na podstawie właściwości używanej czcionki.
  • Powinno się używać tylko skalowalnych rozmiarów czcionek w odniesieniu do określonego rozmiaru podstawowego.
  • Trzeba pamiętać o zachowaniu odpowiedniej przestrzeni pomiędzy następującymi po sobie wierszami z tekstem. Zalecana wysokość linii tekstu wynosi 1.2em (czyli 120%). Jest to standardowa odległość definiowana przez przeglądarkę.
  • Nie należy używać zbyt wielu rodzajów i wielkości czcionek. Nadmierna ich różnorodność może doprowadzić do zbyt skomplikowanego układu strony i powodować trudności w czytaniu, a więc będzie mecząca dla użytkownika.

Fonty szeryfowe i bezszeryfowe

Fonty przede wszystkim dzielą się na fonty szeryfowe i bezszeryfowe. Nawet dla laika różnica jest dość łatwa do wychwycenia, gdyż fonty szeryfowe mają ozdobniki; kreseczki dorysowywane na końcu liter. Ich zastosowanie było związane z rozwojem druku, dzięki dodatkowym kreseczkom czytanie stało się łatwiejsze i przyjemniejsze dla oka. Jednak w dzisiejszych czasach pismo bezszeryfowe jest uznawane za czytelniejsze. A to z tego powodu, że na ekranie monitora tekst wygląda inaczej i większość osób woli akapity złożone z prostych fontów. Natomiast fonty bezszeryfowe są pozbawione ozdobników w postaci szeryfów – końcówki znaków są proste. Pismami bezszeryfowymi są m.in. Arial, Verdana. Czasami kroje bezszeryfowe nazywa się gotykami (Century Gothic), których nie należy mylić z pismem gotyckim. Natomiast fonty szeryfowe są używane głównie do publikacji papierowych. Nie oznacza to, że trzeba z nich automatycznie zrezygnować z fontów szeryfowych na blogu czy w prezentacjach. Czasem wystarczy zastosowanie bardziej ozdobnych fontów w nagłówkach, a fonty bezszeryfowe w akapitach, aby całość dobrze się prezentowała.

Kolory fontów w projekcie

Dobór kolorów jest kwestia mocno indywidualna. Każda firma czy blog mają swoją księgę znaku, brandbook czy chociażby kolory określone w logo. Głównie od tego będzie zależało, jakie kolory zastana użyte w projekcie. Na przykład na blogach kobiecych przeważają pastele. Są jednak trudne do wykorzystania, gdyż nie zawsze bladoróżowy czy słomkowo-złoty nadadzą się na kolor nagłówka.

Dobór czerni w akapitach też nie powinien byc przypadkowy i zwykle dobrze jest ta czerń rozjaśnić, zamiast stosować #000000, RGB (0,0,0). Trzeba tez pamiętać o tym, aby zbadać o kontrast między tłem a tekstem. Czarnym tło z kolorowymi tekstami jest wonie kiepskim wyborem jak brak odpowiedniego kontrastu, gdyż taka kombinacja meczy wzrok.

Wyrównywanie tekstu i szata graficzna

Kiedy sięgamy po książkę, tekst zazwyczaj jest wyjustowany, czyli wyrównany do obu marginesów, tworząc schludne bloki. W prezentacji możemy zrobić podobnie, wystarczy, że sprawdzimy, czy tekst ładnie rozkłada się w poszczególnych akapitach. Gorzej sprawa wygląda w przypadku stron internetowych. Blogi są czytane na różnych nośnikach (telefonach, tabletach, monitorach panoramicznych) i w każdym wypadku tekst może rozłożyć się inaczej. W tym wypadku justowanie akapitów może spowodować irytacje czytelników. Najlepiej jest użyć wyrównywania do lewej albo do środka (ostatnio jest to popularna opcja wykorzystywana na pojedynczych stronach sprzedażowych).

W przypadku wyrównywania tekstu istotną rolę odgrywa liczba słów w wierszu. Na monitorze komputera widzimy około 60-100 znaków ze spacjami, które po wyjustowaniu wyglądają całkiem klarownie, a przerwy między znakami nie są denerwujące. Na urządzeniach mobilnych znaków jest mniej, co może powodować czasem rozciągniecie się tekstu na całą szerokość ekranu.

Należy też uważać na szablony przystosowane do ściskania tekstu, gdzie w kolumnie mieści się więcej niż 120 znaków. W tym przypadku, po przeczytaniu ostatniego słowa w linii, ciężko znaleźć wzrokiem początek kolejnego wiersza.

Sebastian Szydłowski

Sebastian Szydłowski

Sebastian Szydłowski mieszka i pracuje w Irlandii, gdzie zdobył tytuł naukowy z dziedziny nauk farmaceutycznych. Web developer z zamiłowania, expert SEO od dwóch lat związany z marketingiem internetowym. Nie głosuje, inwestuje na Forex i dba o wysokie rankingi stron swoich klientów. Wszystkie artykuły autora