Velikost písma na webu a čitelnost

10.10.2016| Petr Fidler

Dnes mám krátké zamyšlení nad velikostí písma na webu. Podíváme se hlavně na to, jak ovlivňuje použitelnost webů. Dají se vaše texty snadno přečíst? Jak můžete čitelnost ovlivnit?

Taková normální situace - narazíte na zajímavý článek, otevřete ho, zamžouráte, nakloníte se k monitoru a začnete číst. Zkuste to například na recenzi hry Mafia 3 nebo tady. Klidně si to přečtete, pokud tomu rozumíte, já tady počkám :)

Až se vrátíte, zkuste porovnat velikost písma s tímhle článkem a zamyslete se, co se vám čte lépe? Pevně věřím, že mnohem méně musíte namáhat oči zde.

Tady bych mohl jednoduše skončit, dostali jsme se k pointě - zamyslete se, zda jsou vaše texty dobře čitelné. Zkuste si je přečíst na mobilu, tabletu a na notebooku s retina displejem v největším rozlišení. Dejte si zařízení trochu dál od sebe - stále je text dobře čitelný? Výborně, pak vám gratuluju.

Pokud si má váš text někdo přečíst (a to byste měli chtít), usnadněte mu to. Zobrazte mu ho dostatečně velký s dobrým fontem a tloušťkou písma.

Čím ovlivníte čitelnost?

  • Velikost písma. Tato odrážka má různou velikost a stejné ostatní parametry. (font-size)
  • Tloušťka písma. Tato odrážka má různou šířku při stejné velikosti. (font-weight)
  • Odřádkování. Pokud máte text
    na více řádků, je vhodné nastavit
    dostatečné mezery mezi řádky
    (line-height)
  • Font. Různé fonty mají různou šířku písma a velikost. (font-family)
  • Barva a kontrast. Čím menší kontrast, tím hůře se text čte (color)

Celkový styl vytváří samozřejmě kombinace výše uvedených bodů. Často do toho vstupuje také typografie, grafikovi nápady, klient, který chce nacpat do prostoru co nejvíce informací a další.

Čitelnost lze naštěstí ověřit docela snadno - prostě se na text podívejte různými způsoby, naznačenými výše. Nebo to dejte přečíst někomu s brýlemi a pak ho požádejte, ať si je sundá a podívá se na text znovu. A zkuste si, že vám na webu funguje zvětšení textu.

Zaujal tě článek a chceš ho nasdílet?