Vytváření barevné palety krok za krokem
Jak vytvořit harmonickou paletu pěti až osmi barev, která funguje na všech zařízeních. Bez zbytečné teorie, jen praktika.
Číst článekJak 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.
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á.
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é.
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.
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.
