Fonty na stronę

Zamów bezpłatne badanie strony i otrzymaj praktyczne wskazówki.

Oddajemy w Twoje ręce esencję wiedzy na temat fontów, idealnych na stronę internetową.

Jeżeli chcesz:

1. Poznać fonty, które radzą sobie najlepiej na stronach www, są uwielbiane przez klientów.

2. Zrozumieć, jak wykorzystać je do zwiększania swojej sprzedaży.

3. Dowiedzieć się, gdzie znaleźć te, które sprzedadzą Twoją ofertę jeszcze lepiej.

To ten artykuł Cię nie zawiedzie. 

Pokażemy Ci co zrobić, aby małym kosztem i w krótkim czasie podbudować sprzedaż właśnie dzięki odpowiednim czcionkom na stronie.

Font opisuje styl, szerokość i wagę zbioru znaków. Mówiąc prościej, to rodzaj pisma komputerowego. Jednak nie jest tym samym, co krój pisma.

Obrazowo można określić krój pisma jako rodzinę fontów, ich bazową stylistykę. Przykładowo, Roboto jest krojem pisma, a Roboto Thin – fontem.

W praktyce fonty to kody, instalowane na zapleczu strony internetowej, aby wyświetlać na niej znaki w określonym stylu.

Kroje pisma bardzo się od siebie różnią, natomiast fonty z jednej rodziny są podobne.

Fonty są jednym z elementów budujących pierwsze wrażenie.
W połączeniu z układem tekstu, białą przestrzenią (negative space) i obrazami, potężnie oddziałują na doświadczenia użytkowników (User Experience – UX).

Pierwszy tekst na jaki patrzy odbiorca to nagłówek. Oprócz jego treści ważny jest też wygląd, czyli font.

Konsekwencje doboru fontów sięgają jeszcze dalej.

Im gorsze wrażenia fundujesz swoim odbiorcom, tym szybciej opuszczają Twoją stronę, a Google to notuje. Widząc takie reakcje, uwzględnia je w swoim rankingu i strona traci na widoczności. Im mniej widoczna strona, tym mniej na niej bezpłatnego ruchu.

Na współczynnik odrzuceń wpływa jeszcze masa innych czynników. Wyeliminujmy je wszystkie, by jak najdłużej zatrzymywać użytkowników i przemieniać ich w klientów. Napisz do nas.

Fonty przekazują nastrój i wyrażają osobowość.

Niektóre czcionki są bardziej zabawne, jak Comic Sans.

Inne emanują wyrafinowaniem, jak Baskerville.

A jeszcze inne sprawiają, że aż chce się krzyczeć, jak Ultra.

Fonty nadają też ton wypowiedzi. Roboto Black jest zdecydowanie poważniejszy
w swoim tonie niż Playfair Display Regular pisany kursywą.

Jeśli Twoja strona jest trudna do przeczytania, odwiedzający opuszczą ją bez wykonania żadnej akcji. Dlatego opłaca się wybierać fonty proste i szybkie do odczytania.

Czy to znaczy, że tylko fonty bezszeryfowe sprawdzają się na stronach internetowych?

Jasne, że nie. Jeśli Twoją grupą odbiorców jest starsze pokolenie, które często czytywało (i być może nadal czyta) gazety, to kroje szeryfowe mogą okazać się dla Ciebie lepsze.

Choć fonty szeryfowe są trudniejsze do odczytania na stronie internetowej, to badania wykazały, że użytkownicy POSTRZEGAJĄ je za mniej obciążające.

Mimo, że realnie szybciej i z większym zrozumieniem czytali tekst napisany fontem bezszeryfowym, to jednak przy czcionce szeryfowej przypisywali sobie większą wydajność.

Dla czytelności ważne są również kolory. Jasny tekst na ciemnym tle jest trudniejszy do odczytania. Ciemna czcionka na białym tle to lepszy wybór, jeśli chcesz poprawić czytelność swojej strony internetowej.

