Jak wybrać font do strony internetowej

Dobór fontu, zwłaszcza w projektach, które będą wyświetlane na ekranie, ma zasadniczy wpływ na odbiór całego dzieła. Jednak jego wykonanie jest tak samo ważne jak wygląd.

• Typografia internetowa, czyli czytelność tekstów na stronach
• Fonty szeryfowe i bezszeryfowe
• Kolory fontów w projekcie
• Wyrównywanie tekstu i szata graficzna
• Aplikacje, które pomogą dobrać fonty
• Aplikacje i narzędzia do pobierania fontów

Teoretycznie wszyscy zdajemy sobie sprawę, że dobrze przemyślane formatowanie tekstu jest sprzymierzeńcem jego czytelności. Wiemy również, że rola dobrze dobranych fontów jest w tym temacie nieoceniona. W praktyce jednak najczęściej odkładamy zmiany związane z typografią strony lub bloga w bliżej nieokreśloną przyszłość, obawiając się, że bez odpowiednio dużej wiedzy na ten temat, nie poradzimy sobie z odpowiednim dopasowaniem krojów.

Na szczęście żyjemy w czasach, w których istnieją wirtualni (i, co najważniejsze – darmowi) pomocnicy. Ratują z absolutnie każdej opresji, zdradzając sprawdzone rozwiązania, dotyczące niemal każdej dziedziny życia. Z dobieraniem fontów nie mogło być inaczej. Znalazłam sześć stron, które ułatwią wam poszukiwania idealnej pary.

Dobór fontu, zwłaszcza w projektach, które będą wyświetlane na ekranie, ma zasadniczy wpływ na odbiór całego dzieła. Jednak jego wykonanie jest tak samo ważne jak wygląd. 

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.
• 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.

Aplikacje, które pomogą dobrać pasujące fonty

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.

GITGUB – przejrzysta strona, gdzie możesz zobaczyć gotowe projekty stron czy też materiałów graficznych z dobrze dobraną typografią. Przy każdym z projektów opisane są użyte fonty. Fonty pochodzą z bezpłatnego zbioru Google Fonts.

TYP.IO – strona o podobnych funkcjonalnościach jak w przypadku Github. Tu też możemy podejrzeć fonty, które doskonale do siebie pasują. Obok każdej z wizualizacji znajdziesz linki do użytych fontów oraz do konkretnych stron stosujących takie połączenie fontów.

FONT COMBINATIONS – jedna z funkcjonalności dostępnych w ramach platformy Canva. Wybierz z listy font który Ci się podoba, a narzędzie pokaże Ci pasują do niego typografię wraz z przykładem.

Aplikacje i narzędzia do pobieranie fontów

GOOGLE FONTS – pozycja obowiązkowa dla każdego miłośnika typografii, zwłaszcza tej darmowej. Na stronie możecie szybko podejrzeć jak dany font będzie wyglądał z Waszym tekstem, wystarczy kliknąć na próbkę tekstu i wpisać swoją frazę.

FONTSQUIRREL – przepastna baza fontów, jeden z najpopularniejszych agregatów fontów. Bardzo intuicyjna i rozbudowana wyszukiwarka w której możemy określić czego szukamy: font na licencji bezpłatnej, komercyjnej, pisanka, a może bogata rodzina?

BEHANCE – idealne miejsce do szukania inspiracji, ale też darmowych fontów. To co mi się tu podoba, to ciekawa prezentacja poszczególnych prac. Idealne miejsce dla osób, które mają trudność z wyobrażeniem sobie jak można dany font wykorzystać w praktyce np. w projekcie prezentacji czy ulotki.

ADOBE TYPEKIT – chcę być wobec Was uczciwa i muszę wspomnieć o płatnym narzędziu z którego korzystam na co dzień. Jako posiadacz licencji na produkty Adobe mam automatycznie dostęp do gigantycznej bazy fontów. Wada – niestety jest to płatna biblioteka, co więcej, nie wszystkie fonty są tu za darmo.

Czytaj także:

Kaligrafia jako sztuka: 40 darmowych fontów dla pisania kreatywnego

Najlepsze premium fonty do projektowania logo

Jak rozpoznać font? 9 Sposobów na rozpoznawanie fontów ze zdjęć + sposoby ich dodawania na stronę?