Přejít k navigační liště

Zdroják » Webdesign » Webdesignérův průvodce po CSS3: typografie

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

Články Webdesign

Jestli se web něčím odlišuje od tištěných médií, tak je to velmi složitá kontrola vzhledu písma a textu. Weboví grafici ví, že používat zarovnání do bloku je neskutečně špatný nápad, že by měli by používat jen tzv. bezpečné fonty (které se vyskytují na většině počítačů) a že každý operační systém (a často i prohlížeč) si vykreslí písmo trošku jinak. CSS3 se snaží tyto problémy řešit, pojďme se podívat, jak se mu to daří.

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.

Komentáře

Subscribe
Upozornit na
guest
11 Komentářů
Nejstarší
Nejnovější Most Voted
Inline Feedbacks
View all comments
hm
Josef Richter

Tohle je další tragédie v podání Microsoftu. Jejich zrůdná filozofie „trošku do toho písma šáhneme, aby bylo čitelnější“ (velmi zjednodušeně řečeno) vede často ke katastrofálním výsledkům — takovým, že některá písma jsou ve Win browserech prostě zcela nepoužitelná.

Obávám se, že tohle se vyřeší až nástupem displejů s vysokým PPI (první vlaštovka je iPhone Retina display), což je záležitost příštích cca 3—10 let. Nevěřím, že si do té doby Microsoft uvědomí a akceptuje, že dělají něco špatně, natož aby s tím něco udělali.

PMD

Rozdíly ve vykreslování jsou podružnost. Design by s tím měl počítat. Největší problém mám s tím, že skoro žádné free fonty nepodporují české znaky a ty komerční jsou často k dispozici pouze přes fontkit a ekvivalenty, u kterých se mi opět nedaří rozjet čeština. Anebo jsou neuvěřitelně drahé.
Fontkit a spol. mi obecně přijde jako špatné řešení – spoléhat se na to, že někomu bude (rychle) fungovat server, aby se mi nerozpadl layout? Omezení počtem zobrazení? No nevím, ale jestli je tohle budoucnost…

Josef Richter

To není podružnost, ale naprosto zásadní věc. Ale souhlasím, že design by s tím měl počítat — jenže výsledkem je, že spousta těch fontů je na Win nepoužitelných.

Kvalitních fontů s podporou českých znaků, které by byly bezplatné, je skutečně velmi málo. A má to svou logiku — design novýho písma je práce, vyžadující mimořádné znalosti, zkušenosti a tisíce hodin práce. To není jako práce s buzolou. A to většinou nebývá zadarmo.

Fontkit (předpokládám, že myslíš Typekit) je první řešení, který uspokojivě masově funguje. Spoléhat na cizí server není nic špatnýho — to děláme všichni denně. Nebo ty snad hostuješ na vlastním železe? Stejně tak běžně linkujeme jQuery apod. z CDN. U fontů je to navíc s minimálním rizikem, protože pokud ten server bude down, tak se web zobrazí fontem, kterej má uživatel v počítači a rozpad layoutu téměř nehrozí.

Jo a hostované fonty jsou naopak velmi levné. Běžná cena „tradičního“ fontu, kterej si můžeš nainstalovat na počítač (tj. OTF soubor) je cca 30-60 USD za jeden řez. Typekit naprosti tomu stojí 50 USD ročně a máš přístup ke stovkám kvalitních fontů. Počet zobrazení je skutečně omezen — 500 tisíc zobrazení měsíčně. Kolik webů s více než 500 tisíc návštěv měsíčně máš? Navíc Typekit nabízí i bezplatný účet, umožňující vybrat si 2 fonty, s limitem zobrazení 25 tisíc měsíčně. Pak jsou tady další služby jako Fontdeck, který mají zase jiný cenový modely, ale taky jsou hodně levný — těch služeb fungujících podobně jako Typekit už existuje asi 20.

PMD

