Czcionki i kolory na stronie firmowej - jak dobrać typografię i paletę kolorów

Kiedy klient przesyła mi brief nowej strony firmowej, niemal zawsze pada to samo zdanie: "czcionki i kolory zostawiamy Tobie". Na pierwszy rzut oka wygląda to jak zaufanie do specjalisty. W praktyce bywa problemem, bo dobry dobór typografii i palety kolorów nie jest wyłącznie kwestią gustu - to decyzja, która wpływa na czytelność, zaufanie klienta i spójność całej komunikacji wizualnej marki.

W tym poradniku tłumaczę, jak podchodzić do tych wyborów krok po kroku. Nie wymaga to wykształcenia graficznego ani studiowania teorii koloru. Wystarczy kilka prostych zasad, które stosuję w każdym projekcie - od jednoosobowych firm usługowych po sklepy z kilkuset produktami.

Dlaczego typografia i kolory mają realne znaczenie

Wyobraź sobie, że wchodzisz do biura po raz pierwszy. W ciągu kilku sekund oceniasz: czy to miejsce wygląda profesjonalnie, czy masz do niego zaufanie, czy chcesz tu zostawić pieniądze. Na stronie internetowej dzieje się dokładnie to samo - tylko że zamiast wyposażenia wnętrza, oceniasz typografię, kolory i układ.

Badania nad zachowaniem użytkowników pokazują, że większość osób decyduje, czy zostać na stronie, w ciągu kilku pierwszych sekund. Nieczytelna czcionka albo agresywna, niespójna paleta barw to sygnał, że coś jest nie tak - nawet jeśli użytkownik nie umie tego nazwać. Odchodzi.

Zasada dwóch fontów

Najczęstszy błąd, jaki widzę na stronach robionych bez projektanta: pięć różnych czcionek, każda w innym stylu. Efekt wygląda jak projekt zrobiony przez kilka niezależnych osób, które się ze sobą nie komunikowały.

Złota zasada: dwa kroje pisma. Jeden do nagłówków, jeden do tekstu głównego. Tyle.

Fontem nagłówkowym możesz sobie pozwolić na nieco więcej charakteru - ozdobna bezszeryfowa, delikatna kursywa albo geometryczny sans-serif. Font treściowy musi być przede wszystkim czytelny w długich blokach tekstu. Tu bezpiecznym wyborem są klasyczne bezszeryfowe: Open Sans, Lato, Roboto, Nunito.

Trzecia czcionka to absolutne maksimum i tylko wtedy, gdy pełni wyraźnie inną funkcję - np. oznacza cytaty albo wyróżnia nagłówki sekcji. Cztery fonty i więcej to już chaos.

Gdzie szukać fontów? Google Fonts (fonts.google.com) to bezpłatna biblioteka kilkuset krojów pisma z licencją open source. W WordPress wiele motywów (Blocksy, Astra, Kadence) integruje Google Fonts bezpośrednio w panelu Customizera - wybierasz z listy, nie musisz dotykać kodu.

Minimalna wielkość tekstu - i dlaczego 12 px to za mało

Kiedy przeglądasz starsze strony w internecie, często widzisz tekst tak drobny, że musisz przybliżać ekran. To relikt czasów, gdy strony projektowano głównie na duże monitory.

Dziś zasada jest prosta: minimum 16 px dla tekstu akapitowego. Większość doświadczonych designerów ustawia 17-18 px, bo ekrany o wysokiej rozdzielczości i telefony wymagają nieco więcej miejsca na wygodne czytanie.

Hierarchię rozmiarów buduj stopniowo:

• Tekst główny: 16-18 px
• H3 / podtytuły: 20-24 px
• H2 / nagłówki sekcji: 24-32 px
• H1 / główny nagłówek strony: 32-48 px

Rozstaw linii (line-height) to kolejna niedoceniana zmienna. Dla tekstu akapitowego optymalny jest zakres 1,5-1,7. Zbyt gęsto upakowane linie męczą oczy, zbyt luźno rozstawione utrudniają śledzenie tekstu.

Paleta kolorów - ile to za dużo

Paleta marki to nie kolekcja ulubionych kolorów właściciela firmy. To zestaw barw, które razem tworzą spójny, rozpoznawalny wizerunek - i pasują do tego, co firma robi.

Struktura palety dla strony firmowej wygląda zwykle tak:

Kolor dominujący - pokrywa największą powierzchnię strony. Dla większości stron firmowych to biel lub bardzo jasny szary - tło jest niewidoczne, ale wszystko na nim jest czytelne.

Kolor marki (brandowy) - główny kolor identyfikacji. Pojawia się w nagłówkach, przyciskach CTA, ważnych elementach nawigacji. To ten kolor, który ludzie kojarzą z firmą.

Kolor uzupełniający - kontrastuje lub harmonizuje z kolorem marki. Używany rzadziej, do oznaczania sekcji, ramek, ikon.

