Č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í. ↩
9 comments
Autor původního článku argumentuje přednastavenou velikostí písma v prohlížečích. Jenže kdyby výrobci prohlížečů produkovali po všech směrech čitelný základ, nemuseli bychom ho resetovat a normalizovat. ;-)
Tennant si dal práci se zdroji, v tomhle mi ten článek připadá dobrý. Doufám jen, že hlavní sdělení kolegové tupě nepřevezmou.
Když už jsme u té čitelnosti: Mám tu u sebe něco rozbitýho, nebo máš tenhle blog fakt nastavený na tak malou šířku?
https://skitch.com/jankorbel/gb1bw/itelnost-pisma-v-pixelech-marginalie
1. to jestli nám písmo připadne větší nebo menší souvisí s jeho designem a především střední výškou (tj. výškou minusky -x-). Zkuste si porovnat například Georgii a jakýkoliv Garamond. Při stejné bodové či pixelové velikosti bude Garamond působit menší, protože má menší střední výšku. (Na to asi odkazuje autor tohoto článku v předposledním odstavci.)
2. Představa, že větší písmo se čte automaticky lépe je omyl. Vedle toho, že není úplně jasné co to znamená to “čte lépe”. Jde nám o čtení rychlejší nebo pohodlnější? A samozřejmě nezáleží jen na velikosti písma, ale i ostatních parametrech, jako jsou řádkový proklad, délka řádku, okraje, …
3. Standard v knihách rozhodně není 12 bodů. To snad v knihách pro děti. Určitě se to liší podle žánru (slovníky budou používat zpravidla menší, beletrie větší). Domnívám se, že se to bude pohybovat okolo 10–11 bodů. Ale ještě jednou: zásadní je měřit střední výšku.
A proč srovnávat zrovna s knihami? Proč ne s novinami a časopisy, které jsou snad i svojí povahou webu trochu bližší?
Ještě jsem neviděl dobrý článek o čitelnosti napsaný tak, aby byl pro veřejnost srozumitelný.
@jankorbel — Honzo, tenhle blog se jmenuje Marginalie, to proto těch 300 px na šířku. ;-) Akorát mě teda nenapadlo, že budu psát takhle dlouhý texty a štve mě, že mi Posterous sežral nedělitelný mezery a neumí pořádně pracovat s obrázkama – zamyslím se nad přechodem na Tumblr.
@Slávek Černý — Pokud pracujete s pixelem podle W3C, nejde o aproximaci, ale o krácení zlomků: 16/96 = 12/72. ;-) Ve světě obrazových bodů na obrazovkách to ale neplatí ani aproximací. 16 pixelů je velkých jako 12 bodů jen na obrazovce s 96 ppi. Takhle malou jemnost rastru nemají obrazovky už několik let. K tomuhle tématu také: http://billhillsblog.blogspot.com/2009/05/confusion-over-screen-resolution-ca...
@MrBrezina — Díky za doplnění. :-) Taky mi tu chybí kresebnost znaků, ale to už jsem nechtěl přehlcovat, protože to s původním článek nesouvisí.
Vyřeší se tak i problémy zmiňované v komentářích u původního článku ohledně mobilních zařízení. Druhou otázkou už je, zda přednastavená velikost písma je dobrá/špatná pro hlavní obsah/pro vedlejší obsah.
Autor v tom článku je trochu přehnaně kategorický, to ano. A ani své postoje nepodkládá kvalitními argumenty. Je ale fakt, že já sám písmo velikosti 16 px na svých webech u verzí pro PC používám.
Ale jak už psal pan Březina, je to propojeno s velikostí řádku, prostrkávání, písmu a hlavně délce řádku. Jsem názoru, že čím větší písmo, tím by měl být řádek delší. (Neznáte někdo nějaký koeficient ideálního poměru délky řádku k velikosti písma?)
http://billhillsblog.blogspot.com/2008/01/scrolling-horrible-thing-to-do-to.html
Pokud se chcete zeptat, kolik je to v pixelech… ;-)
(Tamtéž také o velikostech písma, tentokrát v typografických mírách, a také o tom, proč je stránkování lepší než scrollování.)