Skoro znasz już generalne reguły, czas na eksperymentowanie z nimi. 

Celem Twojej strony jest konwersja. Ma przekonać odbiorców do wykonania konkretnej akcji (np. zakupu, wysłania formularza, zapisania się do newslettera).

Nie jest to możliwe, jeśli treść strony nie zostanie przeczytana (i zrozumiana).

Istnieje pięć rodzin fontów:

1. Fonty szeryfowe z ozdobnymi końcówkami.

2. Fonty bezszeryfowe z gładkimi końcówkami.

3. Kursywa przypominająca odręczne pismo.

4. Fonty fantasy z dużą dozą dekoracyjności.

5. Fonty monospace o stałej szerokości, które wykorzystuje się do kodowania

Kursywa i fonty fantasy nie sprzyjają czytelności, więc od razu je pomijamy. Natomiast fonty monospace są niszowe i raczej wykorzystuje się je do kodowania niż prezentacji treści na stronie www.

Świetnie sprawdzają się w tekście głównym strony.

Mają małe stopki (szeryfy) na końcu każdej litery. Budują klasyczny, formalny wygląd. Są tradycyjne, mocne, sprawiają wrażenie godnych zaufania
i zyskują lojalność odbiorców.

Możesz osiągnąć dużą różnicę używając grubego i cienkiego fontu szeryfowego. Ich odmienność jest widoczna od razu.

Zastanawiasz się, w jakich branżach fonty szeryfowe są szczególnie pomocne? Korzystają z nich chętnie firmy ubezpieczeniowe, prawnicze i finansowe – czyli te,
w których tradycja i zaufanie są mocno cenione przez klientów.

Są zarezerwowane (zazwyczaj) dla nagłówków i krótkich bloków tekstu.

Czcionki bezszeryfowe nie mają ozdobnych końcówek, co czyni je prostszymi
w odbiorze.

Możesz je często oglądać w Internecie. Twórcy stron www tak chętnie po nie sięgają, ponieważ są one kojarzone z nowoczesnym minimalizmem i dają treści więcej “oddechu”.

Decydując się na fonty bezszeryfowe nie uzyskasz jednak zbyt dużej różnicy między ich cienkimi i grubymi typami.

Warto, aby wzięły je pod uwagę zwłaszcza startupy działające w branży technologicznej, firmy odzieżowe i projektowe. 

Dużą wskazówką podczas wyboru fontu będzie branża, w jakiej działasz.

Kancelaria prawna postawi raczej na tradycyjne, klasyczne fonty, które kojarzą się
 z wiarygodnością.

Za to marka młodzieżowa może śmiało zdecydować się na fantazyjny krój pisma, który wyrazi nowoczesny charakter firmy. 

Inne strony internetowe mogą być dla Ciebie inspiracją. Odwiedź kilka i zobacz, jak różne fonty radzą sobie w przestrzeni online.

Jeśli jakiś font Cię zachwyci, możesz dzięki rozszerzeniu od Chrome – WhatFont – sprawdzić jego nazwę, a nawet rozmiar, wagę i wysokość linii.

Wybierając Fonty Google masz pewność, że będą wyglądały bez zarzutu na Twojej stronie.

Google Fonts są powszechnie do użytku komercyjnego i osobistego. Wybór jest na tyle bogaty, że naprawdę można tam znaleźć swojego faworyta.

Kiedy już wybierzesz swój font, przeanalizuj jeszcze 7 kryteriów, które pozwolą Ci podbudować konwersje na stronie:

1. Web-safe.

2. Kolor.

3. Rozmiar.

4. Waga.

5. Podział na wiersze.

6. Odstępy między wierszami.

7. Szerokość wierszy. 

Web-safe to pierwsza rzecz, którą musisz wziąć pod uwagę.

Fonty web-safe to te, które są uniwersalnie instalowane na komputerach, dzięki czemu są kompatybilne ze wszystkimi urządzeniami.

Jest to dobre dla UX (User Experience) i może pomóc w poprawieniu rankingu SEO (pozycji Twojej strony w bezpłatnych wynikach wyszukiwania).

