marginálie

Pixel je mrtev, ať žije referenční pixel!

Je konec dohadům, zda navrhovat web pro šířku 1024 nebo 1200 pixelů (px). Proč? Pixel jako jednotka ztrácí svůj dřívější smysl a získává nový. Notebook, na kterém píšu tenhle text, má rozlišení 114 pixelů na palec (ppi), smartphone, na kterém ho možná čtete, už má ale rozlišení dvakrát jemnější. Až se vysoká rozlišení objeví na obrazovkách s většími úhlopříčkami, budou mít displeje kapacitu přes 4 Mpx. A to bude brzy.

Pixel v DTP

Vysoké rozlišení a kapacita displejů vykážou u webdesignu jednotce hardwarového obrazového bodu podobné místo, jaké má v DTP. U výstupů v DTP se obvykle předpokládá, že se budou pohybovat od 600 ppi výše, ale běžně se pracuje s dvojnásobkem nebo čtyřnásobkem. Obrázek o kapacitě 16 Mpx z dnes běžného fotoaparátu se při rozlišení 2540 ppi může smrsknout na 52 × 35 milimetrů. Zatímco pixel na obrazovce je široký asi 0,21 mm, černý bod na filmu z osvitky je třeba jen 0,01 mm velký. To je tak malý bod, že ho z běžné vzdálenosti okem nerozlišíte.

Běžně se tedy v DTP setkáte s praxí, že se vstupní raster obrazových dat na výstupu přerozděluje (použijete obrázek s rozlišením třeba jen 300 ppi) a rozlišení 2540 ppi (nebo častěji kolem 1200 ppi) má jen vektorová grafika, především písmo. Využívá se při tom toho, že polotónová grafika je stejně tištěna autotypickým rasterem kolem 85 až 185 bodů na palec (dpi), takže u fotografií na extrémně vysokém rozlišení nezáleží (jeden autotypický bod v tisku je tvořen více než jedním pixelem na filmu z osvitky).

Pixel v poměru

Co to pro nás znamená? Už dnes, když připravujeme web pro mobilní zařízení s jemným rozlišením, předpokládáme, že nebude zobrazován 1 : 1, ale v nějakém poměru. Obvykle se už pohybujeme ve zvětšení 1,5 : 1 až 2 : 1.

Máme tedy několik pixelů:

• pixel zdrojové rasterové grafiky (datový),
• pixel zobrazovacího zařízení (hardwarový),
• pixel datový zobrazený v poměru k hardwarovému (referenční).

Aby toho nebylo málo, s CSS2 nám W3C nadělilo pixel jako absolutní jednotku o rozměru 96 ppi (tedy 1 px = 1/96 palce). Pixel v CSS je tedy druhem pixelu referenčního s absolutně daným rozměrem kolem 0,26 mm.

Na zařízeních s operačním systémem Android se navíc můžeme setkat s jednotkou density-independent pixel (dip nebo dp), který normalizuje pixel, jako by zařízení mělo rozlišení 160 ppi. Takto definovaný pixel je opět pixelem referenčním o velikosti kolem 0,16 mm.

Na velikost referenčního pixelu se nemůžeme spolehnout. A to dokonce ani v případě, že by prohlížeč respektoval pixel jako absolutní jednotku podle W3C nebo jako dip Androidu. A víte co? Není to vlastně ani žádoucí. Je fajn, že si uživatel může webovou stránku v prohlížeči volně zvětšovat a zmenšovat.

Budoucnost patří vektoru

Elegantním řešením by bylo opustit rasterovou grafiku a přejít k vektorům. Nové prohlížeče podporují vektorovou grafiku přímo ve formátu SVG. Než ale SVG převezme své otěže, musí klesnout rozšíření Internet Exploreru ve verzích starších než 9, a to ještě pár let potrvá.

Velkou úlohu při odstraňování rasterové grafiky z webu sehrálo CSS3, které zavádí vymoženosti, jako jsou přechody, kulaté rohy, transformace, průhlednost barvy, stíny, odrazy… S CSS3 se proměnil výrazový sloh vizuálních designérů, kteří opouštějí návrhy vzhledu webů kdysi přehlcených rasterovou grafikou. S pomocí vlastností CSS3 můžeme přečkat těch několik let, než se budeme moci spolehnout na podporu SVG.

Web se sbližuje s PDF

Posledním místem, kde budeme stále spoléhat na rasterovou grafiku, zůstávají fotografie. A tady bychom se měli inspirovat praxí v DTP, kde se důsledně pracuje s rozměry v absolutních jednotkách, tolik nepopulárních u webdesignerů.

Grafický designer v DTP definuje rozměry v milimetrech, centimetrech nebo palcích a předpokládá, že budou na papír převedeny v poměru 1 : 1. U výstupů v PDF určených pro zobrazování na počítačích grafici automaticky předpokládají, že si je budeme zvětšovat a zmenšovat podle potřeby. Tímhle směrem se vydává i webdesign.

Rozměr fotografie nyní uváděný v pixelech už nic neznamená. Nevíte, jestli vašich 960 px (datový pixel) není náhodou u uživatele ve skutečnosti 1920 px (hardwarový pixel). Vzhledem k velikosti hardwarového pixelu ani při dvojnásobném zvětšení nepůsobí fotografie špatně.

Web není fixní médium

Web narozdíl od tisku ale není fixním médiem. Můžeme pro web navrhovat fluidní nebo elastické layouty. Můžeme pracovat s rozměry v intervalu. Absolutní jednotky můžeme kombinovat s násobky velikosti písma, procenty nebo s hodnotou auto. Výsledný vzhled bude vždy záviset na zobrazovacím zařízení a uživatelově volbě.

Kde je v tomhle novém paradigmatu místo pixelu? Zapoměňte na datové (rozlišení fotografie) a hardwarové pixely (rozlišení obrazovky). Přivítejte nový pohled na pixel jakožto refereční jednotku. Nemůžeme se spolehnout na to, že bude mít velikost 1/96 palce podle W3C ani 1/160 palce podle Androidu, protože uživatel si jednoduchým gestem nebo klávesovou zkratkou jeho velikost přizpůsobí svým potřebám. Pokud potřebujete v layoutu pevný bod, obraťte se k absolutním jednotkám a připravte se na jejich zobrazení v poměru. ↩

Pokud chcete vědět více k tomuto tématu, pokračujte čtením článku Scotta Kelluma Pixel Identity Crisis na webu A List Apart.

Č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).

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.

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.

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í. ↩