Wszystko co musisz wiedzieć o Typografii
Adam Misiag
autor tekstu
02.02.2025
3 minuty
Dobranie właściwej czcionki (lub fontu) jest kluczowym aspektem budowania spójnego obrazu pomiędzy wizją jaką chcesz przekazać a odbiorcą treści. Dlatego w tym artykule przeanalizujemy najważniejszy podział czcionek, pokażemy na jakie aspekty zwrócić uwagę podczas wyboru fontów oraz omówimy jak dobrać odpowiednią czcionkę, aby strona była przejrzysta i czytelna.
Jak dzielimy fonty i kiedy je używać ?
co do zasady czcionki dzielimy na szeryfowe (serif) oraz bezszeryfowe (sans-serif).
1. Szeryfowe (Serif): Charakteryzują się dodatkowymi ozdobnymi elementami, zwanych szeryfami, na końcach liter (zdjęcie po lewej). Te fonty są zazwyczaj postrzegane jako bardziej klasyczne, formalne i tradycyjne. Są idealne do wydrukowanych materiałów, takich jak książki, ulotki, strony internetowe budzące zaufanie szczególnie gdy projekt wymaga powagi i elegancji. Do przykładu fontów szeryfowych można zaliczyć np. Times New Roman, Georgia, Garamond.
2. Bezszeryfowe (Sans-serif): Nie posiadają dodatkowych ozdobników na literach (zdjęcie po prawej). Są bardziej proste, czyste i wyglądające nowocześnie. Bezszeryfowe fonty są powszechnie używane w projektowaniu stron internetowych ze względu na ich czytelność na ekranach komputerów i urządzeń mobilnych. Fonty te sprawdzają się na stronach technologicznych i start-upach, w portfolio projektantów i agencji kreatywnych lub sklepach internetowych. Do przykładu fontów bezszeryfowych można zaliczyć np. Roboto, Arial, Helvetica, Open Sans, Roboto.
Użycie tych fontów zawsze będzie bezpieczne
Garamond
Bodoni
Century Expanded
Futura
Times New Roman
Helvetica
Roboto
Użycie tych fontów zawsze będzie dobrym rozwiązaniem a wybór wielkości czcionki (zazwyczaj 14-16) zapewni czytelny przekaz oraz przejrzystość. Jeżeli jednak masz trochę czasu i chęci to warto poeksperymentować i zobaczyć co jest obecnie w trendach. Biblioteki zasobów jak envato elements lub Freepik posiadają setki różnych czcionek, co więcej są one skategoryzowane w zależności od ich popularności, dlatego wybór jest nieograniczony. Jeżeli to wydawało by się mało to warto szukać inspiracji pośród rankingu najlepiej wykonanych stron, który odbywa się co roku przez najbardziej prestiżowe serwisy poświęcone designowi UX/UI. Inspiracji mogą zapewnić również takie serwisy jak Pinterest gdzie codziennie użytkownicy dzielą się dziesiątkami pomysłów związanych z designem.
Jaki cel chcesz osiągnąć dobierając fonty ?
dobór odpowiedniego fontu do projektu powinien być zawsze uzależniony od efektu jaki chcesz osiągnąć
Czy chcesz, skoncentrować uwagę na strony treści?
użyj jednej z bezpiecznych fontów opisanych wcześniej
Czy chcesz zwrócić uwagę na jedno kluczowe słowo?
zwiększ wielkość o co najmniej 4 poziomy od bazowej
Czy chcesz budować zaufanie?
jeżeli tak wybierz czcionki o klasycznym i eleganckim stylu np. Georgia, Playfair display
Czy chcesz, aby treść była bardziej ekspresyjna i kreatywna?
użyj Bebas Neue, Mukta, ale tutaj przykładów naprawdę może być wiele
Czy chcesz, aby treść była łatwa do czytania na urządzeniach mobilnych?
użyj czcionek bezszeryfowych np. najpopularniejszej - Roboto
W jaki sposób dobierać fonty
Czcionki odgrywają jedną z najistotniejszych ról w wyglądzie i czytelności strony internetowej. Dobrze dobrane fonty mogą znacznie poprawić wrażenia użytkowników, ułatwiając nawigację i podkreślając ważne elementy.
czcionki tej samej rodziny
Jednym z najlepszych sposobów na utrzymanie spójności wizualnej strony internetowej jest użycie czcionek z tej samej rodziny. Oto kilka powodów, dlaczego jest to istotne:
Spójność: Używanie czcionek z jednej rodziny zapewnia harmonijny wygląd strony, co sprawia, że jest ona bardziej estetyczna i przyjazna dla oka.
Czytelność: Czcionki z tej samej rodziny są zaprojektowane tak, aby do siebie pasować, co ułatwia czytanie i odbiór treści.
Elastyczność: Wiele rodzin czcionek oferuje różne style (np. regular, bold, italic), co pozwala na zróżnicowanie treści bez utraty spójności.
Łączenie fontów z różnych rodzin
Jeśli chcesz uzyskać ciekawy efekt wizualny, możesz zastosować kombinację czcionek szeryfowych i bezszeryfowych. Oto jak najlepiej to zrobić:
Nagłówki i treść główna: Użycie szeryfowego fontu na nagłówku (np. Garamond) i bezszeryfowego na treść główną (np. Roboto) doda twojej treści elegancji i profesjonalizmu.
Akcenty: Możesz użyć kontrastującego fontu na akcenty, aby przyciągnąć uwagę dla ważnych elementów, takich jak cytaty, przyciski lub linki.
"Hierarchia wizualna: Upewnij się, że nagłówki są wyraźnie większe lub bardziej wyróżnione niż tekst główny, co pomoże użytkownikom szybko zorientować się w strukturze treści."
"Testowanie: Przed wdrożeniem czcionek na stronie, przetestuj różne kombinacje, aby upewnić się, że są one czytelne na różnych urządzeniach i w różnych przeglądarkach."
Ogranicz się do trzech rodzajów czcionek
Bez względu na to jakiego dokonasz wyboru miej na względzie, aby nie przesadzić z ilością fontów bo spowoduje to wewnętrzny chaos i strona nie będzie wyglądała profesjonalnie. Dodatkowo każdy font musi być pobrany i wyrenderowany przez przeglądarkę, więc im więcej ich używamy, tym więcej czasu strona będzie się wczytywać.