.certificate-info:before { content: "\E086"; font-family: Glyphicons Halflings; }

Blog BOWWE

Praktyczne porady dotyczące tworzenia stron, marketingu internetowego i rozwijania biznesu

Wybór czcionki na stronę internetową. Jak wybrać najlepszy font? Poradnik krok po kroku & Przykłady!

Jak wybrać czcionki na stronę internetową
Odświeżasz lub tworzysz od zera stronę lub sklep internetowy? Musisz więc wybrać fonty, które wykorzystasz na swojej stronie. To bardzo ważny wybór. Dlaczego? Układ i wygląd tekstów wpływają znacząco nie tylko na estetykę strony, ale również jej funkcjonalność i czytelność. Strony z odpowiednimi fontami są znacznie bardziej przyjazne dla użytkowników. A to przekłada się na wyższą konwersję!
Wybór najlepszego fontu na stronę internetową nie jest prosty. Wystarczy jednak, że będziesz postępował zgodnie z przygotowanym przez nas poradnikiem, zagwarantujesz sobie wybór najlepszego fontu!

W tym artykule dowiesz się:

  • Czym czcionka różni się od fontu i kroju pisma?
  • Jak wybrać idealny font na stronę WWW
  • Jakie sztuczki stosować, by efektywnie łączyć fonty

Czcionka a font i krój pisma. Czym się różnią?

  • Czcionka jest metalowym prostopadłościanem używanym w drukarstwie, by odbijać treść na papierze. Jest to więc termin związany z drukiem.
  • Krój pisma oznacza z kolei charakterystyczny wygląd liter o określonym stylu i układzie, a font - zapisany cyfrowo obraz kroju pisma.
W języku polskim potocznie przyjęło się tłumaczyć font jako czcionkę, dlatego w artykule będziemy używać tych nazw zamiennie na określenie cyfrowej postaci pisma.

Jak wybrać najlepsze fonty na stronę WWW?

Oto 7 kluczowych kroków, które powinieneś wykonać!

Wybór idealnych fontów na stronę WWW:

  1. Określ charakter Twojej marki
  2. Określ cele tekstów na Twojej stronie
  3. Sprawdź, czy font ma odpowiednie znaki!
  4. Sprawdź licencję fontu!
  5. Wybierz font podstawowy i drugorzędny
  6. Umiejętnie połącz fonty i wydobądź z nich jeszcze więcej!
  7. Postaw na czytelność
Przyjrzyjmy się, jak wykonać każdy z nich w praktyce.

Krok I
Określ charakter Twojej marki

strona restauracji szablon
Lounge Restaurant to szablon dedykowany restauracjom, podkreślający wieloletnią tradycję i kunszt. Idealnie sprawdzą się do tego zastosowane fonty szeryfowe, o ktorych przeczytasz poniżej.
Słyszałeś kiedyś, że obraz wyraża więcej niż tysiąc słów?
Podobnie jest z typografią. Dlatego musisz zadbać o to, aby fonty we właściwy sposób oddawały charakter Twojej marki.

Jak to zrobić? Najpierw musisz określić charakter Twojej marki.

W tym celu skorzystaj z pomocniczych pytań, które przygotowaliśmy dla Ciebie poniżej!

Jak określić charakter Twojej marki przy wyborze fontu?

  • Czy to firma techniczna, czy może oferująca produkty i usługi związane z estetyką? 
  • Do osób w jakim wieku i jakiej płci kierowana jest jej oferta?
  • Czy usługi lub produkty są przeznaczone dla szerokiej czy wąskiej grupy odbiorców? 
  • Czy to “marka dla wszystkich”? Czy może target jest bardzo precyzyjny np. wykształcone kobiety w wieku 25-35 lat pochodzące z dużych miast? 
  • Jakie są wartości danej firmy i co chce komunikować odbiorcom?
  • Czy marka ma elegancki charakter, a może humorystyczny?
Zapisz odpowiedzi na te pytania! Pomogą Ci one w ostatecznym wyborze fontu, co wyjaśnimy dokładnie w tym artykule!

Krok II
Określ cele tekstów na Twojej stronie