Akcent - zwraca uwagę na jeden konkretny element: ofertę specjalną, gwarancję, certyfikat. Powinien być stosowany oszczędnie.

Psychologia koloru w praktyce - bez przesady

Psychologia koloru to realna dziedzina wiedzy, ale często jest traktowana jak magia. "Użyj czerwonego, to kupią więcej" - takie rady powtarzają się w artykułach od lat i nie mają solidnego oparcia w badaniach.

Co jest natomiast prawdą: kolory niosą kulturowe i emocjonalne skojarzenia, które zmieniają się wolno. Na polskim i niemieckim rynku, na którym pracuję, pewne zestawienia są dość stabilne.

Niebieski i granat - zaufanie, profesjonalizm, stabilność. To dlatego banki, firmy prawnicze i instytucje finansowe sięgają po ten kolor od dekad. Jeśli prowadzisz firmę konsultingową albo kancelarię, granat jest bezpiecznym, sprawdzonym wyborem.

Zielony - zdrowie, natura, ekologia, a w odcieniach butelkowych - również spokój i prestiż. Firmy cateringowe, studia jogi, marki organiczne i firmy ogrodnicze naturalnie ciążą ku zieleni.

Pomarańczowy i żółty - energia, optymizm, przystępność cenowa. Dobrze sprawdzają się w e-commerce i usługach masowych, gdzie chcemy być postrzegani jako dostępni i bezpośredni. W nadmiarze mogą jednak obniżać postrzeganą jakość.

Czerń i ciemne szarości - elegancja, ekskluzywność, minimalizm. Modne, dobrze wyglądają na ekranach o wysokiej rozdzielczości. Wymagają jednak starannej pracy ze spacingiem i typografią - na ciemnym tle wszystko musi być perfekcyjnie wyrównane.

Biały i jasne szarości - czystość, przestrzeń, nowoczesność. Bezpieczne jako tło dla większości branż.

U klienta z Poznania, który prowadzi jednoosobową firmę doradczą w branży IT, wybraliśmy głęboki granat jako kolor marki, jasny szary jako tło sekcji i pomarańczowy jako akcent dla przycisków. Efekt: strona wygląda profesjonalnie i poważnie, ale przyciski "Umów konsultację" są wyraźne i zachęcające. Kontrast granatu z białym tle: 8,2:1 - wysoko powyżej wymaganego minimum.

Kontrast tekstu i tła - standard, który się opłaca

Kontrast między tekstem a tłem to nie tylko kwestia dostępności dla osób słabowidzących. To jeden z najważniejszych czynników czytelności dla wszystkich użytkowników - szczególnie w słonecznym otoczeniu, gdzie ekran telefonu jest słabiej widoczny.

Standard WCAG (Web Content Accessibility Guidelines) definiuje minimalne wartości kontrastu. Dla tekstu normalnej wielkości to 4,5:1 na poziomie AA. Dla tekstu powiększonego (powyżej 18 px) wystarczy 3:1.

Najczęstszy błąd: jasny szary tekst na białym tle. Wygląda minimalistycznie i elegancko w projekcie Figma, ale na ekranie telefonu w słońcu staje się nieczytelny. Kolor #999999 na białym tle daje kontrast 2,85:1 - poniżej minimum.

Praktyczna zasada: jeśli nie jesteś pewny, czy kontrast jest wystarczający - znaczy, że jest za mały. Dobrze czytelny tekst nie wymaga sprawdzania.

Do szybkiej weryfikacji używam narzędzia WebAIM Contrast Checker - bezpłatne, online, wystarczy wpisać dwa kody szesnastkowe i od razu widać wynik. Projekty, które zlecam przy tworzeniu stron internetowych, zawsze przechodzą ten test przed przekazaniem klientowi.

Przykładowa paleta dla firmy usługowej

Przyklad: firma budowlana, kilku pracowników, obsługuje klientów indywidualnych w Polsce. Chce wyglądać solidnie i budzić zaufanie - nie być najtańszym wykonawcą, ale też nie pozycjonować się jako luksusowy boutique.

Paleta:

