Čitelnost textu je jedním z nejdůležitějších aspektů webdesignu. Čitelný text ovlivňuje způsob, jakým návštěvníci zpracovávají informace obsažené na Vašem webu. Naopak špatná čitelnost textu dokáže odvézt čtenáře z Vašeho webu pryč. Na druhou stranu, správně nastavená čitelnost umožňuje uživatelům efektivně číst a přijímat informace v textu. Chcete, aby uživatelé mohli číst obsah a vstřebávat ho snadno.

 

Základní pojmy a co každý z nich znamená pro čitelnost webových textů

Existuje mnoho faktorů, které hrají roli v čitelnosti textu. Existuje také celá řada speciálních termínů, všechny velice důležité. Zde jsou některé z těch nejdůležitějších pojmů společně s jejich krátkými popisky a vysvětlením, jakým způsobem ovlivňují čitelnost textů.

Hierarchie

Každý typografický layout potřebuje alespoň nějaký základní prvek hierarchie. Hierarchie definuje, jak číst v textovém obsahu. Ukazuje uživateli, kde má začít číst a kudy s četbou pokračovat. To zajišťují především nadpisy textů. Ačkoli barvy textových polí mohou být použity pro zvýšení kontrastu záhlaví a těla textu, hierarchie se vztahuje především k rozdílu ve velikosti mezi těmito prvky. Hierarchie hraje obrovskou roli v tom, jak čitelné je rozložení textů na dané stránce. Je to důležitá technika, kterou musíte zvládnout, abyste dosáhli čitelné webové typografie.

Kontrast

Kontrast je hlavním faktorem toho, zda-li je text dobře čitelný. Špatně zvolený kontrast nutí uživatele k šilhání a čtení textu je tak celkově mnohem pomalejší a bolestivější pro oči čtenářů.

Výška řádky

Výška řádku je velmi běžným termínem a označuje prostor mezi jednotlivými řádky textu. Dostatečná výška řádku je důležité zejména v oblasti webdesignu, protože v konečném důsledku činí text více čitelný. Výška řádky, která je příliš malá způsobí, že čtenáři musejí při čtení mžourat oči. Pokud je výška řádku naopak příliš veliká, bude text vypadat jako samostatné subjekty místo toho, aby se jevil jako jeden celek.

Mezery mezi písmeny

Stejně jako výška řádku, odstupy mezi písmeny ovlivňují čitelnost v rámci webové typografie. Nesprávně zvolené rozestupy mezi písmeny ve slovech znatelně snižují čitelnost textu a to jak v případě, že jsou písmena těsně namačkána na sebe, tak i když jsou tak daleko od sebe, že se jeví jako samostatná slova.

Délka řádků

Délka řádků je ve webové typografii často přehlíženým prvkem, ale neměl by být. Délka řádky je, samozřejmě, počet slov na jedné řádce. Dobrá délka řádku je taková, která umožňuje oči čtenáře přirozeně přesouvat z konce řádku na začátek dalšího řádku bez toho, aby čtenář musel hledat, jestli začal číst správný řádek v pořadí.

 

Klíče k dobře čitelné webové typografii

Dosažení dobré čitelnosti je poměrně snadné, stačí jen dodržovat několik klíčových postupů. Čitelná webová stránka může jít dlouhou cestu se svými uživateli a čitelnost má obrovský dopad na jejich zkušenosti. Navrhování textových obsahů pro web je vždy o tom, aby zkušenosti uživatele byly co nejpříjemnější. Zde je 10 tipů, které Vám pomohou při zlepšování čitelnosti obsahu Vašich webových stránek.

1. Uživatelsky přívětivé nadpisy

Nadpisy jsou klíčovým prvkem tiskové a webové typografie. Jak již bylo zmíněno, jsou součástí textové hierarchie a jsou hlavním faktorem čitelného obsahu.

Za prvé - velikost nadpisů je stejně důležitá jako velikost samotného textu. Příliš veliký nadpis s velkým množstvím obsahu může při čtení vyvést čtenáře z rovnováhy a ten se tak může snadno ztratit. To v konečném důsledku ničí tok textového obsahu a vede k odvedení čtenářovo pozornosti. Nadpisy, které jsou příliš malé, dokážou také zničit hierarchii článku. Pokud je nadpis příliš malý, nebude čtenáře upozorňovat tak jak má.

Je velice důležité nechat dostatek prostoru mezi nadpisem a zbylým textem.

2. Čitelnost textu