wybór fontów na stronę

Po określeniu charakterystycznych cech Twojej marki, musisz poznać rodzaje i cechy dostępnych w sieci fontów.

Ta wiedza pozwoli Ci nie tylko perfekcyjnie dopasować font do charakteru Twojej marki.

Dowiesz się też, w jakich sytuacjach najlepiej stosować poszczególne ich rodzaje. Pamiętaj, że wybrany font musi służyć celowi tekstu, który zapisuje.
Innymi słowy, innego fontu użyjesz do opisu swojego produktu bądź usługi, a innego do stworzenia np. CTA (call-to-action) czy nagłówków na Twojej stronie.
Poznaj więc podział fontów, oraz cele, które się do nich sprawdzą!

Gotów by stworzyć własną stronę?

Skorzystaj z najwygodniejszego kreatora stron, któremu zaufały już tysiące użytkowników i twórz strony, które zapewnią Ci klientów!

Zaczynamy!

Klasyfikacja fontów

Fonty dzielimy głównie na:

  • Szeryfowe (serif fonts)
  • Bezszeryfowe (sans-serif fonts)
  • Pisankowe (script fonts)
  • Dekoracyjne (display and decorative fonts)

Kiedy zastosować poszczególne rodzaje?

Odpowiedź znajdziesz poniżej:

Fonty szeryfowe (serif fonts)

font newsreader

Newsreader - topowy przykład fontu szeryfowego

Fonty szeryfowe to takie, które mają poprzeczne lub ukośne zakończenia kresek (tzw. szeryfy) zdobiące pismo.
Zastosowanie szeryfów nadaje tekstom tradycyjnego, bardziej eleganckiego charakteru. Od dawna te czcionki są wykorzystywane w długich publikacjach papierowych (głównie w książkach), ponieważ szeryfy pomagają czytelnikowi podążać za linię tekstu, ułatwiając w ten sposób lekturę.

Ze względu na ozdobny charakter, fonty szeryfowe dobrze prezentują się również na stronach internetowych...ale przede wszystkim, gdy są stosowane jako dodatkowe elementy treści np:

  • nagłówki
  • cytaty
  • podtytuły
  • logotypy
  • hasła
Nie powinno używać się ich do zapisu głównej treści strony.
Mogą być wykorzystywane przez firmy, które chcą podkreślić swoje wieloletnie doświadczenie, odwołują się do tradycji, zasygnalizować pewność i stabilność.
Popularne fonty szeryfowe: Times New Roman, Georgia, Palatino, Bookman Old Style, Garamond, Courier, Lucida, Century, Arno Pro, MS Serif.

Fonty bezszeryfowe (sans-serif fonts)

font lato
Lato - przykład fontu bezszeryfowego
Fonty bezszeryfowe są pozbawione wspomnianych już szeryfów. Z tego powodu mają bardziej nowoczesny i minimalistyczny charakter.
Używanie ich w internecie powszechnie się przyjeło, ponieważ dawniej ekrany nie radziły sobie z prawidłowym wyświetlaniem fontów szeryfowych. Ponadto fonty bezszeryfowe wyświelane na ekranie nie męczą wzroku.
Powinny używać ich firmy, które są innowacyjne lub chcą być postrzegane jako nowoczesne i dynamiczne. Pokazują dostępność i prostotę, dlatego będą też dobrym wyborem dla firmy, adresującej swoje usługi do młodego pokolenia.

Popularne fonty bezszeryfowe: Arial, Open Sans, Montserrat, Helvetica, Futura, Verdana, Trebuchet MS, Univers

Fonty pisankowe (script fonts)