• Tło główne: biały (#FFFFFF)
• Kolor marki: ciemny granat (#1A2E4A) - nagłówki, przyciski CTA, logo
• Kolor uzupełniający: stalowy niebieski (#4A7BAB) - ikony, ramki, belki informacyjne
• Akcent: bursztynowy (#E8960A) - wyróżnienia, odznaki "Bezpłatna wycena", strzałki
• Tekst: głęboka czerń (#1C1C1C) - akapity, etykiety, opisy

Fonty:

• Nagłówki: Raleway SemiBold - geometryczna bezszeryfowa, nowoczesna ale nie sterylna
• Treść: Open Sans Regular 17 px / line-height 1,6

Efekt: strona wygląda stabilnie i profesjonalnie, przyciski są wyraźne, a bursztynowy akcent sprawia, że oferty specjalne i USP są dobrze widoczne. Kontrast granatu na białym: 13,7:1 - perfekcyjnie czytelny.

Tę samą logikę możesz zaadaptować do swojej branży, zamieniając granat na kolor odpowiedni dla Twojej działalności - o tym piszę więcej w artykule o tym, czym jest strona firmowa i co powinna zawierać.

Jak to wszystko ułożyć w praktyce

Kiedy zaczynam pracę nad stroną internetową dla nowego klienta, mam stały schemat działania w obszarze typografii i kolorów:

Pierw patrzę na logo i materiały, które klient już ma - wizytówki, oferty PDF, wcześniejszą stronę. Z tego wyciągam kolory, które są już zakorzenione w percepcji klientów firmy. Zmiana koloru marki to decyzja, którą warto rozważyć, ale nie robić pochopnie.

Potem definiuję rolę każdego koloru w systemie - który jest tłem, który CTA, który akcent. Zapisuję kody hex i używam ich konsekwentnie w całym projekcie.

Fonty wybieram na podstawie branży i tonu komunikacji. Kancelaria prawna: serif albo klasyczny sans-serif, nic ozdobnego. Agencja kreatywna: można pozwolić sobie na odważniejszy nagłówkowy font. Sklep z kosmetykami naturalnymi: coś lekkiego i organicznego. Sklep z elektroniką: geometryczny, techniczny sans-serif.

Na końcu sprawdzam kontrast każdej kombinacji tekst/tło i testuję na telefonie. To zajmuje kwadrans, a eliminuje błędy, które mogą kosztować klientów i pozycję w wynikach wyszukiwania. O SEO i widoczności strony piszę też w kontekście różnych rodzajów stron internetowych.

Budowanie strony firmowej to projekt, w którym kolory i czcionki to nie dekoracja - to fundament komunikacji wizualnej. Dobrze dobrane, spójnie stosowane, z właściwym kontrastem i czytelnością: te dwie decyzje są równie ważne jak treść i struktura strony. Jeśli chcesz, żebym zajął się tym kompleksowo, zapraszam na stronę kontaktową.

Najczęstsze pytania

Ile czcionek wybrać na stronę firmową?

Najlepiej dwie. Jedna do nagłówków, druga do tekstu głównego. Trzy fonty to absolutne maksimum i tylko wtedy, gdy trzecia pełni wyraźnie odrębną rolę, np. w cytacie albo stopce. Więcej czcionek nie buduje charakteru strony - rozmywa go.

Jaki rozmiar czcionki wybrać dla tekstu na stronie?

Minimum 16 px dla tekstu akapitowego. Większość designerów ustawia 17-18 px, bo ekrany retina i telefony wymagają nieco więcej miejsca. Nagłówki H1 zaczynają się od 28-32 px wzwyż. Poniżej 14 px tekst jest nieczytelny na telefonach.

Jak sprawdzić, czy kontrast kolorów na mojej stronie jest wystarczający?

Użyj bezpłatnego narzędzia WebAIM Contrast Checker (contrast-ratio.com lub webaim.org/resources/contrastchecker). Wpisujesz kolor tekstu i tła, a narzędzie podaje stosunek kontrastu. Minimum to 4,5:1 dla tekstu normalnego. Sprawdź zarówno jasny tryb, jak i wersję mobilną.

Czy kolory na stronie naprawdę wpływają na sprzedaż?

Tak, choć nie ma magicznego koloru, który podwoi konwersje. Kolory wpływają na to, jak użytkownik postrzega Twoją markę: czy wzbudza zaufanie, czy pasuje do branży, czy przyciąga uwagę. Niespójna paleta obniża zaufanie, zanim klient zdąży przeczytać pierwszą linijkę tekstu.

Skąd wziąć bezpłatne czcionki do strony WordPress?

Google Fonts (fonts.google.com) to największa bezpłatna biblioteka krojów pisma z licencją open source. W WordPress możesz je aktywować przez popularne motywy (Blocksy, Astra, Kadence) z panelu Customizer, bez pisania kodu. Alternatywą jest font Adobe (płatna subskrypcja) lub Bundle Fonts.

Jakie kolory pasują do strony firmy usługowej?

Firmy usługowe najczęściej sięgają po granat lub niebieski (profesjonalizm, zaufanie), szary (neutralność, powaga) i biały jako dominujące tło. Akcent w kolorze marki - np. pomarańczowy lub zielony - wyróżnia przyciski i kluczowe komunikaty. Unikaj zbyt jaskrawych zestawień, które rozpraszają zamiast skupiać.

Czy muszę trzymać się tych samych kolorów i fontów na całej stronie?

Tak, to fundament spójnej identyfikacji wizualnej. Zmiana fontu czy koloru przycisku w połowie strony dezorientuje użytkownika i obniża poczucie profesjonalizmu. Jeśli pracujesz ze mną nad stroną internetową, na początku ustalamy system kolorów i typografię, żeby już w trakcie projektowania wszystko trzymało się jednej linii.