Čitelnost písma v pixelech
Smashing Magazine publikoval článek 16 Pixels: For Body Copy. Anything Less Is A Costly Mistake, ve kterém D. Bnonn Tennant argumentuje, proč bychom neměli na webu použít nikdy písmo menší než 16 obrazových bodů. Článek je velmi populární a na Twitteru se šíří díky odborníkům na použitelnost a čitelnost.
V textu článku je uvedeno několik zajímavých faktů o klesající propustnosti světla sítnicí stárnoucího človeka a podobně. Zároveň ale článek uvádí nešťastně příklad různé velikosti písma pomocí zavádějících obrázků a pracuje s nevhodnými jednotkami.
Pojďme se podívat, v čem je potíž:
Vizualizace velikostí
Typografický bod je délková jednotka o pevném rozměru. Na jeden palec (2,54 cm přesně) připadá 72 typografických bodů (1 pt = 0,3527 mm). Autor uvádí, že běžnou velikostí písma v knihách je 12 bodů (4,23 mm) a pořídil dvě fotografie, na kterých srovnává dvanáctibodové písmo v knize s písmem o velikosti 16 obrazových bodů na třiadvacetipalcové a patnáctipalcové obrazovce. Obrazový bod je anglicky pixel (px).
Výřez fotografie s knihou u 23" obrazovky. Vlevo písmo o velikosti 16 obrazových bodů na obrazovce a vpravo kniha s velikostí písma 12 typografických bodů:
Výřez fotografie s knihou u 15" obrazovky. Vlevo písmo o velikosti 16 obrazových bodů na obrazovce a vpravo kniha s velikostí písma 12 typografických bodů:
Podívejte se pozorně na oba obrázky. Smyslem těchto dvou fotografií měla být ukázka toho, že 16px písmo na různých obrazovkách má různou velikost. Dopadlo to ovšem jinak. Písmo na obou obrazovkách vypadá jako stejně velké, ale mění se reprezentace velikosti 12pt písma z knihy.
Podívejte se na výřezy postavené vedle sebe. Zleva – 23" obrazovka s 16px písmem, kniha s 12pt písmem u 23" obrazovky, 15" obrazovka s 16px písmem, kniha s 12pt písmem u 15" obrazovky:
Je s podivem, že písmo v knize mění velikost podle toho, u které obrazovky je fotografováno. Takhle to v reálném světě nefunguje. Správně by mělo být písmo v knize stejně velké bez ohledu na to, vedle jak velké obrazovky je fotografujete.
Pokud fotografii 15" obrazovky zmenšíme tak, aby bylo písmo v knize stejně velké jako na první fotografii, dostaneme zajímavý výsledek – 16px písmo na 15" obrazovce je mnohem menší než na 23" obrazovce:
Při správné prezentaci fotografií by bylo vidět, že 16px písmo na 15" obrazovce je menší než na 23" obrazovce. Skvělé. Jenže tady problémy nekončí. Nedá se totiž říci, že takového výsledku dosáhneme vždy.
Problém jménem pixel
Obrazový bod – pixel – je jednotkou rastru. Představte si, že kreslíte vyplňováním celých čtverečků na čtverečkovaném papíře. Každý čtvereček jakožto jednotka vašeho rastru představuje jeden obrazový bod. Pokud chceme vědět, jak velký je rozměr obrazového bodu, musíme znát dvě informace: rozměr obrazovky (rastru) a počet obrazových bodů, které zobrazuje. Výrobci obrazovek většinou uvádějí rozměry obrazovek pomocí jejich úhlopříčky a poměru stran. Musíme tedy zapojit trojčlenku. Můj notebook s úhlopříčkou širokoúhlé (16:10) obrazovky 13,3 palců má výšku obrazovky 178 mm (7 palců) a zobrazí na ní 800 pixelů. Dostaneme se tedy k rozpětí mezi obrazovými body 0,2225 mm, neboli k rozlišení 114,2 obrazových bodů na palec (ppi).
A tady je ten problém. Na mém notebooku má 16 obrazových bodů velikost 3,56 mm (to je asi 10 pt). A teď si představte šestnáctipixelové písmo na retina displeji, který má iPhone 4. Při 326 ppi odpovídá 16px písmo velikosti 1,247 mm (~3,5 pt). Na různých zobrazovacích zařízeních s různým rozlišením bude 16 pixelů pokaždé mít jinou velikost.
Při čtení vstupuje do hry nejen velikost, ale také vzdálenost textu od oka. Zatímco od dnes běžného displeje stolního počítače bychom měli sedět asi 70 centimetrů, u notebooku to bude méně. Pixel na notebooku může být menší než na displeji stolního počítače, protože ho vidíme z menší vzdálenosti. A také na displej telefonu se díváme z kratší vzdálenosti než na displej notebooku.
Nejsem si úplně jist, že můžeme na komfort čtení při zkracující se vzdálenosti uplatnit přímou úměrnost, ale budiž. Pokud nám u textu vzdáleného 70 cm vyhovuje 12 typografických bodů, bude to u 40 cm vzdáleného textu jen 6,9 bodu a u 15 cm vzdáleného textu 2,6 bodu. Takže bychom se s řadou 12 bodů na vzdálenost 70 cm, 10 bodů při vzdálenosti 40 cm a 3,5 bodu u 15 až 20 cm vzdáleného mobilu mohli poprat.
Pixel na webu
Na webu nám ale do téhle problematiky zasáhne technologie CSS3. Ta považuje obrazové body za absolutní jednotku, která se rovná 1/96 palce. Podle CSS3 tedy pixel má délku 0,265 mm. Tím pádem bude 16px písmo mít velikost 4,23 mm, což je shodou okolností 12 pt.
Čím to ale, že na fotografii je 16 pixelů pokaždé jiná velikost?
Písmo na obrazovce
Možná čekáte nějaké rozuzlení na závěr. Písmo je ze své povahy spíše vektorovou grafikou než rastrovou. Proto bez ohledu na to, jak velký obrazový bod pozorujeme, mělo by nás také zajímat, z kolika obrazových bodů vlastně vodorovně a svisle skládáme obraz písmene. Čím méně obrazových bodů nám musí vystačit, tím menší úroveň detailu obraz zachycuje, a tím hůře písmena rozpoznáme.
Zároveň je třeba říci, že ne všechny fonty jsou ve stejné velikosti stejně dobře čitelné. Počet obrazových bodů, kterými je písmeno vykresleno, záleží vedle jemnosti rastru také na výšce malých písmen a na otevřenosti kresby.
Bez ohledu na to, jak to tedy je s pixely – jestli jsou to jednotky závislé na rozlišení nebo mají pevný rozměr – nedá se paušálně stanovit velikost písma, pod kterou už není čtení komfortní. ↩