Pojem čitelnost textu jsem zmínil již mnohokrát a vy jste o něm samozřejmě už dříve slyšeli. Příprava dobře čitelného textu je založena na správném používání nadpisů, hierarchie a zaostřovacích polí tak, aby se čtenář mohl v textu dobře orientovat.

Takže co dělá text čitelným? Existuje mnoho faktorů, z nichž většina již byla zmíněna. Velikost nadpisů a pozice, velikost těla textu, výška řádek textu, kontrast textu a způsob použití zaostřovacích polí.

Zaostřovací pole jsou určité prvky nebo objekty uvnitř layoutu, které dokáží přilákat čtenářovu pozornost. Může to být nadpis, grafický prvek, tlačítko, atd.

3. Bílá místa

V obsahově rozsáhlých layoutech používání prázdných (bílých) míst přispívá ke zvýšení čitelnosti obsahu. Bílý prostor pomáhá vyrovnávat vliv velkého množství textu a pomáhá uživateli k rychlejšímu čtení. Taková místa navíc oddělují jednotlivé prvky layoutu, včetně grafiky a textu.

4. Konzistence

Konzistence je často považována za důležitou techniku v rámci použitelnosti, ale to samé platí i pro čitelnost textu. Konzistence v hierarchii textu je v podstatě uživatelsky přívětivé rozložení těch nejdůležitějších informací obsažených v textu. To znamená, že všechny nadpisy stejného významu v hierarchii by měly mít stejnou velikost, barvu a typ písma. Například všechny nadpisy by v textu měly vypadat identicky. Proč? Tento soulad poskytuje čtenářům základní zaostřovací body, díky kterým je umožněna snazší orientace v textu.

5. Hustota textu

Hustota textu odkazuje na množství slov, které jsou umístěny v dané oblasti. Hustota obsahu má zásadní vliv na čitelnost celého textu. Hustota textu je ovlivněna spacingovými možnostmi, jako je výška řádky, mezery mezi písmeny a velikosti textu. Najdete-li dokonalou rovnováhu mezi všemi těmito prvky, budete mít dokonalou hustotu textu, která perfektně zlepší čitelnost vašeho textu.

6. Důraz na důležité prvky

Dalším klíčovým faktorem je důraz na určité prvky v textovém obsahu. To zahrnuje zvýraznění odkazů, tučná písma a zobrazování citací. Jak již bylo zmíněno, zaostřovacími body jsou zásadní pro webovou typografii. Zvýrazňováním těchto prvků, můžete nabídnout čtenářům důležitá zaostřovací pole. Tyto prvky a objekty pomáhají rozbít často monotónní text.

7. Organizace informací

Věřte tomu nebo ne, tím že uspořádáte informace v článku, můžete posílit čitelnost celého textu. Uživatelé jsou tak s lehkostí vedeny přes textový obsah webu, který je řádně organizovaný, protože informace je snadnější najít.

8. Implementace grafických prvků

Každé textové pole potřebuje alespoň nějakou vizuální podporu, ať už se jedná o obrázek, ikonu, graf nebo fotku. Umístěním grafiky v článku může být obtížnou záležitostí. Při implementaci grafiky do textového pole je také třeba nezapomínat na ponechání dostatečně volného prostoru mezi grafikou a textem.

V případě, že jako grafický prvek umístíte do textu obrázek, pak je nutné obrázek ohraničit několika pixelovým prázdným místem tak, aby byl dostatečně oddělen od textu a nijak do něj nezasahoval.

9. Použití oddělovačů

Oddělovače jsou jednoduchým a snadný způsobem, jak rozdělit text do sekcí čistým a organizovaným způsobem. Tyto separátory mohou být použity k rozdělení hierarchie textu, jako jsou nadpisy a textové pole. Mohou být také použity k rozdělení obsahu do sekcí.

Nejjednodušší forma separátorů je vložení prázdného řádku do textového pole. Takové prázdné řádky jsou velmi užitečné pro tvorbu jemných rozdílů, které hrají velkou roli v čitelnosti textu.

Dalším častým způsobem, jak rozdělit textové pole je použití boxů. Textová pole jsou vynikající pro oddělování nesouvisejícího obsahu na jedné stránce.

10. Dobré okraje

Správně zvolené okraje jsou jedním z nejlepších bílých prostorových prvků. Okraje na obou stranách textu donutí čtenářovo oko soustředit se na obsah hlavního článku.

Okraje podporují článek také jiným způsobem. Pomáhají oddělit textový obsah od zbytku konstrukce a layoutu. Text nesmí přetékat do jiných prvků layoutu, a to zejména pokud se jedná o dlouhý článek. Okraje pomáhají definovat článek a jeho oddělení od zbytku stránky.