CodeKitHubCo je tento nástroj?
Párování písem znamená výběr dvou (občas tří) písem, která se na stránce používají společně — obvykle jedno pro nadpisy a jedno pro text — aby stránka měla vizuální hierarchii, aniž by působila nesourodě nebo monotónně.
Každá kombinace níže zobrazuje živou ukázku: nahoře nadpisové písmo, pod ním textové písmo, přičemž se používají skutečné soubory Google Fonts, takže to, co vidíte, je přesně to, co získáte na svém webu.
Ke každé kombinaci je přiložen připravený vkládací tag `<link>` z Google Fonts a odpovídající úryvek CSS s deklaracemi `font-family` pro nadpisy a text — stačí obojí zkopírovat a je hotovo.
Proč ho používat?
- 28 ručně vybraných kombinací, ne automaticky generovaný seznam — každá byla zvolena proto, že si dvě písma skutečně navzájem doplňují.
- Živý náhled: každá kombinace se vykresluje skutečnými písmy načtenými z Google Fonts, nikoliv statickým obrázkem nebo odhadem podle názvu písma.
- Filtrujte podle nálady — Moderní, Elegantní, Výrazné, Minimalistické, Klasické — a zúžíte výběr na styl, který váš projekt potřebuje.
- Kopírování jedním kliknutím jak pro vkládací tag `<link>`, tak pro pravidla CSS `font-family`.
- Zdarma, funguje přímo v prohlížeči, není potřeba účet ani přihlášení.
Jak se používá
- Volitelně klikněte na filtr nálady (Moderní, Elegantní, Výrazné, Minimalistické, Klasické) a zúžíte seznam, nebo ponechte vybrané „Vše“ a procházejte všechny kombinace.
- Projděte si karty s živým náhledem — horní řádek zobrazuje nadpisové písmo, řádek pod ním textové písmo.
- Otevřete kombinaci, která se vám líbí, a kliknutím rozbalte sekci s vkládacím kódem.
- Zkopírujte tag `<link>` do `<head>` svého HTML a úryvek CSS do svého stylopisu, čímž písma použijete na nadpisy i text.
Příklad
Vstup
Elegantní blogVýstup
Playfair Display (nadpisy) + Source Sans Pro (text)Filtrování podle „Elegantní“ zobrazí kontrastní patkové nadpisy spárované s čistým, dobře čitelným bezpatkovým textem — běžná kombinace pro redakční a blogová rozvržení.
Zásady dobrého párování písem
- Kontrast místo podobnosti: dvě písma, která vypadají téměř identicky (například dvě podobná geometrická bezpatková písma), působí spíše jako omyl než jako záměrná volba. Spárujte patkové písmo s bezpatkovým, nebo tučné display písmo s lehčím textovým, aby rozdíl působil úmyslně.
- Sjednoťte výšku písmene x a proporce: písma, jejichž malá písmena mají podobnou vizuální výšku, obvykle působí, jako by patřila na stejnou stránku, i když se jejich styly liší — nesouhlasná výška x je jednou z nejčastějších příčin toho, že kombinace působí „nesourodě“.
- Omezte se na dvě rodiny (občas tři): jednu pro nadpisy, jednu pro text, a maximálně třetí pro akcenty jako tlačítka nebo popisky. Více než to a stránka začne působit neuspořádaně.
- Zvažte náladu, ne jen tvar: zaoblené, přátelské bezpatkové písmo spárované s formálním patkovým vysílá protichůdné signály, i když tvary písmen technicky fungují dohromady — vybírejte písma, která se shodují jak tónem, tak strukturou.
- Testujte ve skutečných velikostech: kombinace, která skvěle vypadá ve velkém náhledu, může ztratit kontrast ve velikosti textu, nebo se display písmo může stát nečitelným v malých velikostech — vždy zkontrolujte oba extrémy.
Výběr kombinace podle účelu použití
Vstupní stránky a marketingové weby obvykle těží z filtrů „Výrazné“ nebo „Moderní“ — silné, kontrastní nadpisové písmo upoutá pozornost hned nad ohybem stránky, spárované s čistým, neutrálním textovým písmem, které udržuje dlouhý text snadno čitelný.
Blogy a redakční obsah se často čtou nejlépe s kombinacemi „Elegantní“ nebo „Klasické“ — vytříbený patkový nadpis signalizuje promyšlený, upravený hlas, zatímco pohodlný patkový nebo bezpatkový text udržuje dlouhé články čitelné i při delším čtení.
E-shopy a produktové weby obvykle preferují „Minimalistické“ kombinace — decentní, neutrální písma udržují pozornost na produktových fotografiích a cenách, nikoli na samotné typografii, což je důležité, když se na jedné stránce zobrazují desítky produktových karet.
Portfolia a kreativní weby mají největší prostor pro experimentování — kombinace „Výrazné“ nebo „Elegantní“ s výraznější osobností mohou dobře fungovat, protože publikum tam částečně je i proto, aby posoudilo vizuální vkus.
Poznámky k výkonu a licencování
Vkládací tag `<link>` načítá písma z Google CDN, které je rychlé a mnoha weby, které vaši návštěvníci pravděpodobně již navštívili, je uloženo v mezipaměti — přesto přidává externí požadavek. U webů, kde záleží na každé milisekundě, stažení souborů s písmy a jejich vlastní hostování (s ručně nastaveným `font-display: swap`) odstraní tuto externí závislost za cenu jistého úsilí při nastavení.
Všechna písma v Google Fonts jsou open source a zdarma pro komerční použití bez povinnosti uvádět zdroj, i když uvedení autora písma je milým gestem tam, kde je to snadno proveditelné.
Časté dotazy
Co dělá dvě písma „dobře sladěná“?
Dobré kombinace vyvažují kontrast a harmonii. Kontrast — spárování patkového písma s bezpatkovým nebo tučného display písma s obyčejným textovým — vytváří vizuální hierarchii, díky které nadpisy a text působí odlišně. Harmonie — podobná výška písmene x, srovnatelná síla tahů a společný pocit formálnosti nebo hravosti — zabraňuje tomu, aby si obě písma odporovala. Kombinace zde byly vybírány s ohledem na obojí.
Musí nadpisy a text vždy používat odlišná písma?
Ne, použití jedné rodiny písma pro obojí (jako u kombinace „Rubik + Rubik“ v tomto nástroji) také dobře funguje, pokud má písmo dostatek variant tloušťky, aby odlišilo nadpisy od textu. Je to platná, minimalistická volba — ne chyba.
Jak kombinaci skutečně použiji na svém webu?
Zkopírujte vkládací tag `<link>` do `<head>` své stránky, aby se písma načetla z Google CDN, poté zkopírujte úryvek CSS do svého stylopisu — nastaví `font-family` pro nadpisy (h1, h2, h3) a pro text (body, p). Pokud se váš kód liší, upravte CSS selektory podle potřeby.
Zpomalí načítání Google Fonts můj web?
Každý další soubor s písmem přidává síťový požadavek a určité riziko blokování vykreslení. Omezte se na jednu tloušťku pro nadpisy a jednu nebo dvě pro text, používejte `display=swap` (už zahrnuto ve vkládacím kódu), aby se text zobrazoval náhradním písmem, dokud se webové písmo nenačte, a u produkčních webů, kde záleží na co nejrychlejším načtení, zvažte vlastní hostování souborů s písmy.
Jsou tato písma zdarma pro komerční použití?
Ano. Každé písmo v Google Fonts, včetně všech zde uvedených kombinací, je licencováno pod licencí SIL Open Font License nebo Apache License — obě umožňují bezplatné komerční použití, úpravy i další šíření bez licenčních poplatků.