font sofia
Fonty pisankowe to fonty naśladujące pismo ręczne.
Występują jako eleganckie i formalne, ale też swobodne i humorystyczne. Można odnaleść wśród nich zarówno fonty bardzo (BARDZO) ozdobne, jak i całkiem proste.
Ich zaletą jest duża ekspresyjność. Niosą ze soba duży ładunek emocjonalny, który można wykorzystać, by wywołać u odbiorców określoną reakcję. Ponadto script fonts przyciągają uwagę i pozwalają na komunikowanie poważnych lub humorystycznych treści (w zależności od rodzaju fontu).
Eleganckie fonty pisankowe są idealne dla zaproszeń ślubnych i kartek okolicznościowych. Na stronach internetowych sprawdzą się, gdy zapiszemy nimi niewielkie elementy tekstu - np. nagłówki czy cytaty.
Przy zastosowaniu tych fontów należy zwrócić uwagę na ich czytelność - im bardziej dekoracyjny i “skomplikowany” font - tym większa szansa, że będzie on nieczytelny dla odbiorcy.
Popularne fonty pisankowe: Great Vibes, Lobster, Grand Hotel, Sofia, Arizonia, Black Jack, Cookie, Germanica, Miama, Pacifico, Tangerine.

Fonty dekoracyjne (display and decorative fonts)

To spora grupa bardzo różnorodnych fontów, które odznacza wymyślny kształt i duża ozdobność.
Ich forma może być związana z konkretnymi emocjami (np. strach - to właśnie przy pomocy gotyckich fontów dekoracyjnych jest czasem zapisywany tytuł horrorów) albo nawiązywać formą do określonej epoki, miejsca czy przedmiotu. Fonty dekoracyjne często odwołują się też do zjawisk kulturowych, np. do graffiti. Nieraz formą przypominają obrazki.
Są to bardzo ekspresyjne i oryginalne fonty. Dlatego trzeba uważać z ich stosowaniem - mogą szybko stać się niemodne, bo często odzwierciedlają tendencje designerskie określonych czasów.
Problemem może być też dobór odpowiedniego fontu dekoracyjnego na stronie www - powinien pasować do charakteru marki/firmy, a przy tym pozostać czytelny, dlatego należy go stosować ostrożnie i głównie do zapisu niewielkich elementów - np. nagłówków. Jeśli jednak dobrze dobierze się font dekoracyjny, strona będzie się bardzo wyróżniać.

Wskazówka:

Określiłeś już charakter swojej marki. Znasz rodzaje fontów i ich cechy charakterystyczne.

Teraz postaraj się znaleść fonty, które swoim kształtem będą wyrażać dokładnie te same cechy i wartości, jakie ma Twoja firma.
Aby szybko znaleść pomysły na fonty, możesz zerknąć na nasze zestawienie najlepszych fontów dla różnych branż

Krok III
Sprawdź, czy font ma odpowiednie znaki!

Uważaj na Lorem ipsum i generatory napisów!

Zacząłeś rozważać swój wybór spośród kilku fontów? Dobrze!
Jednak zanim się zdecydujesz, koniecznie upewnij się, że wybrany font posiada wszystkie niezbędne znaki.

O co chodzi?

Brak wszystkich znaków to częsta pułapka. Łatwo w nią wpaść, gdy korzystamy z generatorów tekstu i sprawdzamy wygląd fontu nie przy pomocy naszych docelowych treści, ale np. Lorem ipsum.

Ponieważ tekst ten jest w całości zapisany po łacinie, możemy nie zauważyć braku ważnych dla nas znaków, m.in.: polskich znaków ​​​diakrytycznych.
Brak polskich znaków diakrytycznych to nie jedyna pułapka, na jaką można się natknąć. Zdarza się również, że popularne fonty (zarówno płatne, jak i darmowe) posiadają problemy z pewnymi znakami...lub nie posiadają ich wcale.

Pamiętaj o wersjach językowych!

Twoja strona ma wiele wersji językowych? Pamiętaj, że większość języków posiada specyficzne dla siebie znaki diakrytyczne. Tym bardziej powinieneś dokładnie zweryfikować, czy dany font posiada je wszystkie - zanim go wybierzesz.
Jeśli wybrany przez Ciebie font ich nie ma – za każdym razem dla brakującego znaku zostanie zastosowany font domyślny. W wielu sytuacjach może to wyglądąć brzydko.
Możesz rozwiąząć ten problem na dwa sposoby:
  • zmieniając font na inny (pomysły znajdziesz tutaj)
  • kodując stronę w taki sposób, by właściwy CSS podmieniał dany znak na wizualnie podobny dla różnych wersji językowych
