CodeKitHubČo je tento nástroj?
Kombinovanie písiem znamená výber dvoch (občas troch) typov písma, ktoré sa na stránke použijú spolu — zvyčajne jedno pre nadpisy a druhé pre text — aby stránka mala vizuálnu hierarchiu bez toho, aby pôsobila nesúrodo alebo monotónne.
Každá kombinácia nižšie zobrazuje ukážku vykreslenú naživo: písmo pre nadpis hore, písmo pre text pod ním, pričom sa používajú skutočné súbory Google Fonts, takže to, čo vidíte, je presne to, čo dostanete na svojej stránke.
Ku každej kombinácii je priložený hotový vkladací tag `<link>` z Google Fonts a zodpovedajúci CSS kód s deklaráciami `font-family` pre nadpisy aj text — stačí oboje skopírovať a je hotovo.
Prečo ho používať?
- 28 ručne vybraných kombinácií, nie automaticky vygenerovaný zoznam — každá bola zvolená preto, že sa tieto dve písma naozaj dopĺňajú.
- Náhľad naživo: každá kombinácia sa vykresľuje so skutočnými písmami načítanými z Google Fonts, nie ako statický obrázok alebo odhad podľa názvu písma.
- Filtrovanie podľa štýlu — Moderný, Elegantný, Výrazný, Minimalistický, Klasický — na rýchle nájdenie tónu, ktorý váš projekt potrebuje.
- Kopírovanie jedným kliknutím pre vkladací tag `<link>` aj pre CSS pravidlá `font-family`.
- Zadarmo, beží priamo vo vašom prehliadači, bez potreby účtu či prihlásenia.
Ako sa používa
- Voliteľne kliknite na filter štýlu (Moderný, Elegantný, Výrazný, Minimalistický, Klasický), aby ste zúžili zoznam, alebo nechajte vybrané „Všetky“ a prehliadajte celú ponuku.
- Prezrite si karty s náhľadom naživo — horný riadok zobrazuje písmo nadpisu, riadok pod ním písmo textu.
- Otvorte kombináciu, ktorá sa vám páči, a kliknutím rozbaľte sekciu s vkladacím kódom.
- Skopírujte tag `<link>` do sekcie `<head>` svojho HTML a CSS kód vložte do svojho štýlopisu, aby ste písma použili na nadpisy aj text.
Príklad
Vstup
Elegantný blogVýstup
Playfair Display (nadpisy) + Source Sans Pro (text)Filter „Elegantný“ ponúka kontrastné serifové nadpisy v kombinácii s čistým, veľmi dobre čitateľným bezserifovým textom — bežná kombinácia pre redakčné a blogové rozloženia.
Zásady dobrého kombinovania písiem
- Kontrast namiesto podobnosti: dve písma, ktoré vyzerajú takmer identicky (napríklad dve podobné geometrické bezserifové písma), zvyčajne pôsobia skôr ako omyl než ako zámerná voľba. Skombinujte serifové písmo s bezserifovým, alebo výrazné titulkové písmo s ľahším textovým, aby rozdiel pôsobil zámerne.
- Zosúlaďte výšku malých písmen (x-height) a proporcie: písma, ktorých malé písmená majú podobnú vizuálnu výšku, zvyčajne pôsobia, akoby patrili na tú istú stránku, aj keď sa ich štýly líšia — nezhodná výška malých písmen je jedným z najčastejších dôvodov, prečo kombinácia pôsobí „zvláštne“.
- Obmedzte sa na dve rodiny písiem (občas tri): jednu pre nadpisy, jednu pre text a maximálne tretiu pre akcenty, ako sú tlačidlá alebo štítky. Viac ako to a stránka začne pôsobiť nepremyslene.
- Zohľadnite náladu, nielen tvar: zaoblené, priateľské bezserifové písmo v kombinácii s formálnym serifovým vysiela protichodné signály, aj keď tvary písmen technicky fungujú spolu — vyberajte písma, ktoré sa zhodujú tónom aj štruktúrou.
- Testujte v reálnych veľkostiach: kombinácia, ktorá vyzerá skvele vo veľkom náhľade, môže stratiť kontrast pri veľkosti bežného textu, alebo sa titulkové písmo môže pri malých veľkostiach stať nečitateľným — vždy skontrolujte oba extrémy.
Výber kombinácie podľa účelu použitia
Vstupným stránkam a marketingovým webom zvyčajne prospejú filtre „Výrazný“ alebo „Moderný“ — silné, kontrastné nadpisové písmo upúta pozornosť hneď v úvode stránky, v kombinácii s čistým, neutrálnym textovým písmom, ktoré uľahčuje prehľadávanie dlhšieho textu.
Blogy a redakčný obsah zvyčajne najlepšie vyznejú s kombináciami „Elegantný“ alebo „Klasický“ — prepracovaný serifový nadpis signalizuje premyslený, redakčný hlas, zatiaľ čo príjemné serifové alebo bezserifové písmo textu udržuje dlhé články čitateľné aj pri dlhšom čítaní.
E-shopy a stránky s produktmi zvyčajne uprednostňujú kombinácie „Minimalistický“ — striedme, neutrálne písma udržujú pozornosť na produktových fotografiách a cenách, nie na samotnej typografii, čo je dôležité, keď sa na jednej stránke zobrazujú desiatky produktových kariet.
Portfóliá a kreatívne stránky majú najviac priestoru na experimentovanie — kombinácie „Výrazný“ alebo „Elegantný“ s výraznejšou osobnosťou môžu fungovať dobre, pretože publikum tam je čiastočne aj preto, aby posúdilo vizuálny vkus.
Poznámky k výkonu a licencovaniu
Vkladací tag `<link>` načítava písma z CDN Google, ktoré je rýchle a mnoho vašich návštevníkov ho už pravdepodobne má uložené v cache z iných stránok — pridáva to však externú požiadavku. Pri stránkach, kde záleží na každej milisekunde, odstránenie tejto externej závislosti dosiahnete stiahnutím súborov písma a ich hosťovaním na vlastnom serveri (s ručne nastaveným `font-display: swap`), za cenu o niečo väčšej námahy pri nastavovaní.
Všetky písma na Google Fonts sú open source a voľne dostupné na komerčné použitie bez potreby uvádzania autora, hoci poďakovanie tvorcovi písma je pekným gestom tam, kde je to jednoduché urobiť.
Časté otázky
Čo spôsobuje, že si dve písma „dobre sadnú“?
Dobré kombinácie vyvažujú kontrast a harmóniu. Kontrast — spojenie serifového a bezserifového písma, alebo výrazného titulkového písma s obyčajným textovým — vytvára vizuálnu hierarchiu, vďaka ktorej pôsobia nadpisy a text odlišne. Harmónia — podobná výška malých písmen (x-height), porovnateľná hrúbka ťahov a spoločný pocit formálnosti či hravosti — zabraňuje tomu, aby si písma navzájom „prekážali“. Kombinácie tu boli vyberané s ohľadom na obe tieto kritériá.
Musia nadpisy a text vždy používať odlišné písma?
Nie, používanie jednej rodiny písma pre oboje (ako napríklad kombinácia „Rubik + Rubik“ v tomto nástroji) tiež funguje dobre, pokiaľ má písmo dostatok variácií hrúbky na odlíšenie nadpisov od textu. Je to platná, minimalistická voľba — nie chyba.
Ako kombináciu skutočne použijem na svojej stránke?
Skopírujte vkladací tag `<link>` do sekcie `<head>` svojej stránky, aby sa písma načítali z CDN Google, a potom skopírujte CSS kód do svojho štýlopisu — ten nastaví `font-family` pre nadpisy (h1, h2, h3) a pre text (body, p). Ak sa váš kód líši, upravte CSS selektory podľa potreby.
Spomalí načítanie Google Fonts moju stránku?
Každý ďalší súbor s písmom pridáva sieťovú požiadavku a mierne riziko blokovania vykresľovania. Držte sa jednej hrúbky pre nadpisy a jednej či dvoch pre text, používajte `display=swap` (už zahrnuté vo vkladacom kóde), aby sa text zobrazoval v náhradnom písme počas načítavania webového písma, a pri produkčných stránkach, kde záleží na maximálnej rýchlosti načítania, zvážte hosťovanie súborov písma na vlastnom serveri.
Sú tieto písma voľne použiteľné na komerčné účely?
Áno. Každé písmo v Google Fonts, vrátane všetkých tu zobrazených kombinácií, je licencované pod SIL Open Font License alebo Apache License — obe licencie umožňujú bezplatné komerčné použitie, úpravy aj ďalšie šírenie bez poplatkov.