Zdá se vám, že na některých prohlížečích je vaše pracně vybrané písmo rozmazané nebo dokonce nečitelné? Nebo vám vaši zákazníci či klienti tvrdí, že máte hnusné písmo na stránkách, i když je to písmo vybrané skvělým grafikem?

Námět článku: http://szafranek.net/…/font-smoothing-explained/

Vyhlazení písma

Opomeňme fakt, že i skvělý grafik může vybrat nečitelné písmo, a zaměřme se na to, proč se někdy písmo nezobrazuje tak, jak byste si (vy nebo váš grafik) přáli.

Háček je v tom, že každý (operační) systém má svůj vlastní způsob zobrazování a vyhlazování písma a ani jeden z nich není ani vzdáleně podobný vyhlazování, které používá většina grafiků ve Photoshopu.

Písmo je totiž (v dnešní době) vektorová grafika a tudíž lidově řečeno neobsahuje pixely, které by bylo možno zobrazit, ale pouze instrukce, jak jednotlivá písmena vykreslit a každý systém pak musí použít vlastní metody, jak to provést.

Subpixel rendering

Dnes nejčastěji používanou metodou pro vykreslování textu je tzv. subpixelové vykreslování (česky mezibodové), které využívá konstrukce LCD displejů. Z toho vyplývá, že se dá použít pouze na LCD displejích, které to podporují (což je dnes převážná většina displejů na počítačích a mobilních zařízeních) a proto je také použit jako základ ClearType na Windows a Quartz na MacOS (což jsou podprogramy, které se starají o zobrazení textu).

Tato metoda umožňuje dobře číst i malé texty (kolem 4pt), ale nevýhodou je, že písmo není jednobarevné (černé), ale má zbarvené okraje (většinou zelenomodré nebo žlutohnědé) – hlavně pokud se na něj podíváte z blízka, nebo pokud ho zvětšíte lupou (myšleno programem v počítači).

Jelikož je ClearType i Quartz založen na podvědomém vnímání písmen při čtení textu a navíc každá metoda používá subpixelové renderování odlišně, může se člověku uvyklému jednomu druhu vykreslování zdát, že ten druhý způsob je rozmazaný.

Při porovnání se ClearType jeví méně rozmazaný, ale jsou u něj zřetelnější barevné okraje u delších svislých čar u písmen jako „k“ nebo „M“. Naopak Quartz se snaží zabarvení písmen zbavit, což ale naopak způsobuje menší ostrost u vodorovných čar třeba u „E“ nebo „m“.

Pokud tedy uživateli Windows ukážete stránku na svém iPhonu (nebo naopak), bude vám tvrdit, že je písmo rozmazané, i když vám se zdá perfektně ostré. Nebo, pokud se někdo přímo zaměří na daný text a bude ho zkoumat z větší blízkosti (aby lépe viděl), začne vědomě vnímat ony zbarvené nebo rozostřené okraje a opět bude tvrdit, že text je rozmazaný.

Navíc není tak jednoznačné, jaká metoda bude použita, protože použití výše zmíněných podprogramů není na daných systémech povinné. Například Safari pro Windows používalo Quartz místo ClearType a Firefox většinou používá svojí vlastní metodu (Grayscale), která je odlišná od obou zmíněných.

Antialiasing

Hráčům počítačových her je asi známější Antialiasing, který se používá pro vyhlazení hran 3D objektů – a to je také jeho nevýhoda. Pro písmo totiž není vhodný, protože princip antialiasingu spočívá v rozmazání hran, takže při použití na text se tento pak jeví rozmazaně (hlavně při menších velikostech písma pod 12pt) a u písem pod 8pt se pak text stává nečitelnou šedivou skvrnou.

Tato metoda se většinou nepoužívá pro vykreslování písma, ale na webu se s ní můžete setkat u textu vykresleném nějakou 3D technologií (např. u tzv. 3D-translate hacku), a pak dochází k tomu, že je text rozmazaný.

A co je hlavní problém, Antialiasing je použit jako základ pro vykreslování textu ve Photoshopu, takže pokud vám grafik navrhne web ve Photoshopu a vybere písma, která se podle něj nejlépe vykreslují (díky antialiasingu) a vy následně převedete návrh do praxe, kde se písmo místo Antialiasingu vykresluje pomocí subpixelů, začnou se najednou písmena vykreslovat jinak a co bylo ve Photoshopu pěkně čitelné, je na webu zcela nečitelné (dost často se to projevuje tím, že z „e“ (E) se stane „c“ (C), ze „4“ (čtyřky) se stane „1“ (jednička), apod.):

Zde načtení trvalo čtyři a půl sekundy, ale díky
nevhodnému písmu to není moc zřejmé.

Poznámka: Písma dostupná ve Photoshopu zpravidla nejsou licencována pro použití na webu. Pro výběr písma doporučuji použít Google Fonts, která jsou všechna zdarma pro použití na webu.

Rastrové písmo

Třetím způsobem vykreslování písma, se kterým se ještě můžete setkat (ale postupně snad bude ustupovat) je vykreslování bez vyhlazení.