Ano, myslím Typekit, pardon, a souhlasím s tím, že to funguje a někomu to může vyhovovat. Nesouhlasím ovšem se zbytkem věty. JQ sice linkujeme z CDN, ale s fallbackem na vlastní server. Naproti tomu fallback z nějaké extra zúžené gotiky na boldový Arial nepřichází v úvahu ani teoreticky.
A co s tou češtinou? S Typekitem jsem si chvíli hrál a čeština mi prostě nefungovala, nehledě na to, že opravdu dobré fonty jako Comenia Sans nelze vyzkoušet zdarma, musí se koupit Full Library access. Snad jsem jenom něco podstatného přehlédl.

Josef Richter

Samozřejmě tomu musím věnovat pozornost a fallovat na fonty zhruba podobných proporcí, ale samozřejmě nikdy to nebude perfektní. Nicméně vzhledem k tomu, že server uptime má u takové služby kritickou důležitost, tak si myslím, že tomu věnujou mimořádnou pozornost a mají to důkladně ošetřený. Tohohle se nebojím.

Čeština v TypeKitu funguje bezproblémově – nornálně si v tom Kit Editoru zvolíš jako subset „all characters“ a je to. Jediná nevýhoda je, že zatím není možnost přesnější specifikace jakou množinu znaků chci, takže ten set „all characters“ bývá u některých fontů výrazně větší, než základní set. Viz screenshot nastavení: http://snapplr.com/039n

To že písma rozšířené knihovny nejdou vyzkoušet zdarma je prostě politika Typekitu a taky ji úplně nechápu. Ale je dost možný, že některý písmolijny si to prostě nepřejou – oni jsou obecně VELMI citliví na jakýkoliv riziko zneužití a pirátství. Osobně bych řekl, že každej profesionální webdesigner si tu plnou knihovnu na Typekitu koupí, protože to je sázka na jistotu – skvělej poměr cena/výkon. Nicméně není tady jen Typkit, těch služeb je asi 20, namátkou fontdeck.com, webink.com, fontslive.com, fontfont.com, fontshop.com, webfonts.fonts.com a ještě pár dalších. Třeba na Fontdecku se dá vyzkoušet každej font a dá se koupit licence jen na jeden font.

Jakub Stacho

Pro detekci font-smoothingu doporučuji kouknout na TypeHelpers.js. Pomocí JavaScriptu pak lze zjistit, jestli je vyhlazování písem zapnuto nebo vypnuto a podle toho prohlížeči třeba podstrčit CSS s alternativním fontem.

PeterKahoun

No jenže jak naznačuje Honza Sládek, vyhlazování nemá jen dvě možnosti (ale tři). A to je myslím kámen úrazu tohoto skriptu – neměl jsem čas si s ním hrát moc dlouho, ale neumí tuším rozlišovat ClearType a „Standardní“ vyhlazování Windows. (Což je zásadní, pokud není předmětem zájmu výhradně písmo např. pro nadpisy.)

klusik

… ale k čemu to je, když vidím, jak lidi kolem mě dokáží napsat v jedné řádce 5 chyb, protože mi napíší, že se „viděli s 8mi lidmi ve 14:30“ a podobné hrůznosti.

Dokud lidé nebudou chtít psát správně, jakékoliv snahy o tohle jsou (dle mého) značně zbytečné. Ale je dobré, na druhou stranu, si připravit „podhoubí“, až jim to jedno nebude ;)

jira

Vážení,

mezititulek „legální problémy“ je významově nesmyslný. Přídavné jméno „legální“ má v češtině význam „zákonný“, „v souladu se zákonem“ atd.
Normálně česky by ten titulek mohl znít například „Právní stránka“.

Martin Malý

Máte pravdu, díky za upozornění.

Enum a statická analýza kódu

Mám jednu univerzální radu pro začínající programátorty. V učení sice neexistují rychlé zkratky, ovšem tuhle radu můžete snadno začít používat a zrychlit tak tempo učení. Tou tajemnou ingrediencí je statická analýza kódu. Ukážeme si to na příkladu enum.