Buzzwind1. Dlaczego font może popsuć stronę szybciej niż kolory?
Typografia to „warstwa tarcia". Źle dobrana = użytkownik się męczy i szuka wymówki żeby wyjść.
⚠️ Zła typografia
- Tekst zbyt drobny albo „cienki"
- Linie za długie — oczy gubią początek
- Nagłówki nie prowadzą — ściana tekstu
- Font ładuje się wolno — strona „skacze"
✅ Dobra typografia
- Treść „wchłania się" bez wysiłku
- Użytkownik skanuje nagłówki i dociera do CTA
- Strona wygląda profesjonalnie
- Szybkie ładowanie bez CLS
Landing page B2B – ta sama oferta, inna typografia
Wersja A: cienki font, długie linijki, małe odstępy. Wersja B: prosty font Regular, wyraźna interlinia, nagłówki H2 do przeskanowania w 3 sekundy.
Wersja B: +40% wypełnień formularza — bez zmiany treści ani układu.
+40% konwersji formularza💡 Efekt biznesowy
Jak czytanie wymaga wysiłku, mózg szuka wymówki żeby wyjść. Sprawdzamy to w audycie analityki przy wysokim bounce rate.
2. Trzy rzeczy które decydują o czytelności
Właściciele firm skupiają się na wyborze kroju. Te trzy czynniki mają często większy wpływ.
Długość linii
Za długie — oczy gubią początek. Za krótkie — poszarpane. Badania UX: ok. 50–75 znaków jako punkt odniesienia. Czasem wystarczy ograniczyć szerokość kolumny.
Odstępy — tekst potrzebuje powietrza
WCAG: interlinia min. 1.5×, odstęp po akapicie 2× rozmiaru fontu. Poniżej tego progu strona jest męcząca.
Waga fontu na mobile
Cienki font (200–300) na jasnym tle na telefonie w słońcu jest nieczytelny. Przy 60%+ ruchu mobilnego — unikaj zbyt lekkich wag w tekście głównym.
3. Serif czy sans-serif — i jak je łączyć
Sans-serif
Nowoczesność, prostota. Serwisy usługowe, SaaS, e-commerce.
Serif
Editorial, zaufanie. Długie treści, premium, kancelarie, medycyna.
⚠️ To nie jest twarda reguła
Kontekst i wykonanie ważą więcej niż kategoria fontu.
Cztery schematy parowania fontów
Ten sam sans-serif, różne wagi (400/700). Najprostsze i najczęściej najlepsze.
✓ Strony usługowe, B2B, Jamstack
Sans w tekście + serif w nagłówkach. Głębia bez chaosu.
✓ Kancelarie, medycyna, beauty
Jeden sans, gra wagą i spacingiem. Mniej = drożej.
✓ Landing pages, portfolio, SaaS
Sans + monospace do tabel, kodu i liczb.
✓ Dashboardy, dokumentacje, raporty
Pięć zasad łączenia fontów
Zasady
- Ustal role: jeden do tekstu, drugi do nagłówków.
- Kontrast celowy: dwa „charakterne" fonty się gryzą.
- Pilnuj proporcji: serif „drobno" + sans „wielko" = rozjazd.
- Max 2 rodziny + ewentualnie mono do kodu.
- Testuj polskie znaki: ąęłńóśźż obnażają słaby font.
4. Hierarchia H1/H2/H3 — dla czytelnika i Google
👤 Dla człowieka
Skanowanie nagłówków = „menu" po stronie. Lepsza hierarchia = szansa że ktoś dotrze do CTA.
🔍 Dla Google
Logiczne nagłówki pomagają Google zrozumieć temat. Sprawdzamy to przy każdym audycie technicznym SEO.
Hierarchia w praktyce
⚠️ Zasada
H3 nie wyskakuje bez H2, H2 nie wyskakuje bez H1. Wygląd ustawiasz CSS-em, nie przeskakiwaniem poziomów.
5. Typografia a Core Web Vitals
Fonty mogą spowalniać stronę i powodować „skakanie" tekstu. To uderza w CWV — szczególnie CLS.
Minimum higieny przy fontach
Ogranicz wagi do 2–3
Każda dodatkowa waga to osobny plik do pobrania.
Używaj WOFF2
Mniejszy rozmiar, szybsze ładowanie.
font-display: swap
Tekst widoczny od razu w foncie systemowym, potem podmiana. Główna przyczyna CLS.
Hostuj fonty lokalnie
Na Jamstacku/Webflow — pełna kontrola, zero zewnętrznych DNS.
6. Najczęstsze błędy — i jak naprawić bez rebrandingu
max-width: 680–760px na kolumnie tekstu.text-align: left. Justowanie = „rzeki" na mobile.7. Checklista: „czy moja typografia działa?"
- Max 2 rodziny fontów na stronie.
- Tekst czytelny na telefonie w dzień (waga min. 400, rozmiar min. 16px).
- Długość linii ok. 50–75 znaków.
- Nagłówki H2/H3 da się przeskanować w 5 sekund.
- Hierarchia logiczna — H3 nie wyskakuje bez H2.
- Wygląd nagłówków CSS-em, nie przeskakiwaniem poziomów.
- Pełne polskie znaki (ąęłńóśźż) — OK na Windows i macOS.
- Strona nie „skacze" — CLS sprawdzony w PageSpeed.
- Max 2–3 wag fontu załadowane.
- Konsekwentny styl list, cytatów i podpisów.
Typografia psuje Ci konwersję? Sprawdzimy to w audycie.
Projektujemy strony z pełną kontrolą nad typografią, wydajnością i hierarchią treści.
FAQ – najczęstsze pytania
Czy font wpływa na SEO?
Pośrednio — hierarchia nagłówków pomaga Google, złe ładowanie fontów psuje CLS (sygnał rankingowy).
Ile fontów powinna mieć strona?
1–2 rodziny. Trzy i więcej to sygnał do korekty.
Jak łączyć serif z sans-serif?
Jeden do nagłówków, drugi do tekstu. Unikaj dwóch charakternych krojów naraz.
Czy Google Fonts są OK dla wydajności?
Tak — z ograniczeniem wag (2–3) i font-display: swap. Na Jamstacku hostuj lokalnie.
Co ważniejsze — font czy spacing?
Często spacing. Zbity tekst z długimi liniami jest ciężki niezależnie od fontu.
Czy zmiana typografii wymaga rebrandingu?
Nie. Często wystarczy zmiana wag, interlinii i hierarchii nagłówków.