Tento způsob se používal na starých systémech (např. DOS a Windows 9x) a dnes se s ním můžete ještě setkat na některých počítačích s Windows XP, protože ty sice již obsahují ClearType, ale není po instalaci zapnutý a zapnout ho musí buď nějaký program (např. ovladač grafické karty) nebo uživatel ručně z Ovládacích panelů (což většina uživatelů neví). Ve Windows Vista je naopak možnost ClearType vypnout (např. v případě, že dělá problém se starší grafickou kartou) nebo přepnout na AntiAliasing.

Stejně tak ho najdete tam, kde není použit LCD display (např. velké obrazovky na budovách, promítačky, staré CRT monitory, atd.). A samozřejmě některé formáty písma podporují místo vektorových písmena rastrová, na která metody jako ClearType a Quartz nefungují (zatímco Antialiasing se na ně použít dá).

Takové písmo se pak jeví jako hranaté nebo hrbolaté, protože se vykreslují pouze základní pixely bez jakéhokoliv doplňování mezer. A pokud má některé písmeno příliš slabé čárky, může se stát, že se daná část buď nevykreslí (nevejde se do pixelu) nebo se naopak více čar sleje dohromady (protože se zobrazí na několika sousedících pixelech). Snadno se tak z „n“ (N) může stát „r“ (R), protože pravá nožička byla příliš slabá a nevykreslila se, nebo se „u“ (U) a „v“ (V) vykreslí stejně, protože prostě nemáte dostatek pixelů na jejich odlišení.

Retina

Metodou budoucnosti jsou pak jednoznačně tzv. retina, neboli UHD displeje, které lidově řečeno mají až přehnaně vysoké rozlišení a díky tomu mohou zobrazit více, než je člověk schopen vnímat. Řečeno odborně jsou to displeje s rozlišením větším než 400ppi (DPR 4 a více).

Pak odpadá problém s barevností nebo rozmazaností vykreslení, protože tam kde se u klasických a HD displejů využívali subpixely, tak na retina/UHD se již dají použít plnohodnotné pixely schopné zobrazit přesně danou barvu.

Co tedy dělat a nedělat?

I když by to bylo svádějící, nespoléhejte se na retina displeje, kde se vše vykresluje bez problémů. Stále ještě je dost displejů, které jsou odkázány na subpixely nebo holé rastry.

Základním pravidlem je nepoužívat pro návrh webu Photoshop; ale pokud už musíte Photoshop použít, vypněte alespoň vyhlazování pomocí Antialiasingu a použijte nějakou jinou metodu (např. Windows LCD nebo Smooth).

Písma používejte z Google Fonts nebo podobných zdrojů webových písem (web fonts), kde jsou písma ověřena a měla by být bez problémů čitelná na všech způsobech vykreslování.

Rozhodně nepoužívejte tzv. ClearType písma jako je Constantia, Corbel, Calibri či Consolas, protože ta jsou určena pouze pro Windows a na systémech bez ClearType jsou zcela nečitelná (sice se zobrazí, ale nevyhlazují se správně a písmena se rozmazávají).

Úplně nejlepší je pak používat základní písma jako Arial, Georgia, Times New Roman, Courier New či Verdana, z nichž ta poslední vypadá nejlépe a je také podporována na většině systémů. Tato písma jsou navržena tak, aby byla dobře čitelná při všech způsobech vykreslování (antialiasing, subpixely, rastrování).

Pokud používáte nestandardní písmo, snažte se vyhýbat příliš malým velikostem (pod 10pt), která jsou špatně čitelná v antialiasingu a také příliš velkým písmenům (nad 16pt), která naopak budou vypadat hranatě při rastrovém vykreslování.

Určitě byste měli ověřit, jak se bude písmo chovat při rastrovém vykreslení, což můžete udělat ve Photoshopu (Smoothing: None) nebo v prohlížeči Chrome (nebo Opera 15+):

* {
    /* vypne vyhlazování písma*/
    -webkit-font-smoothing: none;
}

Problém taky dělá Firefox, který někdy používá vlastní metodu „grayscale“ (založenou na Antialiasing) místo výchozí ClearType nebo Quartz. Naštěstí lze tato metoda vynutit a zkontrolovat, jak bude daný text vypadat:

* {
    /* vynutí nesystémové vyhlazování */
    -moz-osx-font-smoothing: grayscale;
}

Nenechte se zmást výrazem „osx“ v názvu, funguje i na ostatních systémech. Pokud vám ale nefunguje přes CSS, musíte ji zapnout v konfiguraci Firefoxu (do adresy zadejte „about:config“ a najděte „layout.css.osx-font-smoothing.enabled“).

V některých návodech můžete najít, že výše uvedené CSS definice byste měli používat na stránkách, aby písmo vypadalo dobře, ale problém je, že fungují jen v konkrétních prohlížečích a navíc využívají antialiasing, který, jak jsem již uvedl, není vhodný pro delší texty, protože sice vypadá dobře z blízka, ale špatně se čte. Snažte se tedy používat písma zodpovědně místo spoléhání se na nestandardní definice.