Poradnik
Jak dobrać czcionkę na stronę internetową? Przewodnik po wyborze fontów
Dobra czcionka na stronę to przede wszystkim czytelna czcionka: zwykle bezszeryfowa w tekście, 16–18 px, maksymalnie dwie rodziny fontów na całą witrynę. Charakter marki możesz pokazać w nagłówkach.
W skrócie
Wybierz czytelny font, najczęściej bezszeryfowy (np. Roboto, Open Sans, Lato), w tekście głównym ustaw 16–18 px, nagłówki H1 32–48 px, H2 24–32 px. Używaj najwyżej dwóch rodzin fontów. Font na cudzej stronie sprawdzisz rozszerzeniem WhatFont lub inspektorem przeglądarki. Ładuj czcionki z własnego serwera w formacie WOFF2, aby nie spowalniać strony.
Czcionki to ważny element każdego projektu strony. Font wpływa na to, jak odbierana jest Twoja witryna oraz jak czytelna i intuicyjna jest dla użytkowników. W tym przewodniku pokazujemy, jak wybrać fonty na stronę, jak je zmieniać i dostosowywać oraz jak sprawdzić, jakiej czcionki użyto na innej stronie.
Dlaczego dobór czcionki jest tak ważny?
Czcionka, tak jak kolory czy układ, wpływa na odbiór całej witryny. Ma znaczenie nie tylko dla estetyki, ale przede wszystkim dla czytelności, czyli dla doświadczenia użytkownika (UX).
Font musi być czytelny zarówno na komputerze, jak i na telefonie. Trudne do odczytania litery zniechęcają do dalszego przeglądania i zwiększają liczbę osób, które szybko opuszczają stronę. Najlepsza czcionka to taka, która łączy estetykę z funkcjonalnością.
Liczy się też dopasowanie do grupy docelowej. Strony edukacyjne, prawnicze czy biznesowe dobrze wyglądają z klasycznymi fontami szeryfowymi, np. Georgia. Witryny kreatywne, jak portfolio artystów czy fotografów, mogą sięgnąć po wyrazistsze fonty bezszeryfowe, np. Lato czy Montserrat. Dobór typografii to część większego procesu, który opisujemy przy usłudze projektowanie UX/UI.
Czym różnią się fonty szeryfowe i bezszeryfowe?
| Szeryfowe | Bezszeryfowe | |
|---|---|---|
| Wygląd | Małe „ogonki” (szeryfy) na końcach liter | Proste litery bez ozdobników |
| Charakter | Klasyczny, elegancki, formalny | Nowoczesny, minimalistyczny |
| Przykłady | Times New Roman, Georgia, Merriweather | Arial, Helvetica, Roboto, Open Sans |
| Gdzie się sprawdzają | Nagłówki, długie artykuły, marki premium | Tekst na ekranach, interfejsy, strony firmowe |
Jakie czcionki są najlepsze na stronę internetową?
- Roboto: jeden z najczęściej używanych fontów w sieci. Czytelny, neutralny, z wieloma wariantami.
- Open Sans: bardzo czytelny na różnych urządzeniach, dobry do długich tekstów.
- Lato: nowoczesny font bezszeryfowy, łączy prostotę z elegancją. Lubiany na stronach kreatywnych.
- Montserrat: dobry wybór do nagłówków i wyróżnień. Nowoczesny i przyciągający uwagę.
- Inter: zaprojektowany z myślą o ekranach, świetny w interfejsach i małych rozmiarach.
Sprawdź, czy wybrany font ma polskie znaki (ą, ę, ś, ź, ż). Ogranicz się do dwóch rodzin: jednej do nagłówków, drugiej do tekstu. Więcej krojów to wolniejsza strona i chaos wizualny.
Jaki rozmiar czcionki wybrać?
| Element | Zalecany rozmiar |
|---|---|
| Tekst główny | 16–18 px |
| Nagłówek H1 | 32–48 px |
| Nagłówek H2 | 24–32 px |
| Przyciski CTA | co najmniej 18–24 px |
Zadbaj też o interlinię (ok. 1,5 wysokości litery w tekście), długość wiersza (ok. 60–80 znaków) i kontrast tekstu z tłem. Fonty powinny skalować się z rozmiarem ekranu, aby były równie czytelne na smartfonie i na dużym monitorze. Więcej o tym w artykule o tym, dlaczego responsywność strony jest tak ważna.
Jak sprawdzić, jaki font został użyty na stronie?
Często trafiasz na czcionkę, która Ci się podoba, ale nie wiesz, jak się nazywa. Rozpoznasz ją w kilka sekund.
Narzędzia do wykrywania fontów
- WhatFont: rozszerzenie przeglądarki, które pokazuje nazwę fontu po najechaniu kursorem na tekst. Działa w Chrome i innych popularnych przeglądarkach.
- Fontanello: rozszerzenie pokazujące szczegóły czcionki: nazwę, grubość, styl, rozmiar.
- Font Squirrel: biblioteka darmowych fontów z narzędziem Matcherator, które rozpoznaje czcionkę na wgranym obrazie.
Jak sprawdzić czcionkę w inspektorze przeglądarki?
- Otwórz stronę, którą chcesz przeanalizować.
- Kliknij tekst prawym przyciskiem myszy i wybierz „Zbadaj”.
- W panelu stylów znajdź właściwość
font-family. W zakładce „Obliczone” (Computed) zobaczysz też font faktycznie wyrenderowany.
Jak zmienić czcionkę na swojej stronie?
Google Fonts
Google Fonts to największa biblioteka darmowych fontów. Aby dodać czcionkę:
- Wejdź na fonts.google.com i wybierz font.
- Zaznacz tylko potrzebne grubości (np. 400 i 700).
- Pobierz pliki i umieść je na swoim serwerze w formacie WOFF2, a następnie dodaj regułę
@font-facew CSS. Możesz też wkleić gotowy kod linku w sekcji<head>.
Hostowanie fontów u siebie jest szybsze i bezpieczniejsze prawnie: przy ładowaniu z serwerów Google przeglądarka przesyła do nich adres IP użytkownika, co bywa problemem w świetle RODO.
Czcionki w WordPressie
W nowszych wersjach WordPressa z motywami blokowymi fonty dodasz w Bibliotece czcionek w edytorze witryny (Wygląd → Edytor → Style → Typografia). WordPress pobierze pliki z Google Fonts i zapisze je na Twoim serwerze. W klasycznych motywach zmienisz font w ustawieniach motywu lub za pomocą wtyczki do zarządzania czcionkami.
Jak czcionki wpływają na SEO i szybkość strony?
- Szybkość ładowania: każdy font i każda grubość to osobny plik. Zbyt wiele niestandardowych fontów spowalnia stronę i pogarsza Core Web Vitals.
- Stabilność układu: ustaw
font-display: swapi dobierz font zapasowy o podobnych proporcjach, aby tekst nie „skakał” po załadowaniu czcionki. - Czytelność: dobrze dobrane fonty ułatwiają czytanie i zwiększają zaangażowanie użytkowników.
- Responsywność: tekst musi być czytelny na każdym urządzeniu, także bez powiększania na telefonie.
Typografia to także element formularzy i przycisków. Zobacz, jak zaprojektować formularz kontaktowy, który ludzie chętnie wypełniają.
FAQ
Częste pytania.
Nie ma tu Twojego pytania? Napisz albo zadzwoń, odpowiemy w ciągu jednego dnia roboczego.
Policz orientacyjny kosztJak sprawdzić, jaka czcionka jest użyta na stronie internetowej?
Najszybciej zrobisz to rozszerzeniem przeglądarki, np. WhatFont lub Fontanello: po najechaniu kursorem na tekst zobaczysz nazwę fontu, rozmiar i grubość. Bez instalowania czegokolwiek kliknij tekst prawym przyciskiem, wybierz „Zbadaj” i w panelu stylów znajdź właściwość font-family. Font ze zrzutu ekranu rozpoznasz narzędziami typu Font Squirrel Matcherator.
Jaki rozmiar czcionki jest najlepszy na stronę?
Dla tekstu głównego standardem jest 16–18 pikseli, bo taki rozmiar jest wygodny do czytania zarówno na komputerze, jak i na telefonie. Nagłówki H1 ustaw zwykle na 32–48 px, H2 na 24–32 px, a tekst przycisków co najmniej na 18 px. Rozmiary warto skalować płynnie względem szerokości ekranu.
Jakie są najpopularniejsze czcionki na strony internetowe?
Do najczęściej używanych należą darmowe fonty z Google Fonts: Roboto, Open Sans, Lato, Montserrat, Inter i Poppins. Wszystkie dobrze obsługują polskie znaki i mają wiele grubości. Z fontów szeryfowych popularne są Georgia, Merriweather i Playfair Display, najczęściej w nagłówkach lub na stronach o klasycznym charakterze.
Czy czcionki mogą wpływać na SEO strony?
Pośrednio tak. Duża liczba fontów i wariantów wydłuża ładowanie strony i może pogorszyć wskaźniki Core Web Vitals, a nieczytelny tekst zniechęca użytkowników do zostania na stronie. Ogranicz liczbę fontów, używaj formatu WOFF2, ustaw font-display: swap i hostuj pliki na własnym serwerze.
Zobacz też
Powiązane treści.
Porozmawiajmy.
Wypełnij krótki brief, a na konsultację przyjdziemy z pierwszymi pomysłami zamiast z listą pytań.