Jak vybrat správné páry fontů pro web

Jednoduché pravidlo pro kombinování dvou písem, která si navzájem rozumí. Nejčastější chyby a jak se jich vyvarovat.

7 min čtení Začátečník Březen 2026

Vzorky různých bezpatkových a patkovacích písem s příklady kombinací na papíře

Proč vůbec řešit párování fontů?

Když si vybíráte dva fonty na web, není to jen o tom, aby vám vypadaly hezky. Jde o to, aby se vašim čtenářům snáze četlo, aby si vaše obsah vzali vážně a aby váš web vypadal profesionálně. Špatná kombinace písem? To vypadá amatersky. A uživatelé si to všimnou hned.

Dobrá zpráva je, že není to věda. Existují jednoduchá pravidla, která vám pomohou udělat rozhodnutí správně. A pokud je budete znát, budete schopní kombinovat fonty, které si opravdu rozumí — a to se pozná.

Blízký záběr na tiskárnu s různými vzorky typografie a barevnými tužkami na pracovní ploše

Typografické příklady ukazující kontrast mezi patkovými a bezpatkovými fonty v titulovém a běžném textu

Základní pravidlo: kontrast je vše

Nejjednodušší cesta k úspěchu? Kombinujte písma, která jsou si opravdu odlišná . Když vezmete patkový font na titulky a bezpatkový na běžný text — nebo naopak — hned víte, co se děje. Čtenář vidí jasný rozdíl mezi nadpisem a odstavcem.

To je přesně to, co chcete. Návštěvník webu by měl pochopit, že je to titulek, bez jakéhokoli vysvětlování. Kontrast mezi dvěma písmy to dělá samozřejmým. A pokud jsou si fonty moc podobné? Pak vypadají jen jako dvě různé velikosti stejného písma. To vám nepomůže.

Konkrétně: Vezměte patkový font (Garamond, Playfair Display) jako hlavní titulek a čistý bezpatkový (Open Sans, Inter) na obsah. Nebo to otočte. Ale nedávejte dohromady dva bezpatkové fonty — alespoň ne pro větší projekt.

Tloušťka písma — váha na titulcích, lehkost v textu

Druhá věc, na kterou se podívat: váha. Když máte titulek, chcete, aby byl vidět. Použijte Bold nebo Extra Bold. Když máte běžný text, měl by být lehký — Regular nebo dokonce Light. To vytváří přirozený vizuální hierarchii bez dalších triků.

Vidíte, jak to funguje? Silný titulek vás upoutá. Lehký text je snadný na čtení. Váš mozek okamžitě ví, co je důležité a co je doplňující informace. Tohle je psychologie typografie — a funguje to.

Správně:

Titulek: Playfair Display Bold (700) Text: Open Sans Regular (400)

Chybně:

Titulek: Open Sans Regular Text: Open Sans Light

Páry, které vždy fungují

Nemusíte si lámat hlavu. Zde jsou kombinace, které se osvědčily na desítkách webů a prostě fungují. Všechny jsou dostupné zdarma na Google Fonts.

Playfair Display + Open Sans — elegantní a čitelný. Playfair je sebevědomý, Open Sans je přátelský.
Lora + Roboto — klasika pro články. Lora na titulky, Roboto na text. Čtivé a profesionální.
Merriweather + Montserrat — teplá a moderní. Merriweather je čitelnější na obrazovkách než ostatní patková písma.
Raleway + Poppins — mladý a svěží vzhled. Obě jsou bez patkových, ale Raleway je elegantnější, Poppins je hravější.
EB Garamond + Source Sans Pro — pokud chcete klasiku s moderním nádechem. Funkční a vyvážené.

Nejčastější chyby — a jak se jich vyvarovat

Lidé dělají stejné chyby pořád dokola. Když víte, na co si dát pozor, je to jednoduché je vůbec neudělat.

Chyba 1: Dva bezpatkové fonty bez jasného kontrastu

Trebuchet s Verdanou? Helvetica s Arial? Vypadá to chaoticky. Tvůj mozek neví, proč jsou tam dva fonty. Řešení: vezmi jeden bezpatkový a jeden patkový. Nebo pokud chceš dva bezpatkové, měly by být výrazně odlišné — třeba jedno geometrické a jedno humanistické.

Chyba 2: Stejná váha na titulku a textu

Když máš Regular váhu na obojím, není jasné, co je titulek a co obsah. Titulky musí být tučnější. Když se podíváš na dobře navržené webové stránky, vždy vidíš ten rozdíl.

Chyba 3: Příliš mnoho fontů

Když máš tři, čtyři, pět různých fontů, vypadá to jako havárie. Omez se na dva. Maximálně tři, pokud máš dobrý důvod. Na mém webu máme dva — a to je všechno, co potřebujeme.

Chyba 4: Ignorování čitelnosti na mobilech

Nějaký výstřední font vypadá skvěle na desktopu, ale na telefonu je úplně nečitelný? Vyzkoušej si vždycky svou kombinaci na malé obrazovce. Řádkování, velikost písma, všechno se změní. A musí být stejně dobré.

Vizuální srovnání chybných a správných párů fontů — příklady špatných kombinací vs. vyvážených párů

Nástroje, které ti pomohou

Když si nejsi jistý, jsou tu místa, kde si můžeš své páry vyzkoušet a inspirovat se.

Google Fonts

Zdarma, všechny fonty jsou webové. Přímo na stránce vidíš, jak si páry sedí. Nejjednoduší místo na začátek.

Font Pair

Curated páry od designérů. Vybereš si, líbí se ti nebo ne. Dobrá inspirace, když si nejsi jistý.

Fontjoy

Nástroj, který ti generuje náhodné páry. Když se ti něco líbí, můžeš jej upravit. Dobré pro experimentování.

Type Scale

Zkoušej různé velikosti a váhy. Vidíš, jak se tvoje párování chová v reálném projektu.

Shrnutí: Jednoduché pravidlo pro pamatování

Chceš se to naučit jednoduše? Tady je to:

Vezmi si jeden patkový font na titulky a jeden bezpatkový na text. Nebo to otočit. Dej větší váhu na titulky, lehčí váhu na obsah. Vyzkoušej to na mobilu. Hotovo.

Zbývá ti něco? Podívej se na seznam párů, které už vím, že fungují. Nebo si vezmi libovolné dva fonty z Google Fonts a podívej se, jestli mezi nimi vidíš kontrast. Pokud ano, měly by fungovat.

To je opravdu všechno. Není to složité. Jde jen o to mít na paměti pár jednoduchých pravidel a zbytek se děje sám.

Příklad harmonické typografické hierarchie na skutečné webové stránce — čitelné a vyvážené

Poznámka o těchto pokynech

Tyto tipy jsou založené na typografických principech a osvědčených postupech. Webový design se vyvíjí a to, co funguje nejlépe, se může lišit v závislosti na tvém konkrétním projektu, cílové skupině a obsahu. Vždycky si testuj své volby na reálných zařízeních a s reálnými uživateli. Tyto informace jsou zde jako edukační vodítko — ne jako přísná pravidla, která nelze porušit. Nejlepší kombinace je ta, která funguje pro tvůj web a jeho čtenáře.