Fonty na stronę

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.

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ść.

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

Jednak zawsze warto testować różne rozwiązania w poszukiwaniu tego najlepszego dla siebie.

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:

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.

Dlatego, w kontekście stron internetowych, skupiamy się na fontach szeryfowych i bezszeryfowych.

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.

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.

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 konwersje na swojej stronie.

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

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.

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.

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.

Dobrze dobrany font może zwiększać wiarygodność marki, wpływać na User Experience i wesprzeć wzrost współczynnika konwersji. Masz teraz wiedzę, która pozwoli Ci na świadome wykorzystanie czcionek na Twojej stronie internetowej.

Jeśli jednak czujesz, że potrzebujesz pomocy przy implementacji tych wskazówek - nie wahaj się do nas napisać. Wykorzystamy moc fontów i całej reszty komponentów, aby stworzyć stronę, które będzie przyciągać i angażować Twoich klientów.