Webdesignérův průvodce po CSS3: typografie

Typografie dlouho nebyla doménou webových grafiků. Proč také, stejně si nemohli vybrat písmo jaké chtěli a ovlivnit jeho vykreslování. Doba se ale mění…

@font-face

CSS3 znovu zavádí podporu pro používání vlastního písma (poprvé se objevila v CSS2, v 2.1 byla však zase vypuštěna). Teoreticky to funguje poměrně prostě – necháte prohlížeč stáhnout soubor písma a můžete jej používat.

Prakticky tam je několik problémů, zmiňme tři: podpora v prohlížečích, vykreslování písem na obrazovce a starosti písmolijen, aby nedopadly jako hudební průmysl.

Podpora v prohlížečích

Problém s podporou v prohlížečích umíme celkem dobře řešit – přišlo se na to, že je potřeba dát prohlížečům více typů souborů, aby si mohly vybrat ten, který podporují. Tímto způsobem umíme zajistit podporu napříč prohlížeči. Samozřejmě pak lze udělat ještě mnoho různých vylomenin, jak načíst písmo co nejrychleji atd. Ale jak si ukážeme za chvilku, pro praxi nemusíte vědět přesný technický postup krok za krokem. Případní zájemci o detailní vysvětlení si ovšem samozřejmě mohou prohlédnout autorovu prezentaci z loňského WebExpa na toto téma.

Vykreslování písma

Problém s vykreslením písma na obrazovce je to, na co se odvolává mnoho lidí jako na důvod, proč zatím @font-face nepoužívat. A poměrně oprávněně.

Každý operační systém má svůj engine pro vykreslování písma. A často jich má hned několik a je na konkrétním programu, který si vybere. Vykreslení písma na obrazovce ovlivňuje hned několik faktorů, výrazně pak hinting a anti-aliasing. Ostatně podívejte se sami, jak velké rozdíly ve vykreslování existují.

Jak z toho ven zatím nikdo neví, písmolijny vylepšují hinting co to jde (což písmo na obrazovce skutečně výrazně vylepší), ale jde o náročný a zdlouhavý proces, který je jenom částí řešení problému. Ideální by bylo, kdyby se tvůrci operačních systémů shodli na jednom enginu pro vykreslování písma. Ale to nevypadá jako reálná možnost.

Zní to celé trošku pesimisticky. Pokud se ale podíváte na data, tak se ukáže, že hodně uživatelů uvidí písma vykreslena poměrně hezky. Sice mírně odlišně, ale hezky. Platí, že čím novější operační systém, tím je situace lepší. Na vašem zvážení pak je, zda @font-face použít, či ne.

Problémy s licencemi

Základní věc, kterou musíte vědět je, že pokud máte písmo ve svém počítači, tak ho prostě nemůžete jen tak použít na webu pomocí @font-face. Takové písmo by bylo stažitelné a písmolijny se bojí, že by se fonty ve velkém nelegálně sdílely a ony by přišly o zisky.

Je tedy potřeba najít písmo, které v licenčním ujednání umožňuje použití @font-face. Mnoho je jich zdarma, ještě více pak placených (většinou pomocí speciální licence pro použití na webu).

Pokud máte písmo, které chcete použít na webu (a nebo hledáte písmo zdarma), zapamatujte si web FontSquirrel.com. Najdete na něm fonty zdarma, které umožňují použití s @font-face vygenerované ve všech potřebných formátech i s návodem, jak to celé použít. A také, pokud máte svůj font odjinud, naleznete zde generátor, který z vašeho souboru písma vygeneruje další potřebné soubory a opět vám dodá i návod, jak to použít.

Pořád je tu ale problém s tím, že placená písma písmolijny většinou nechtějí dávat na web jen tak. A tady nastupují služby jako Typekit. Fungují prostě – platíte měsíčně/ročně nějakou částku, ony vám písma hostují a vy ve vašem kódu už řešíte jen to, kde dané písmo použít. Nutno dodat, že občas je problém s tím, že vybrané písmo nepodporuje české znaky. Ale jinak by to nemohlo být jednodušší.

Další typografická vylepšení

CSS3 se ve své specifikaci CSS Text Level 3 snaží řešit i na začátku předestřené problémy jako je zarovnání do bloku…

V podstatě se snaží přinést do prohlížeče tu úroveň automatického rozložení písma, jako známe z těch nejlepších textových editorů. V budoucnu nás může tedy čekat to, že prohlížeče budou umět automaticky rozdělovat slova na dva řádky, budeme moci nastavovat barvu a styl podtržení písma a mnoho dalších věcí, ze kterých by měli typografové jistě radost. Bohužel podpora v prohlížečích zatím prakticky neexistuje a specifikace stále prochází výraznými změnami. Je to ale něco, na co se časem určitě můžeme těšit.

Je potřeba se začít zabývat typografií

Se stále se zlepšujícími prohlížeči a tím pádem i možnostmi webdesignérů přichází stále větší zodpovědnost. Rozumět typografii začíná být naprosto nutné, protože výběr dobrého písma může celý web výrazně vylepšit (a špatného samozřejmě zničit).

Jak dál se seriálem o CSS3

V zásadě jsem pokryl to, co jsem chtěl v seriálu primárně pokrýt. CSS3 je ovšem mnohem větší a dalo by se napsat mnoho dalších článků. Pokud si přejete něco konkrétního, podělte se prosím o námět v komentářích. Teď bude ale rozhodně následovat v seriálu delší pauza.