Jeśli korzystasz z BOWWE, nie musisz się tym martwić - wszelkie prace wymagające kodowania, wykonamy za Ciebie!

Krok IV
Sprawdź licencję fontu!

Tym, co jest równie kluczowe w przypadku wyboru fontu jest licencja użytkowa.
Musisz sprawdzić, czy licencja, dzięki której posiadasz dany font, pozwala Ci w ogólne wykorzystywać go na stronach internetowych.
Uważaj zwłaszcza na fonty, które instalują się wraz z pakietem Adobe czy systemem operacyjnym. Ich licencja często pozwala jedynie na wykorzystywanie ich przy materiałach drukowanych, nie zaś stronach internetowych. Nie każdy krój pisma możesz więc konwertować w cyfrowy font i umieszczać go na stronie.
Jeśli chcesz mieć pewność, że możesz używać danego fontu w sieci, skorzystaj z biblioteki Google Fonts.

Krok V
Wybierz font podstawowy i drugorzędny

Kilka fontów przypadło Ci do gustu, ale trudno Ci podjąć ostateczną decyzję?

Pamiętaj, że nie możesz zastosować zbyt wielu z nich. 2-3 fonty na stronie internetowej to optymalna liczba.

Zastosowanie dużej liczby fontów wprowadza na stronie chaos i utrudnia lekturę tekstu - wówczas nie dotrzesz do potencjalnych klientów.

Większość profesjonalnych stron internetowych zawiera:

  • Font podstawowy
  • Font drugorzędny
  • Font akcentujący (dodatkowy)
Każdy z tych fontów pełni inną rolę i wykorzystywany jest przy innych treściach. Aby zapewnić swojej stronie profesjonalny wygląd i ułatwić sobie wybór najlepszych fontów - zerknij, czym różni się od siebie każda z tych grup:

Font podstawowy 

Najbardziej widoczny na Twojej stronie. Używany w sloganach, tytułach i nagłówkach. Choć nie będzie najczęściej stosowanym, to właśnie z nim Twoja marka powinna być utożsamiana. Warto, żeby pasował do fontu obecnego w Twoim logo (o ile zawiera ono tekst).

Font drugorzędny

Będzie tym, który wypełni bloki tekstów: paragrafy, opisy produktów, czy wpisy na blogu.

To najczęściej stosowany font.
O ile font podstawowy może być oryginalny, to głównym celem fontu drugorzędnego jest czytelność. Bardzo ważne, aby klienci mogli się łatwo zapoznać z treścią.
Celem fontu drugorzędnego jest także wydobycie walorów fontu podstawowego (więcej informacji o łączeniu fontów przeczytasz w kolejnym punkcie).

Font akcentujący (dodatkowy)

Nie jest to wymagany font, ale warto rozważyć jego wybór.

Możesz używać go m.in: w przyciskach CTA (Call To Action), które mają przyciągnąć uwagę i generować kliknięcia. Może zostać również użyty, żeby zaakcentować najważniejsze fragmenty tekstu czy wyeksponować cytaty.
Ten rodzaj fontu powinien różnić się od reszty, aby skutecznie przyciągać uwagę odbiorców.

Wskazówka:

Jak rozpoznać font użyty na innej stronie internetowej?

Spodobał Ci się font na znaleziony na jakiejś stronie internetowej? Chciałbyś użyć go w swoim projekcie strony www?
Zainstaluj wtyczkę do Chrome FontFace Ninja. Z jej pomocą sprawdzisz nazwę każdego fontu użytego na danej strony www. Wystarczy kliknąć na ikonę zainstalowanej wtyczki i kursorem myszy wybrać czcionkę, której nazwę chcesz poznać.

Krok VI
Umiejętnie połącz fonty i wydobądź z nich jeszcze więcej!

