Pary czcionek: jakie czcionki do siebie pasują

Wybierz parę czcionek i od razu zobacz, jak nagłówek i tekst ze sobą współgrają – także z własnym tekstem. Każda para korzysta wyłącznie z preinstalowanych czcionek systemowych: nic do pobierania, żadnych zapytań do Google ani innych serwerów. Do każdej pary dostajesz uzasadnienie, zmierzoną wysokość x i dostępność w poszczególnych systemach.

Para czcionek

Rozmiar czcionki tekstu

Nagłówek jest pokazywany 1,8 raza większy.

Wpisane dane są zapisywane tylko w tej przeglądarce.

Podgląd

Sztuka dobrego nagłówka

Dobrej typografii nie widać. Spokojnie prowadzi wzrok przez tekst, tworzy czytelną hierarchię i pozwala mówić treści – na telefonie tak samo jak na dużym monitorze.

Własny nagłówek (opcjonalnie)Własny tekst (opcjonalnie)

Twój tekst zostaje w tym oknie przeglądarki – nie jest zapisywany, wysyłany ani dodawany do paska adresu.

CSS do skopiowania

h1, h2, h3 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  line-height: 1.2;
}
body {
  font-family: Verdana, Tahoma, "Segoe UI", sans-serif;
  font-size: 18px;
  line-height: 1.6;
}

Wszystkie pary czcionek

Wynik

Para czcionek: Georgia + Verdana
Dlaczego to działa: Klasyczny kontrast szeryfowej i bezszeryfowej: Georgia do nagłówków, Verdana do tekstu. Obie zaprojektował Matthew Carter z myślą o ekranie, dlatego ich proporcje i rytm do siebie pasują. Verdana ma bardzo dużą wysokość x i jest szeroka – ustaw tekst o ok. 1 px mniejszy.
Wysokość x (zmierzona): Georgia: 0,481 em · Verdana: 0,545 em – tekst wygląda na ok. 13% większy przy tym samym rozmiarze czcionki
Dostępność w systemach: System Nagłówek Tekst
Windows 10/11 Georgia Verdana
macOS Georgia Verdana
iPhone/iPad Georgia Verdana
Android Noto Serif (zastępcza) Roboto (zastępcza)

System	Nagłówek	Tekst
Windows 10/11	Georgia	Verdana
macOS	Georgia	Verdana
iPhone/iPad	Georgia	Verdana
Android	Noto Serif (zastępcza)	Roboto (zastępcza)

Jak to obliczamy

Jak łączyć czcionki

Dwie czcionki pasują do siebie, gdy są wyraźnie różne, ale podobnie zbudowane. Najpewniejsza droga to kontrast kroju szeryfowego z bezszeryfowym: jeden niesie nagłówki, drugi tekst. Dwa podobne kroje szeryfowe albo dwa podobne bezszeryfowe łatwo wyglądają za to jak pomyłka.

Równie ważna jest wysokość x – wysokość małych liter w stosunku do rozmiaru czcionki. Czcionki z dużą wysokością x (Verdana: 0,545 em) przy tym samym rozmiarze wyglądają na wyraźnie większe niż czcionki z małą (Calibri: 0,464 em). Jeśli wysokości x w parze bardzo się różnią, wyrównaj je rozmiarem czcionki. Pokazane wartości pochodzą z tabeli OS/2 plików czcionek Windows 11.

Dlaczego tylko czcionki systemowe?

Czcionki systemowe są już zainstalowane na urządzeniu: strony ładują się szybciej, tekst nie przeskakuje podczas ładowania i żadne zapytanie nie trafia na serwer zewnętrzny. Wczytywanie web fontów bezpośrednio z CDN przesyła adres IP każdego odwiedzającego do dostawcy – w Europie to problem z punktu widzenia RODO. Jeśli chcesz własnych web fontów, hostuj je u siebie.

Stosy czcionek: po co kilka nazw?

Żadna czcionka nie jest zainstalowana w każdym systemie. Dlatego CSS wymienia kilka czcionek po kolei (font stack): przeglądarka używa pierwszej zainstalowanej, a rodzina ogólna, np. serif lub sans-serif, wyłapuje resztę. Tabela pokazuje, która czcionka faktycznie pojawi się w Windows, macOS, na iPhonie/iPadzie i w Androidzie – na podstawie list czcionek Microsoftu i Apple oraz konfiguracji czcionek Androida (stan z 27.09.2026). Android nie ma Georgii ani Verdany i pokazuje zamiast nich Noto Serif lub Roboto; dystrybucje Linuksa mają różne czcionki w zależności od instalacji.

Wskazówki dla czytelnego tekstu

Tekst na ekranie ustaw na co najmniej 16 px, najlepiej 17–20 px, z interlinią ok. 1,5–1,7.
Nagłówki rób wyraźnie większe (1,6–2 razy) i grubsze od tekstu – wtedy wystarczy nawet jedna rodzina czcionek.
Utrzymuj długość wiersza na poziomie ok. 60–80 znaków.
Sprawdź kontrast kolorów: szary tekst na białym tle szybko staje się zbyt blady.

Najczęściej zadawane pytania

Jakie czcionki do siebie pasują?

Bezpieczne są pary kroju szeryfowego z bezszeryfowym, np. Georgia z Verdaną, Palatino z czcionką interfejsu systemu albo Cambria z Calibri. Liczy się wyraźny kontrast i podobna wysokość x.

Ile czcionek powinna mieć strona internetowa?

Najwyżej dwie: jedną do nagłówków, jedną do tekstu. Trzecią, np. czcionkę o stałej szerokości do kodu, dodaj tylko wtedy, gdy ma własne zadanie.

Czy Georgia i Verdana są na każdym urządzeniu?

W Windows, macOS i iOS tak. Android ich nie ma i pokazuje Noto Serif lub Roboto – dlatego każdy stos czcionek powinien kończyć się rodziną ogólną, np. serif lub sans-serif.

Co to jest wysokość x?

Wysokość małej litery x w stosunku do rozmiaru czcionki. Duża wysokość x poprawia czytelność przy tym samym rozmiarze, ale wymaga nieco większej interlinii.

Dlaczego nie użyć po prostu czcionek Google z CDN?

Każde wyświetlenie strony wysyła wtedy adres IP odwiedzającego do dostawcy czcionek i dodaje pobieranie, zanim pojawi się tekst. Czcionki systemowe omijają oba problemy; własne czcionki można hostować samodzielnie.

Czy mój tekst w podglądzie jest zapisywany?

Nie. Własne nagłówki i teksty zostają tylko w tym oknie przeglądarki. Zapamiętywane są wyłącznie wybrana para i rozmiar czcionki.

Źródła i podstawa prawna

Stan na: 27 września 2026