pzeleny@kurzygrafiky.cz        Tel.: 724 810 701

Košík je prázdný

Základy typografie na webu

Typografie je zásadní součástí každého designu, proto jí musíte věnovat dostatek pozornosti. Současné trendy moderního designu směřují k používání velkých, výrazných nadpisů, které zaujmou pozornost čtenáře. Důležitými body při psaní textu na web jsou kontrast, barva, velikost a čitelnost.

Barva

web text kontrastBarvy jsou na monitoru vytvářeny světlem. Proto je vzhledem k textu potřeba vytvářet vysoký kontrast. Málo kontrastní text bude na monitoru špatně čitelný. Černý text na bílém pozadí je tradiční způsob formátování. Na pozadí, by neměl být vzorek, nebo textura, která snižuje čitelnost textu. Důležité body je od ostatního textu vhodné zvýraznit odlišnou barvou. Vhodný kontrast si můžete ověřit převedením stránky do stupňů šedi. Pokud bude text dobře čitelný i v odstínech šedi, je dostatečně kontrastní vůči pozadí.

Velikost

Různé velikosti písma jsou nejlepší cestou, jak zvýraznit část textu. Pro odlišení může fungovat i rozdíl v barvě, nebo rámečky, ale velikost je vždy hlavním měřítkem důležitosti obsahu. Výrazné nadpisy mohou čtenáře zaujmout a díky tomu pokračuje ve čtení. Nepoužívejte písmo menší než 12 pt, příliš malé písmo je obtížné přečíst a zbytečně unavuje uživatele.

Jako první doporučuji nastavit velikost základního textu – běžného odstavce. Pravděpodobně to bude ve vašich stránkách nejčastější textový prvek. Od této velikosti se budou odvíjet i ostatní textové objekty. Jednou z možností je nadpisy a podnadpisy formátovat v procentech základního textu. Například nadpisy na 250% velikosti písma odstavce. Mějte na paměti, že by text měl být vždy tak veliký, aby byl dobře čitelný pro všechny uživatele.

Zajímavou pomůckou může být použití pravidla zlatého řezu. Opět vycházíme z velikosti základního textu (16 bodů), nadpis třetí úrovně (H3) nastavíme na velikost 25.888 bodů. To odpovídá poměru zlatého řezu 1:1.618 (H3 - 16 x 1.618 = 25.888). Obdobný postup aplikujeme i pro nadpisy vyšších úrovní - H2 - 25.888 x 1.618 = 41.887, H1 - 41.886784 x 1.618 = 67.773.

Typ (Font)

bezpečná písma

Základní písma rozdělujeme na patková (serif) a nepatková (sans-serif). Obecně jsou bezpatková písma vhodnější pro použití online, protože pro lidské oko je jednodušší sledovat linie textu. Patkové písmo můžete použít pro nadpisy, nebo menší množství textu, protože dodají písmu jistou osobitost. Velkou roli při volbě písma hraje i jeho velikost, pokud je písmo příliš malé bude se hůř číst, příliš velké zase zbytečně zabírá prostor ve stránce. Kombinace obou druhů může v designu přinášet nové zajímavé variace a kontrast.

Rozhodně doporučuji používat bezpečná webová písma (taková, která jsou dostupná na všech počítačích). Jsou to například Times New Roman a Arial. Pokud je nutné použít jiná, např. ozdobná písma, použijte je spíše jako doplněk stránky, ne jako hlavní prvek designu. Mezi další oblíbená (bezpečná písma) patří: Verdana, Georgia a Courier.

Jednou z možností pro vyhledání speciálního webová písma je služba Google Fonts. Obsahuje stovky různých variant, které je možné následně použít v designu. Pozor, načítání písem z Google Fonts může zpomalit načítání stránky!

Další možností je nápisy tvořit již v grafickém programu při návrhu designu a následně exportovat jako obrázek. Tento princip je velmi častý, protože zaručuje správnost zobrazení všech prvků. Pokud optimalizujete velikost obrázků, nebudete ani zpomalovat načítání stránky.

Nadpisy

html nadpisyVe vašem návrhu můžete používat množství úrovní nadpisů (v HTML konkrétně šest). U každé úrovně (popř. i u jednotlivých nadpisů) nastavte vhodnou velikost, barvu a styl písma tak, abyste dokázali vést zrak čtenáře celou stránkou. Hlavním cílem používání nadpisů je, zdůraznit důležité informace. Pokud čtenáře zaujme jeden z hlavních nadpisů, je velmi pravděpodobné, že bude pokračovat ve čtení. Obecně bývá u nadpisů nastavena větší velikost, než u základního textu, někdy bývá použit i jiný typ písma (font) a doporučuji odlišit nadpisy jinou (výraznější) barvou.

Odstavce

U delších bloků textu se snažte rozdělit odstavce do kratších, lépe čitelných bloků. Ideální délka odstavce je 3-5 řádků. Delší souvislý text je obtížně čitelný a hlavně je při listování stránkou velmi nepřehledný. Vhodné je rozdělit text „záchytnými body“ – vložit mezi bloky textu obrázek, citaci, podnadpis, nebo jiný grafický prvek. Umožníte tak uživateli přerušit čtení, a poté snadno navázat na místo kde přestal číst.

------ © 2015 KURZY GRAFIKY ------ Všechna práva vyhrazena. Kopírovat obsah bez souhlasu autora je zakázáno.

Icons made by Freepik from www.flaticon.com is licensed by
CC BY 3.0

Soubory cookie nám pomáhají poskytovat, chránit a zlepšovat naše služby. Pokud budete náš web používat i nadále, vyjádříte tím svůj souhlas s našimi zásadami týkajícími se souborů cookie.

 

OBCHODNÍ PODMÍNKY

KURZYGRAFIKY.CZ

Prokop Zelený, DiS.
Veronské nám. 331
Praha 10  10900

pzeleny@kurzygrafiky.cz
tel.: 724 810 701

Soubory cookie nám pomáhají poskytovat, chránit a zlepšovat naše služby. Pokud budete náš web používat i nadále, vyjádříte tím svůj souhlas s našimi zásadami týkajícími se souborů cookie. Informace o cookies ZDE.

  
EU Cookie Directive Module Information