szablon strony wynajmu maszyn
Professional Machines to szablon, dedykowany sprzedawcom maszyn. Połącznie masywnego fontu Oswald (podstawowy) oraz minimalistycznego Nunito (dopełniający) oddaje charakter branży i buduje zaufanie do firmy.  
Wiesz jakie są podstawowe typy fontów oraz jak je priorytetyzować na swojej stronie internetowej.
Nadszedł czas, abyś dowiedział się, jak możesz opanować sztukę ich łączenia.
Najlepiej zrobisz to, stosując poniższe tricki:

8 tricków na lepsze łączenie fontów

1. Szeryfowe z bezszeryfowymi

Bezpiecznym połączeniem są fonty szeryfiowe z bezszeryfowymi - zwłaszcza, gdy stosujemy je w różnych rozmiarach. Takie czcionki są na tyle inne, że w wielu przypadkach prezentują się atrakcyjnie

2. Kontrastowy rozmiar

Bezpiecznym połączeniem są fonty szeryfiowe z bezszeryfowymi - zwłaszcza, gdy stosujemy je w różnych rozmiarach. Takie czcionki są na tyle inne, że w wielu przypadkach prezentują się atrakcyjnie

3. Konstrastowa grubość

Warto zapisać nagłówek grubszym fontem, a treść cieńszym, wtedy tekst będzie lepiej czytelny.

4. Fonty z jednej rodziny

Wspomniany powyżej kontrast grubości łatwo osiągnąć stosując fonty z tej samej rodziny, np. Open Sans i Open Sans Semibold. Jest wiele fontów, które posiadają bardzo wiele wariantów - warto rozważyć połączenie dwóch z nich na swojej stronie. Na przykład na stronie naszego kreatora stron BOWWE znajdziecie różne wersje fontu Roboto: Roboto font, Roboto Condensed i Roboto Slab.

5. Unikanie zbyt podobnych fontów 

Ta zasada również odnosi się do kontrastu. Jeśli kontrast między fontami jest zbyt mały (czcionki są do siebie zbyt podobne), wtedy ich połączenie nie będzie wyglądało dobrze - nawet jeśli jeden z fontów jest szeryfowy, a drugi - bezszeryfowy

6. Podobny wyraz

Istnieją fonty, które są nośnikami emocji, np. mają być wyszukane, poważne, dynamiczne albo zabawne. Nie należy łączyć ze sobą czcionek z tak różnych grup, ponieważ wprowadzimy wtedy chaos komunikacyjny i wizualny.

7. Wyraziste fonty z neutralnymi

Jeżeli w nagłówku użyjesz fontu typu script (przypominającego odręczne pismo), do zapisania treści w body użyj neutralnego fontu. Użycie dwóch wyrazistych fontów, w dodatku blisko siebie, rozproszy uwagę czytelnika i będzie mu utrudniało lekturę

8. Unikanie konfliktu​​​​​​

Jeżeli dwa fonty mają zupełnie inne proporcje (np. jeden będzie miał bardzo rozstrzelone litery, a drugi skondensowane), wówczas mogą bardzo źle wyglądać połączone. Warto zwrócić sprawdzić, czy wysokość małych liter jest taka sama - wtedy istnieje większe prawdopodobieństwo, że fonty będą do siebie pasować.

Wskazówka:

Sprytne sposoby na łączenie fontów

Powyższe wskazówki doboru fontów mogą być pomocne, jednak trudno stosować suche zasady. Poniżej znajdziesz linki do pomocnych narzędzi, które ułatwią Ci trafne łączenie fontów.

Font pair

Strona przedstawia pary fontów, które dobrze razem wyglądają. Można od razu ściągnąć ze strony przygotowane pary fontów, a wszystkie czcionki są dostępne w Google Fonts.

Canva Font Combinations

Wybierasz z listy nazwę fontu, a wyszukiwarka podpowiada dobrany dla niego inny font oraz prezentuje przykład/przykłady, jak wygląda takie zestawienie czcionek.

Typ.io ​​​

Strona pokazuje różne zestawienia fontów z przykładami. Szczególną uwagę warto zwrócić na zestawienia czcionek zastosowane na stronach internetowych.

Gotów by stworzyć własną stronę?

Skorzystaj z najwygodniejszego kreatora stron, któremu zaufały już tysiące użytkowników i twórz strony, które zapewnią Ci klientów!

