V poslední době se mi často chce brečet, když čtu nějaký web, který má hrozné písmo a naprosto neupravený vzhled (co se týče textu). Proto jsem se rozhodl sepsat mé myšlenky a pravidla, kterých se držím.
Slovo úvodem o tom, proč jsem napsal tento článek
Jednoduše proto, že mám rád čitelné texty a na webu se mi jich moc nedostává. Některé weby mají písmo prťavé, jiné dlouhé bloky textů, že bych potřeboval pravítko, abych se v řádcích neztrácel. Je to hrůza. A raději než bych si stěžoval a ukazoval prstem – zkusím tu napsat pár pravidel, kterých se držím. A vy můžete také, pokud chcete mít čitelnost textů na výbornou.
Do článku přihodím i pár obrázků, aby vše bylo snadno představitelné. Doufám, že vám článek pomůže. Pokud i tak budete raději za živé ukázky webů, které mají špatné písmo – napište do komentářů. Udělal bych další článek, kde bych weby ukázal a řekl, co je špatně. Zároveň bych je zkusil pozměnit a ukázat, jak se všechny nedostatky dají lehce odstranit.
1) Nejdůležitější věcí je jistě správná délka řádku
Dlouhé nudle textů jsou totiž nudné a špatně se u nich navazuje na nové řádky. Proto se je snažte dělat přiměřeně dlouhé. Ideální řádek by měl mít 60-80 znaků. Nejde to říct přesněji, protože hodně záleží na velikosti písma. Pokud je velké a řádek krátký, čte se text hodně blbě. V každé situaci se ovšem držte alespoň přibližného čísla jako tu uvádím. Konkrétně tady na webu používám 80 znaků na řádek a přijde mi to jako naprostý ideál.
Ostatně to můžete posoudit sami podle toho, jak se vám článek čte a jak pohodlně přeskakujete při čtení na nový řádek. Zkuste toto pravidlo dodržovat a uvidíte, jak se čtení na vašem webu zpříjemní. Krátké řádky se totiž čtou pomalu (zdržuje časté přeskakování) a ty delší jsou zas únavné.
2) Kontrast černé a bílé není vhodný pro čtení
Hodně webů má černé písmo na bílém pozadí, ale to není zrovna to nejlepší. Unavené oči totiž černé písmo na bílém pozadí mlátí do očí a celkově se špatně čte. Dříve jsem také černé písmo používal, ale později mi došlo, že je to špatně. Je to stejné jako s pozadím u webů. Taky tam nehodíte přímo černou, ale zvolíte nějaký hodně tmavý stupeň šedé. Například.
Stejně tak to udělejte s písmem. Udělejte ho hodně tmavou barvou, ne ovšem přímo černou. Celý text nebude tolik trápit unavené oči a celkově bude působit jemněji. Tady na webu používám třeba barvu #3D3D3D, ale můžete použít i hodně často používanou #333. Barvu písma můžete také přizpůsobit barvě designu. Pokud máte nahnědlý design, zkuste třeba #60493e. Přičemž nadpisy nechte černé. Ještě více tak odlišíte samotné titulky od textu.
3) Vyhněte se nevhodnému zarovnání do bloku
Vlastností text-align můžete zarovnávat texty na vašem webu. Jednou z možností je zarovnání do bloku (justify). Sem tam to nějaký web používá, ale jen velmi zřídka je to hezké. Proto vám radím – nepoužívejte zarovnání do bloku. Vytváří totiž v textu dlouhé mezery a ty jsou hrozné na čtení. Mnohem příjemnější je nějaká ta mezera na konci řádku. Nebuďte perfekcionisté.
Vlastně nepoužívejte zarovnání vůbec. Proč? Protože si to prohlížeč udělá sám podle okolností. My čteme zleva doprava, ale někdo i naopak. Pokud tedy dáte napevno zarovnání doleva, moc dobře se jim to číst nebude. Dost možná to prohlížeč sám přehodí, to já nevím. Každopádně text-align nemusíte vůbec řešit. Prohlížeč nám zarovnává doleva a díky tomu jsou texty čtivé, neměňte to. Neexistuje k tomu žádný rozumný důvod.
4) Zajímejte se o řádkový proklad (mezery mezi řádky)
Řádkový proklad je ta bílá mezera mezi řádky. Pomocí CSS si ji můžete zvětšit, případně zmenšit tak, aby se text četl pohodlně. Nastavením správné hodnoty vytvoříte vzdušnější text, který se bude rychleji číst. Pomocníkem vám může být tento kalkulátor. Stačí do něj zadat šířku obsahové části a velikost písma. On vám za to ukáže ideální hodnotu vašeho prokladu.
Ideální hodnoty jsou někde od 1.2 do 1.9. U menších písmen dávejte číslo větší, u větších menší. Já používám hodnotu 1.6. Jen pro úplnost – proklad aplikujete zápisem do CSS. Stačí k velikosti a barvě písma připsat řádek line-height a zadat požadovanou hodnotu. Zkuste se také držet pravidla, že vždy zvolíte hodnotu, která bude o drobet větší než váš ideál. Jde o to překonat zvyk, který vás drží příliš při zdi a písmo moc splácané k sobě.
5) A neopomíjejte krátké odstavce s volnou řádkou
Na webu se přeci jenom nečte tak dobře jako v novinách. Ukázku ideální délky odstavce doufám představuji v každém článku na webu. Nesmí být příliš dlouhý, příliš krátký a informačně bezcenný. Takové totiž můžete rovnou mazat. Každý odstavec by měl mít „svůj příběh“ a o něčem být. Ten následující pak má volně navazovat a být oddělen prázdným řádkem.
Oddělením odstavců prázdným řádkem docílíte vzdušnosti a příjemného bílého místa (kam lidé rádi odklikávají). Čtenář se bude v textu lépe orientovat a ani při rolování se v čtení neztratí. Navíc krátké odstavce dovolují čtenáři volně přeskakovat v textu a lépe si tak najde to, co zrovna hledá. A tak by to mělo být, ne? Aby byl text jasný a přehledný.
{ Komentáře k článku }
Diky za tipy. S tou sedou souhlasim u textu, nevim proc jsem na svojem blogu mel cernou. Hned jsem to zmenil. Ale premyslim lepe vypadaji uzsi blogy nez sirsi. U sveho druheho blogu jsem to suzil, ale nevim jestli se to cte lepe nez muj osobni blog.
Co na to rikate vy ostatni? Diky za odpoved.
Souhlasím se všemi body a také se všech držím již od pradávna. Jen na svém stařičkém téměř mrtvém blogu mám myslím „malé“ písmo. Co myslíš ty? Jak hodnotíš celkovou čitelnost? Je fakt že na mém projektu jsem styl písma zvolil už rozumějí a čitelněji, i když ho tam moc není :).
Podle mě je fajn. Jen mám raději jiný styl písma. Ten na tvém webu je totiž takový nevýrazný a občas se špatně čte, když autor nastaví písmo příliš malé. Je to proto, že nemá tak výrazné tahy. Jako když má třeba y tu čárku dolů. Nevím jak se tomu v typografii říká.
Ale i přesto se mi tvůj blog čte dobře. Barva je příjemná, řádný nejsou dlouhé a písmo není malé. Já bych tam nic neměnil.
V tom případě děkuji za kladný názor ;).
Používám v blogu text zarovnaný do blogu a měnit to asi nebudu. Zdá se mi to upravenější. Sice vznikne sem tam nějaká mezera mezi slovy, ale to je podle mého názoru stále lepší než velká mezera na konci.
Pěkně napsáno. Ještě dodám nejdůležitější věc: Je třeba zvolit čitelný font, takže žádný Comic Sans.
Jinak ke třetímu bodu, IMHO by mělo zarovnání textu záviset na jazyce – i když budu třeba Arab, angličtinu budu pořád číst zleva doprava. Zarovnání do bloku by bylo dobré, bohužel prohlížeče ho vykreslují ne zrovna nejlépe čitelně, snad se to zlepší při použití CSS vlastnosti hyphens. A oprav si text-aling.
Jasně, na použitém písmu taky moc záleží. Ale v článku jsem se o tom už nechtěl zmiňovat, aby nebyl příliš dlouhý. Mě se třeba hrozně líbí Georgia. Přijde mi to jako ideální font na čtení. Tohle patkové písmo bych určitě doporučil pro každý blog. Na ostatní weby bych asi házel nějaké menší bezpatkové písmo.
Jinak s tím zarovnáním máš pravdu. Jen nevím, jak to bude fungovat v češtině. A jestli to vůbec bude nejlepší nápad, rozdělovat na webu slova. Já to každopádně používat nebudu.
PS: Překlep v článku jsem již opravil, díky za upozornění.
Díky za pěkný článek, škoda, že jste jej nenapsal o nějaký ten rok dříve. Ono se člověk postupně k jednotlivostem propracuje, byť občas metodou pokus omyl a stojí jej to práci navíc.
S čím se peru delší dobu (možná námět na další váš článek? :-)) jsou fonty. Na webu mám arial, toto písmo asi nic nepokazí, ale přijde mi takové strohé. Více se mi líbí třeba Georgia, ale nejsem si jist, zda-li toto písmo není pro lidi hůře čitelné.
Koukal jsem na idnes, aktuálně, ale třeba i na NYT, CNN, NASA, různé velké i malé blogy a poměr bezpatkové – patkové je tak 50 na 50… Jaký font je praktičtější, čtivější, je nějaká „studie“ – resp. statistika, jaký font nejlépe (nejdéle) udrží pozornost čtenáře a jak to napsat, který (-é) z fontů „nejvíce lahodí oku“?
Na webu jako takovém se dá pracovat s cca 7-9 fonty, zbytek je zastoupený „méně než by bylo třeba“. On totiž font není na straně serveru, ale na straně klienta, takže záleží na tom, jestli je na daném počítači font nainstalovaný. Jak říkám, do takových 95 % počítačů to jsou tuším jen TNR, Arial, Lucida, Century Gothic, Georgia, Garamond a možná ještě nějaké. Pokud chcete vlastní font, tak se to řeší přes samotný server, kam se font uloží, ale pro klienta to znamená stažené kilobyty navíc. Pro základní potřeby ale stačí těchto sedm.
Teď k samotným písmům – podle typografických pravidel záleží na tom, jak je web zaměřený. Pokud je technicky zaměřený, používáte bezpatkové písmo, pokud je to kecálek, blog apod. používáte písmo patkové. Obecně patkové písmo díky serifům (patkám) nutí oko zůstat na řádku, protože spojuje písmena do sebe. Oproti tomu bezpatková písma se používají spíše na krátké nápisy, nadpisy, letáky, apod. Nejlepšími patkovými písmy jsou asi Garamond, Georgia, Bookman (ten se používá na knižní sazbu), Palatino je poměrně zajímavý font. Z bezpatkových pak doporučuji asi Tahomu (nebo Verdanu, to je rozšířená Tahoma). Nikdy nepoužívejte Times New Roman. Co se týče ostatních fontů, tak mně se třeba hodně líbí Avant Garde, ale ten není zastoupen na všech počítačích.
Tomáši,
díky za přínosný článek. Sám s čitelností písma věnuji u svého magazínu věnovanému svatbám. Grafik mi doporučil písmo Century Gothic, ale přijde mi, že ne na všech monitorech se snadno čte. I s barvou jsem měl problém, původní namodralo jsem změnil na černou, pak na šedivou… nakonec jsem tam hodil Tebou zmíněnou #333 (ta je fakt nejlepší).
Pokud bys měl chuť a čas, můžeš prosím na můj web kouknout a napsat mi, jak to vidíš s čitelností?
Jsem rád, že článek funguje a pomáhá k lepší čitelnosti. Tvůj web se mi líbí. Možná bych se nebál horní menu udělat výraznější barvou, aby bylo na první pohled jasnější. Přeci jenom vyčnívat má. Ale k tvé otázce – font se mi ukazuje Georgia. Změny bych udělal ty, že bych udělal písmo o drobet větší a větší i řádkování.
Písmo bych udělal velikostí 14 namísto 13. Je dobré postupovat po dvou bodech (12, 14, 16). Písmo nebude větší, ale jen půjde do jeho správné šířky (nebude tak namačkané na sebe). Hodnotu řádkování jsem pak už jen vycucal z typografického kalkulátoru podle šířky a velikosti písma webu. Zde je CSS, pokud se ti mé návrhy líbí:
Zkus si otevřít článek s původním písmem a pak po úpravě. Uvidíš, že to bude lepší. Jo a jestli tě písmo zajímá víc, mrkni se na nový článek. Ukazuji v něm postup, jak vybrat vhodné písmo pro web.
Tomáši, díky moc za tipy.
Už jsem je zohlednil, je to fakt o dost čitelnější.
Komentáře jsou pro tento článek již uzavřeny.