Ta sama treść w dwóch czcionkach to dwie różne firmy w oczach klienta. Czcionki na stronie internetowej oceniamy w ułamku sekundy. Jedna wygląda na pewną siebie i uporządkowaną, druga na przypadkową i tanią - zanim ktokolwiek przeczyta pierwsze zdanie.
Typografia to nie ozdoba. To pierwsza rzecz, którą klient oceni na Twojej stronie, zwykle nieświadomie. Dobrze dobrane czcionki budują zaufanie, złe - podkopują je w sekundę.
Krótka odpowiedź: na stronie firmowej użyj 2, maksymalnie 3 czcionek - jednej do nagłówków i jednej do tekstu. Czcionki na stronie internetowej wyglądają profesjonalnie wtedy, gdy są spójne, czytelne i użyte konsekwentnie na każdej podstronie.
Spis treści
1. Font, czcionka czy krój pisma - co naprawdę wybierasz
Te trzy słowa używamy zamiennie, ale znaczą coś innego. Krój pisma to cały styl liter, na przykład Roboto. Font to konkretna odmiana tego kroju - Roboto Bold w rozmiarze 16 pikseli.
Czcionka to potoczne, polskie określenie na jedno i drugie. W praktyce wybierasz krój pisma, a potem jego odmiany. Ta różnica ma znaczenie, gdy planujesz wydajność strony - o tym za chwilę.
Wskazówka praktyczna: gdy projektant mówi o krojach pisma, a Ty o czcionkach - mówicie o tym samym. Nie daj się zbić z tropu terminologią.
2. Ile czcionek powinno być na stronie (zasada 2, maksymalnie 3)
Czcionki na stronie firmowej to zwykle 2 kroje pisma - jeden do nagłówków, drugi do tekstu. Trzeci możesz dodać tylko na akcenty, na przykład cytaty lub przyciski. Więcej niż 3 to już chaos.
Każdy dodatkowy krój osłabia spójność marki i spowalnia stronę. Gdy widzisz witrynę, która wygląda tanio, często powodem jest właśnie zbyt wiele przypadkowych czcionek użytych obok siebie.
Wskazówka praktyczna: zamiast dokładać nowe kroje, wykorzystaj odmiany jednego - zwykłą, pogrubioną, lekką. Dostaniesz różne poziomy ważności bez utraty spójności.
3. Czcionki szeryfowe czy bezszeryfowe - które na stronę firmową
Szeryfowe mają małe zakończenia przy literach - jak Times New Roman czy Georgia. Bezszeryfowe są gładkie i proste, jak Arial czy Roboto. Każda grupa niesie inny przekaz.
Bezszeryfowe czytają się lepiej na ekranie i pasują do większości stron firmowych. Szeryfowe dają wrażenie tradycji i prestiżu - dobrze wypadają u prawnika, kancelarii czy marki premium.
| Cecha | Szeryfowe | Bezszeryfowe |
|---|---|---|
| Wygląd | Zakończenia przy literach | Gładkie, proste |
| Przekaz | Tradycja, prestiż | Nowoczesność, prostota |
| Czytelność na ekranie | Słabsza w małych rozmiarach | Bardzo dobra |
| Najlepsze do | Kancelarie, marki premium | Większość firm, usługi, sklepy |
Wskazówka praktyczna: jeśli nie masz pewności, wybierz bezszeryfową czcionkę na tekst. Na ekranie prawie zawsze wygrywa czytelnością.
4. Jak parować dwie czcionki, żeby do siebie pasowały
Zasada jest prosta: kontrast, ale nie konflikt. Nagłówek i tekst mają się różnić na tyle, żeby było widać hierarchię, ale nie kłócić się stylem.
Najpewniejsze parowanie fontów na stronie to szeryfowy nagłówek plus bezszeryfowy tekst - lub odwrotnie. Druga bezpieczna droga to dwie odmiany tej samej rodziny, na przykład odmiana lekka i pogrubiona.
- Nagłówek wyrazisty i mocny - tekst spokojny i czytelny
- Jedna czcionka szeryfowa, druga bezszeryfowa - jasny kontrast
- Unikaj dwóch podobnych krojów - wyglądają jak błąd, nie decyzja
Wskazówka praktyczna: typografia działa razem z paletą barw. Dopiero kolory i typografia razem tworzą spójną tożsamość marki, którą klient zapamięta.
5. Google Fonts, licencje i RODO - o czym mało kto mówi
Google Fonts to darmowa biblioteka setek krojów, które można używać komercyjnie. Pod względem licencji jest bezpieczna. Problem pojawia się gdzie indziej - w RODO.
W 2022 roku sąd krajowy w Monachium orzekł, że ładowanie Google Fonts wprost z serwerów Google narusza RODO. Powód: bez zgody użytkownika jego adres IP trafia na serwery w USA. To realny problem prawny także dla polskich stron.
Rozwiązanie jest proste i darmowe: self-hosting. Pobierasz pliki fontów i serwujesz je z własnego serwera, zamiast łączyć się z Google. Strona działa tak samo, a adres IP użytkownika nie wychodzi na zewnątrz.
Wskazówka praktyczna: sprawdź, czy Twoja strona ładuje fonty z domeny fonts.googleapis.com. Jeśli tak - warto przejść na self-hosting. Szczegóły licencji znajdziesz w oficjalnym FAQ Google Fonts.
6. Czytelność i wydajność - rozmiar, kontrast, szybkość ładowania
Najlepsza czcionka nic nie da, jeśli tekst jest za mały lub blady. Dla tekstu na ekranie optymalny rozmiar to 16-18 pikseli. Mniej męczy oczy, zwłaszcza na telefonie.
Zadbaj też o kontrast - ciemny tekst na jasnym tle czyta się najlepiej. Szary tekst na białym tle wygląda elegancko na makiecie, ale realnym użytkownikom utrudnia czytanie.
Fonty wpływają też na szybkość strony i Core Web Vitals - metryki Google mierzące wydajność (LCP, INP). Każda dodatkowa grubość i odmiana to kolejny plik do pobrania. Za dużo wariantów spowalnia ładowanie.
- Użyj font-display: swap - tekst pokazuje się od razu, zanim font się doładuje
- Wczytuj tylko potrzebne odmiany, nie cały zestaw grubości
- Rozważ subsetting - tylko polskie i łacińskie znaki, bez alfabetów, których nie używasz
Wskazówka praktyczna: na telefonie fonty muszą się skalować płynnie. Dlatego responsywna strona internetowa dobiera rozmiary w rem i clamp, a nie w sztywnych pikselach.
Czcionki na stronie - co warto zapamiętać
Dobre czcionki na stronie nie rzucają się w oczy - po prostu działają. Klient czyta bez wysiłku, marka wygląda spójnie, a strona ładuje się szybko. Oto co warto zapamiętać:
- 2, maksymalnie 3 czcionki - nagłówki, tekst, opcjonalny akcent
- Bezszeryfowa na tekst - najlepsza czytelność na ekranie
- Kontrast bez konfliktu - nagłówek i tekst wyraźnie różne
- Self-hosting fontów - zgodność z RODO i szybsza strona
- Rozmiar 16-18 pikseli - komfort czytania na każdym urządzeniu
Dobór czcionek wygląda prosto, dopóki nie trzeba pogodzić estetyki, RODO i wydajności na raz. To właśnie ten element wdrażamy dla Ciebie - od wyboru krojów, przez self-hosting, po skalowanie na mobile.
Planujesz nową stronę dla firmy w Garwolinie lub okolicy? Sprawdź, co musi zawierać dobra strona firmowa. Możesz też od razu poprosić o wycenę - dobierzemy typografię spójną z Twoją marką.
Często zadawane pytania
Ile czcionek powinno być na stronie internetowej?
Najlepiej 2, maksymalnie 3 - jedna do nagłówków, jedna do tekstu, opcjonalnie trzecia na akcenty. Więcej krojów osłabia spójność marki i spowalnia stronę. Często wystarczy jeden krój w kilku odmianach.
Jaka czcionka wygląda najbardziej profesjonalnie na stronie firmowej?
Nie chodzi o konkretny krój, tylko o spójność i czytelność. Bezszeryfowe kroje jak Roboto, Inter czy Lato wyglądają czysto i nowocześnie. Profesjonalizm tworzy konsekwentne użycie na każdej podstronie.
Czy lepsza jest czcionka szeryfowa czy bezszeryfowa na stronie?
Do tekstu na ekranie zwykle lepsza jest bezszeryfowa - czyta się ją płynniej. Szeryfowa sprawdza się w nagłówkach oraz u marek premium i kancelarii, gdzie liczy się wrażenie tradycji.
Jak połączyć dwie czcionki, żeby do siebie pasowały?
Postaw na kontrast bez konfliktu - szeryfowy nagłówek plus bezszeryfowy tekst albo odwrotnie. Bezpieczną alternatywą są dwie odmiany tej samej rodziny. Unikaj dwóch podobnych krojów, bo wyglądają jak błąd.
Czy Google Fonts można używać komercyjnie i czy są zgodne z RODO?
Licencyjnie tak - Google Fonts wolno używać komercyjnie za darmo. Problem to RODO. Ładowanie ich wprost z serwerów Google przekazuje adres IP użytkownika do USA. Sąd w Monachium uznał to w 2022 roku za naruszenie. Rozwiązanie to self-hosting fontów na własnym serwerze.
Jaki rozmiar czcionki jest optymalny dla tekstu na stronie?
Dla tekstu podstawowego to 16-18 pikseli. Mniejszy męczy oczy, zwłaszcza na telefonie. Nagłówki skaluj proporcjonalnie w górę, a na mobile używaj jednostek rem i clamp dla płynnego skalowania.