Zaczynamy!

Krok VII
Postaw na czytelność

Jeżeli dojdziesz do wniosku, że do Twojej marki najbardziej pasuje czcionka naśladująca odręczne pismo to… zdecydowanie nie powinieneś stosować jej jako głównego fonta na Twojej stronie internetowej. Dekoracyjne czcionki dodają szyku, ale są trudne w lekturze, a powinno Ci zależeć na tym, by użytkownicy spędzali jak najwięcej czasu na Twojej stronie www i by zapoznali się z treściami, które publikujesz.

O ile duże nagłówki czy Call-To-Action mogą być zapisane bardziej skomplikowaną graficznie czcionką, o tyle w przypadku “zwykłego tekstu” (body) znacznie lepiej użyć prostych, czytelnych fontów.

Powinieneś postawić sobie pytania:

Jaka czcionka na mojej stronie będzie najlepsza do czytania? Co wpływa na czytelność tekstu?
Zerknij na poniższą listę:

Czynniki wpływające na czytelność tekstu na stronie:

Światła międzyliterowe

Większość fontów jest pod tym względem dobrze zaprojektowana, jednak jako podstawowy font warto wybierać jego wariant uniwersalny, a nie np. narrow.

Interlinia

Zbyt mała interlinia będzie utrudniać lekturę. Najlepiej żeby interlinia wynosiła min. 120% wielkości litery (za optymalne często uznawane jest 150%)

Odstępy między akapitami

Jeszcze większą czytelność zapewni stosowanie nieco większych odstępów między akapitami

Wyrównanie tekstu

Zbyt dużo tekstu w jednym wersie i zbyt małe marginesy mogą skutecznie zniechęcać do lektury. Złota zasada mówi o 50-60 znakach w wersie jako o ideale

Kontrast

Font powinien mieć taki kolor, żeby wyróżniał się na tle, na którym jest prezentowany. Zarówno za mały, jak i za duży kontrast będą utrudniały lekturę

Rozmiar

Rozmiar czcionki sygnalizuje ważność danego elementu i pozwala podzielić tekst na czytelne sekcje. Optymalne wielkości fontów dla poszczególnych elementów:
  • Tytuły: 30 - 70,
  • Śródtytuły: 22 - 30,
  • Zwykły tekst: 16 - 20

Kursywa, pogrubienie, podkreślenie

Najlepiej stosować je oszczędnie. Podkreślenie jest stosowane na stronach www bardzo rzadko. Pogrubienie podkreśla ważność elementów, zwiększając ich widoczność. Kursywa znakomicie nadaje się do zapisu wyrażeń obcojęzycznych i cytatów

Gdy wymienione powyżej elementy będą niewłaściwie dobrane, czytanie treści Twojej strony będzie męczyć użytkownika. Wówczas opuści ją on bardzo szybko, nawet nie zapoznając się z ofertą!

Na zakończenie!

Przypomnijmy, co - krok po kroku - należy wykonać, przy wyborze fontu na stronę internetową:
  1. Określ charakter Twojej marki. Font ma wyrażać osobowość Twojej marki i pasować do stylu Twoich odbiorców.
  2. Określ cel tekstów na Twojej stronie.
  3.  Sprawdź, czy font posiada wszystkie niezbędne znaki.
  4. Sprawdź, czy font posiada odpowiednią licencję.
  5. Wybierz font: podstawowy, drugorzędny i (jeśli zajdzie potrzeba) - akcentujący. Nie stosuj więcej niż 3 różne fonty na jednej stronie www.
  6. Umiejętnie dobierz fonty na swojej stronie. 
  7. Postaw na czytelność. 
Jeśli dokonasz wyboru zgodnie z opisanym w tym artykule procesem, z pewnością będziesz zadowolony, a Twoja strona przypadnie do gustu odbiorcom!

Gotowy do zbudowania własnej strony internetowej?

Nie martw się, pomożemy Ci! Możemy też to zrobić za Ciebie!

Zacznij teraz
banner image

Stwórz własną profesjonalną stronę internetową

Zacznij teraz
1