Použite zrozumiteľný jazyk, viditeľnú hierarchiu, primeranú veľkosť a rozostupy, obmedzte dĺžku riadku a overte text pri zoome aj na úzkej obrazovke.
Čitateľnosť nie je otázka jedného fontu ani skrátenia každého odseku. Vzniká zo spojenia jazyka, typografie, šírky stĺpca, hierarchie a kontextu zariadenia. Text môže byť odborne presný, no prakticky nepoužiteľný, ak je drobný, natlačený, rozdelený slabými nadpismi alebo plný nevysvetlených interných pojmov.
Cieľom nie je zjednodušiť tému na marketingové heslá. Človek má rýchlo nájsť odpoveď a podľa potreby pokračovať do detailu. Web musí zniesť zväčšenie textu, úzku obrazovku, preklad aj používateľské nastavenia bez prekrývania. Rozhodnutia treba testovať na reálnom obsahu, nie na krátkom ukážkovom odseku v dizajnovom systéme.
Jazyk vychádza zo znalostí a cieľa čitateľa
Pomenujte publikum, jeho predchádzajúce znalosti a rozhodnutie, ktoré má po prečítaní urobiť. Odborný pojem použite, keď je presný a potrebný, no pri prvom výskyte ho vysvetlite. Skratky, interné názvy a anglické výrazy nemajú byť skúškou príslušnosti. Jedna veta by mala niesť zrozumiteľný hlavný vzťah.
Pri dlhom návode začnite výsledkom a potom uveďte kroky, podmienky a výnimky. Aktívny jazyk často jasnejšie ukazuje zodpovednosť, ale neprepisujte všetko mechanicky. Čísla, dátumy a jednotky formátujte konzistentne. Právny alebo odborný význam neskracujte bez recenzie kvalifikovanej osoby.
Typografická mierka musí fungovať v reálnom rozhraní
Základné písmo nastavte tak, aby bolo pohodlne čitateľné na bežných zariadeniach a dalo sa zväčšiť cez nastavenie prehliadača. Rozdiel medzi nadpismi, textom, popisom a ovládaním má byť zreteľný, no nie závislý iba od veľkosti. Príliš tenký rez alebo dekoratívny font môže oslabiť čitateľnosť aj pri dostatočnom kontraste.
Riadkovanie a medzery medzi odsekmi majú oddeliť myšlienky bez rozpadu textu. Nepoužívajte obrázok textu tam, kde môže byť živý HTML obsah. Pri vlastnom fonte nastavte bezpečné náhradné písmo a sledujte zmenu rozmerov počas načítania. Používateľská voľba fontu alebo väčších medzier nesmie zablokovať funkciu.
- čitateľná základná veľkosť a rez písma
- konzistentná mierka nadpisov a popisov
- dostatok riadkovania a odsekových medzier
- živý text namiesto obrázka s textom
Šírka riadku a rozloženie znižujú stratu orientácie
Príliš dlhý riadok sťažuje návrat oka na začiatok ďalšieho, príliš krátky rozbíja vetu. Nastavte rozumnú maximálnu šírku textového stĺpca podľa použitého písma a kontextu. Na veľkom monitore nemusí odsek vypĺňať celú obrazovku. Na mobile sa vyhnite horizontálnemu posúvaniu bežného textu.
Bočné panely, sticky prvky a reklamné bloky nesmú stláčať hlavný obsah na nepoužiteľnú šírku. Tabuľku alebo kód možno posúvať samostatne s jasným označením, no základný výklad má zostať dostupný. Pri zväčšení sa rozloženie musí prelomiť, nie prekrývať alebo skrývať dôležité vety.
Nadpisy a zvýraznenie vytvárajú mapu obsahu
Každý nadpis má pomenovať tému nasledujúcej časti a zachovať logickú úroveň. Nepreskakujte hierarchiu len kvôli vizuálnej veľkosti; štýl riešte v CSS. Čitateľ pri skenovaní potrebuje pochopiť argument bez čítania každej vety. Generické nadpisy ako „Viac informácií“ túto mapu nevytvárajú.
Tučné písmo používajte na krátke nosné pojmy, nie celé odseky. Veľké písmená, kurzíva a farebné zvýraznenie znižujú účinok, ak ich je priveľa. Zoznam pomáha pri rovnocenných položkách a krokoch, no súvislé vysvetlenie patrí do odseku. Formát má sledovať význam informácie.
- jeden opisný hlavný nadpis stránky
- logická postupnosť úrovní bez vizuálnych skratiek
- zoznam iba pre rovnocenné body alebo kroky
- zvýraznenie nosných slov namiesto celých blokov
- primeraná šírka stĺpca na veľkom monitore
- reflow bez horizontálneho posúvania bežného textu
- vysvetlené skratky a odborné pojmy
- stabilné náhradné písmo počas načítania
- test porozumenia s cieľovým publikom
Testovanie spája porozumenie s technickou odolnosťou
Nechajte zástupcu publika vysvetliť text vlastnými slovami a vykonať rozhodnutie podľa jeho obsahu. Pýtajte sa, ktoré pojmy boli nejasné a kde hľadal ďalší krok. Automatické skóre čitateľnosti môže upozorniť na zložité vety, no nepozná odborný kontext ani správnosť tvrdenia.
Overte mobil, veľký monitor, zväčšenie textu, úzky viewport, vysoký kontrast a preklad dlhších slov. Kontrolujte aj načítanie fontu a tlač, ak je dokument určený na použitie mimo obrazovky. Zmenu merajte dokončením úlohy a spätnou väzbou, nie sľubom univerzálne vyššej konverzie.
Časté otázky
Aká je ideálna veľkosť písma na webe?
Jedno číslo neplatí pre každý font a kontext. Dôležitá je reálna čitateľnosť, možnosť zväčšenia, kontrast a fungovanie rozloženia na rôznych zariadeniach.
Majú byť všetky odseky veľmi krátke?
Nie. Odsek má niesť jednu súvisiacu myšlienku. Umelé delenie každej vety narúša tok rovnako ako dlhý blok bez štruktúry.
Stačí automatické skóre čitateľnosti?
Nie. Neoverí význam, presnosť ani porozumenie cieľového publika. Použite ho len ako podnet spolu s redakčnou a používateľskou kontrolou.
Zdroje a ďalšie čítanie
Web developer zo Spišskej Novej Vsi. Venuje sa WordPressu, WooCommerce, vlastným pluginom, API integráciám, webovým aplikáciám a praktickým AI automatizáciám.
