Typografie v prostředí webu je ze svého historického principu velice omezená, ale o to více důležitá! Poskytuje se přece primárně textový obsah. Současné trendy ve webdesignu a tím i v typografii na webu stále více vyžadují odlišení se od strohosti standardních a okoukaných „webových“ písem. Proto se již mnoho let řeší různé způsoby náhrad textů za jiné grafické elementy, které obsahují kýžený font. V tomto článku se budu zabývat dynamickými náhradami textů zejména v nadpisech, kde to má své opodstatnění.
Standardními webovými písmy uvažujeme ta (nebo jejich varianty), která jsou dostupná na každém počítači nezávisle na platformě nebo operačním systému. Používáme je k zobrazení zejména hlavního obsahu webu. Pro sazbu webů se nejčastěji používají lehce a dobře čitelné grotesky (bezpatková písma), které lze výborně číst i bez zapnutého antialisingu (vyhlazení hran). Grotesky zastupují tyto písmové rodiny: Arial, Verdana, Tahoma, Trebuchet MS. Klasické antikvy (patková písma) jsou zastoupena rodinami Times New Roman a Georgia. Základní balík písem doplňuje neproporcionální courier a bláznivý Comic Sans MS.
Jakákoliv jiná písma jsou považovány za nestandardní, a tedy se s velkou pravděpodobností široké internetové veřejnosti nezobrazí – budou nahrazena právě výše vyjmenovanými standardy. Pro zobrazení právě těchto nestandardních písem se používá několik technik využívající CSS, JS, Flash a případně PHP. V následujícím textu uvedu zástupce nejrozšířenějších a nejpoužívanějších technik a způsobů dynamické náhrady textů na webu. Všechny níže popsané techniky vyjma @font-face jsou určeny téměř výhradně pro náhrady krátkých textů – typicky nadpisů a různých záhlaví bloků.
Náhrady (X)HTML elementů
sIFR 2.0
Tato technika je zřejmě nejrozšířenější a nejspolehlivější. Využívá kombinaci CSS, javasciptu a flashe. Jako první se načte vlastní stránka, poté dojde k detekci přítomnosti flashe pomocí JS. Pokud je zapnutá podpora JS a flashe, dojde k náhradě zvolených elementů SWF objektem s písmem. V jakémkoliv jiném případě se zobrazí původní prostý text.
Výhody:
- jednoduchá implementace,
- spolehlivost,
- malá velikost souborů,
- přístupnost pro čtečky obrazovek a vyhledávače
Nevýhody:
- nutnost mít instalovanou aplikaci umožňující vytvoření SWF souboru s písmem
- nelze použít na delší bloky textu
Kompatibilita: Windows, MAC a Linux s podporou flashe a javasciptu, IE5+, Firefox, Safari, Opera 7+, Google Chrome Oficiální stránky: http://www.mikeindustries.com/blog/sifr/
Cufón
Poměrně mladé řešení, které by mohlo být důstojnou alternativou k sIFR. Sestává se ze dvou částí – generátoru fontu a vlastního JS enginu pro náhradu a zobrazení. V první fázi necháme vygenerovat písmo do formátů VML a SVG. Následně implenetujeme obslužné soubory a nastavíme formátování. Valstní rendering písma je prováděn náhradou elementů za HTML5 canvas (prohlížeče s jádrem Mizolla/Gecko) nebo VML (Kicrosoft). Osobně je mým favoritem.
Výhody:
- moderní a rychlé renderování písem
- flexibilita
- nezávislost na řešení třetí strany (při generování písem)
Nevýhody:
- peklo při stylování v EI6+7 (různé chování marginů a paddingů – Quirks mode)
- není viditelné označení textů (text je ve skutečnosti označen a lez jej zkopírovat)
- nelze použít na delší bloky textu
- nutnost vlastnictví licence písma pro web embeding
Kompatibilita: Internet Explorer 6-8, Mozilla Firefox 1.5+, Safari 3+, Opera 9.5+, Google Chrome 1.0+ Oficiální stránky: http://cufon.shoqolate.com/generate/
P+C DTR
Metoda vyhužívající generování obrázků na straně serveru pomocí PHP a náhrad v (X)HTML pomocí JS. Projekt je ve fázi prvního experimentálního vydání.
Výhody:
- řešení využívající PHP
- zobrazí se i bez podpory flashe
Nevýhody:
- přístupnost (z obrázku si text nevykopírujete)
- nezvládá zalomění dlouhých textů
- na jednom webu lze mít pouze jeden typ nadpisů
- nemožnot cložení ID nebo CLASS nadpisům
Kompatibilita: Internet Explorer 6+, Mozilla Firefox 1.5+, Safari 3+, Opera 9.5+, Google Chrome 1.0+ Oficiální stránky: http://artypapers.com/csshelppile/pcdtr/
Další systémy využívající PHP
Další systémy využívající Flash
Systémy bez Flashe a PHP
Jednoduše a funkčně pomocí CSS2 @font-face
V předešlém textu jsem popsal základní chování náhrad nadpisů apod. za flash objekty, obrázky nebo v lepším případě za renderované vektorové objekty. Existuje však i snazší cesta, a to zobrazení textu ve zvoleném písmu. Text se tedy zobrazuje přímo v definovaném písmu a není nijak nahrazován. Pro korektní zobrazení zvoleného písma je zapotřebí vlastnit soubory s písmy ve formátu TTF nebo OTF a mít moderní prohlížeč (FF3.5+, Google Chrome 3+, Safari 3.1+) anebo mít písma ve formátu EOT (IE4+).
Dvojí verze soborů s písmy je nezbytná pro zobrazení v IE, protože právě Microsoft zavedl jako svůj standard formát EOT. Rozšíření tohoto standardu bránily nejasné licenční podmínky pro použití fontů na webu a podpora národních jazykových sad. Proto je v CSS definici je nutné nejdříve uvést EOT soubor, který lze jednoduše konvertovat z TTF nebo OTF několika nástroji: Font Squirrel nebo Online font converter.
Výhody:
- proprietální řešení na úrovni standardu CSS2, dnes již bezproblémově podprováno
- bezproblémová a rychlá implementace
- jednoduché definování a písem v CSS
- pokud prohlížeč písmo nepodporuje, zobrazí se běžné písmo
- není vyžadována podpora flashe, javascriptu
Nevýhody:
- nutnost vygenerovat dva písmové soubory
- není podporováno staršími porhlížeči (zejména EI6)
- nutnost licence pro web embeding
Zdrojový kód:
@font-face {
font-family: 'blok-regular';
src: url('type/Blokletters-Potlood.eot');
src: local('Blokletters Potlood Potlood'),
local('Blokletters-Potlood'),
url('type/Blokletters-Potlood.ttf') format('truetype');
}
@font-face {
font-family: 'blok-italic';
src: url('type/Blokletters-Balpen.eot');
src: local('Blokletters Balpen Balpen'),
local('Blokletters-Balpen'),
url('type/Blokletters-Balpen.ttf') format('truetype');
}
@font-face {
font-family: 'blok-heavy';
src: url('type/Blokletters-Viltstift.eot');
src: local('Blokletters Viltstift Viltstift'),
local('Blokletters-Viltstift'),
url('type/Blokletters-Viltstift.ttf') format('truetype');
}
h1 {
font-family: blok-heavy, helvetica, arial;
}
Závěrem
Potřebujete-li robrazovat nestandardní písma na všech platformách a verzích prohlížečů včetně již zastaralých – pak je správnou volbou sIFR. Moderní alternatviou je potom Cufón. A striktně netrváte na zobrazení nestandardního písma ve starších prohlížečích, směle použijte @font-face.
