Typografie na webu

Typografie na webu



V nedávné minulosti byli návrháři webů omezeni pouze na systémová písma obsažená v operačním systému návštěvníka webu. Vše se vyvíjí a dnes máme k dispozici prakticky nekonečný seznam fontů využitelných pro náš webový projekt. Pojďme se podívat, jaká písma jsou vhodná a jak s nimi můžeme pracovat v prostředí webguide.


Základní rozdělení písma

Nejednodušší rozdělení písma je na patkové a bezpatkové. Klasifikace písma je komplikovanější, ale pro základní orientaci se zaměřme pouze na tyto dvě hlavní množiny.

Písmo patkové (serifové)

Je to písmo, jehož tahy jsou končeny vodorovnými čárami (patkami), které leží na účaří . Tyto patky "vedou" oko a tak napomáhají plynulejšímu čtení textu.  Příkladem takového písma je font Robot Slab, který je použit v tomto článku. Obecně se dá říci, že patkové písmo je vhodné pro delší texty. Toto platí u tištěných materiálů, ale na webu to nemusí platit bezezbytku. Ne každé patkové písmo je vhodné pro zobrazení na webu. Často se stává, že patky  nevypadají hezky u menší velikosti písma.

Písmo bezpatkové

Bezpatkové písmo se vyznačuje menší zdobností. Častěji je využíváno pro kratší texty a nadpisy. Bezpatkovým písmem lze vhodně doplnit části textu vyvedené patkovým písmem. Zástupcem této množiny je například písmo  Helvetica. Některé fonty jsou navrženy jak v patkové, tak bezpatkové variantě. Krásně se doplňují a není problém je použít současně. Jako příklad uvedu již zmíněný Roboto Slab a Roboto.


Kde vzít vhodné fonty?

Systém webguide umožňuje snadnou práci s fonty. V základu můžete využít systémové fonty (fonty, které jsou standardní součástí operačních systémů) a nebo lze na web nahrát Google fonty.

Pozastavme se u google fontů, které jsou kvalitní a nabízí bohatý výběr fontů obsahující české znaky. Na adrese www.google.com/fonts naleznete přehledný portál nabízející rozličné fonty. Je důležité si uvědomit, že ne každý font obsahuje znaky s českou diakritikou. Jazyková sada obsahující české znaky se nazývá "Latin Extended". Tyto fonty si nejprve vyfiltrujte. Pro ověření, zda vybraný font obsahuje všechny české znaky je vhodné do políčka "Preview Tex" vložit větu "Příliš žluťoučký kůň úpěl ďábelské ódy". Okamžitě vidíte, zda je font "český".


Pokud máte vybraný vhodný font pro Váš projekt, stačí označit název fontu, zkopírovatř (Ctrl+C) a název vložit do formuláře v nastavení webguide.Názvy jednotlivých fontů oddělujte čárkou.

Nastevení fontů naleznete v části:  Nastavení / Vzhled / Nahrát Google fonty.


Systém webguide umožňuje definovat výchozí font pro celé stránky, pro nadpisy, ale nijak Vás neomezuje v následné editaci a změně fontů.

Méně je více

Jistě chcete, aby Vaše webové stránky byly vizuálně zajímavé, ale zároveň funkční a přehledné. Využitím kvalitních fontů můžete webu hodně pomoci, ale nesmíte to přehnat. Máme pro Vás několik tipů...


1.

Na webu používejte maximálně dva fonty. Web na kterém je použito příliš mnoho fontů je jednak vizuálně nekonzistentní a také může dojít k výraznému zpomalení načítání obsahu.

2.

Vyvarujte se příliš malé výšky písma a pohlídejte si, zda odstavce a jednotlivé nadpisy mají stejné atributy. Web musí být přístupný a k dobrým mravům patří, že na přečtení odstavce nepotřebujete lupu. Velikost písma volte spíše větší. Doporučuji začít na velikosti 12pt.

3.

Pracujte s dostatečným kontrastem a nepřežeňte to s barevností. Pro dobrou čitelnost textů je důležitý kontrast tedy rozdíl jasů textu a pozadí. Stejně tek není dobré použít v textu příliš mnoho barev. Barvičky užívejte s citem a jen tam, kde je to důležité pro "vypíchnutí" části textu či přilákání pozornosti návštěvníka.