Typografie je obor zabývající se písmem, jeho výběrem a sazbou, případně vlastní tvorbou, ať už se jedná o digitální práci nebo ručně psaný text. Cílem typografie je především sjednotit vizuální podobu textu, sladit ji s dalšími vizuálními prvky a usnadnit proces čtení, vnímání textu a jeho správný výklad. Ve většině případů je cílem maximálně využít potenciál textu k sdělení. Vedle toho stojí umělecká stránka, kdy je písmo použito volněji a v konečném důsledku představuje spíše vizuální estetiku.
Cílem funkční typografie v rámci webové prezentace je sjednotit celkový vzhled webu a předem definovat, jakým způsobem bude typografie korespondovat s obsahem a komunikovat s uživateli. Nahraný text se už jen řídí těmito pravidly.
Samotná typografie má výrazný přesah do UX designu a grafického designu.
Úskalí webové typografie
Text na webu nebude nikdy vypadat tak dobře jako vysázený v tisku. Vždy je zobrazen automatickým systémem podle předem nastavených pravidel (vybrané fonty, formátování odstavců, uvozovky, mezery, speciální znaky a podobně). Algoritmy zpravidla nejsou schopny pracovat s rozpaly, vznikajícími řekami, dělením slov, zarovnáním do bloku a podobně. Většina textu je z toho důvodu zarovnána na levý praporek. Software postrádá lidský cit, který by pracoval s celkovou kompozicí.
Typograficky zajímavé projekty
cappiello.tilda.ws(zajímavě pojatá úvodní stránka; bonusovým prvkem je interaktivní motiv krávy reagující na pohyb myši, zdroj: cappiello.tilda.ws)
cramdyn.com(zajímavě pojatá úvodní stránka s postupně se vykreslujícím textem; bonusovým prvkem je interaktivní „světlo“ reagující na pohyb myši v prostoru textu a ukazatel myši v podobě pozdravu, zdroj: cramdyn.com)
Základy webové typografie lze rozdělit do deseti bodů:
- Velikost – velikost písma je vhodné zvolit spíše větší než menší. U obrazovky je to většinou 15 až 22 px a v případě mobilu 14 až 16 px.
- Dva druhy písma – zpravidla není vhodné kombinovat více než dva druhy písma. A i ty by mělo vybrat zkušené oko typografa.
- Hierarchie – v rámci jednoho textu by měly být výrazně odlišeny nadpisy, podnadpisy, odrážky a podobně.
- Šířka textového pole – kratší řádky se lépe čtou. Lidské oko má tendenci text skenovat. U obrazovky je ideální šířka přibližně 60 znaků, u mobilu 30 až 40.
- Řádkování – významnou roli hraje při pohodlném čtení také výška řádku, která by měla být přibližně o 30 % větší než velikost textu.
- Zarovnání písma – většina textu je zpravidla zarovnána na levý praporek, případně na střed nebo na pravý praporek. Kvůli automatické sazbě, která neumí efektivně pracovat s řekami, dělením slov a dalšími prvky, většinou nelze zvolit zarovnání do bloku.
- Kontrast – text by měl být na pozadí dostatečně kontrastní, aby byl lehce čitelný. Nejčastěji se pracuje s tmavým textem na světlém pozadí. Při malém množství textu lze pracovat i s obrácenou variantou, která je vizuálně přitažlivá, ale hůře čitelná.
- Vizuální prvky – text oživí obrázky a další vizuální prvky.
- CAPS LOCK – platí, že méně je více. Text psaný Caps Lockem je hůře čitelný. Hodí se pro některé nadpisy a kratší texty. Vždy záleží na kontextu a celkovém vyznění stránky.
- Experimenty – pokud nejste typograf, je dobré držet se osvědčených pravidel a vizuálně zajímavější pojetí nechat raději na profesionálech.
+ zásada navíc – vždy pište bez stylistických a pravopisných chyb. Text plný chyb nezachrání ani ta nejlepší typografie.