Testy przeprowadzone przez Bing wykazały, że kolor i kontrast fontu mogą być ważniejsze nawet od kroju pisma. Łącząc te trzy zmienne, zwiększasz szanse na dużą konwersję.

Font powinien być na tyle duży, aby był czytelny. Nie może być jednak zbyt duży, ponieważ wtedy staje się przytłaczająca.

Jaka jest więc idealna wielkość? 

Dobrą zasadą jest, aby nagłówki były o kilka rozmiarów większe od podtytułów,
a podtytuły o kilka rozmiarów większe od treści podstawowej.

O ile większe?

Z pomocą przychodzi sekwencja Fibonacciego. Jeśli tekst podstawowy ma 16px, podtytuły H4-H2 będą miały odpowiednio: 24px – 40px – 64px, a nagłówek H1 osiągnie wielkość 104px.

Taka sekwencja sprawi, że hierarchia treści zyska naturalny, przyjemny i czytelny wygląd. 

Dostosuj grubość fontu do znaczenia (ważności) treści. Nagłówek i podtytuły powinny być większe i grubsze niż reszta tekstu.

To, w jaki sposób podzielisz swój tekst na wiersze ułatwi lub utrudni użytkownikom zrozumienie i zapoznanie się z nim.

Zachowaj balans. Unikaj zbyt krótkich wierszy, które są blokerami rytmu. 

Taki akapity pomogą Ci rozbić tekst i ułatwią jego skanowanie. Zmuszą Cię też do większej zwięzłości w pisaniu, co może tylko poprawić jakość Twoich treści.

Użyj odstępów między liniami, aby poprawić czytelność treści i zwiększyć konwersję. Biała przestrzeń jest w stanie podzielić tekst na strawne bloki.

Jeśli tekst będzie zbyt szeroki, trudno będzie się na nim skupić. Jeśli stanie się zbyt wąski, możesz wybić czytelnika z rytmu.

Dobrą zasadą jest utrzymywanie szerokości wiersza na poziomie około 50-60 znaków w linijce.

Dzięki temu odwiedzający mogą z łatwością przeczytać Twoją treść bez konieczności przewijania jej w poziomie.

Mózg nie lubi treści upchanych od lewej do prawej krawędzi strony. Aby pomóc mu połączyć fakty i zorientować się, o co chodzi w tekście, wykorzystaj wolną przestrzeń.

Użyj jej do obramowania elementu lub ich grupy, dzieląc stronę na logiczne, czytelne sekcje. Dzięki narzędziu CrazyEgg możesz łatwo sprawdzić, jak daleko użytkownicy docierają na Twojej stronie. Do którego momentu ją przewijają w dół. Gdzie rezygnują i wychodzą.

Testuj w ten sposób różną długość i szerokość wierszy na swojej stronie. Przekonaj się, co najbardziej lubią Twoi odbiorcy.

Jakikolwiek font wybierzesz, przetestuj go. To relacje Twoich klientów są najważniejszym wyznacznikiem sukcesu firmy.

Licząc na rewelacyjne współczynniki konwersji pamiętaj, aby font eksponował przekonujące treści. Dobry copywriting to ciasto, które potrzebuje zachęcającej
i pysznej dekoracji (w tym fontów), żeby ludzie się nim zainteresowali. Powodzenia!

Autor:

Mariusz Słowik

Założyciel Owocnych

Mariusz to perfekcjonista, który przedsiębiorców i ich klientów rozumie jak mało kto. Wystarczy chwila rozmowy z nim i już wiesz, że w zakresie designu i tworzenia ofert nie do odrzucenia nie ma sobie równych. Jego wyczucie potrzeb grup docelowych doprowadziło do konsekwentnego wzrostu dochodów firm z tak wielu branż, że już dawno przestaliśmy je liczyć. Czytając jego artykuły można się uczyć, śmiać, a przy tym rozwijać swój biznes lepiej i szybciej.