Web design je především typografie. Tečka. Uživatel většinu svého času, který na stránce tráví, čte právě text. Informace na webu jsou totiž z 95% prezentovány právě psaným textem. Lví podíl na úspěchu společnosti Google má minimalistický design. Jeho základem je text použitý v typograficky čistém uživatelském rozhraní. V článku si ukážeme, jak zajistit, že bude písmo použito stejně spolehlivě jako například obrázek ve formátu PNG.
Písma na webu
Máme k dispozici šest formátů písem, které na webu můžeme použít. Prvním z nich je TrueDoc, který používal Netscape Navigator 4. Druhý je Embedded OpenType, podporovaný Internet Explorerem od čtvrté verze. Výrobci prohlížečů Mozilla a Opera zvolili formáty TrueType a OpenType. Vlastní ambice na poli písem měl i formát SVG. Naštěstí se Mozilla, Opera a Microsoft dohodli a v lednu 2010 podali W3C specifikaci nového formátu Web Open Font Format.
Protože WOFF zatím ještě nepodporují všechny prohlížeče, je nezbytné převést písmo i do jiných formátů. K tomu lze využít webovou aplikaci @font-face Generator. Nejen že konvertuje písmo do všech možných formátů, ale doplní i příklad použití. Navíc zařídí, že je písmo ve formátu Embedded OpenType použitelné na libovolné doméně. Formát je totiž navržený tak, aby někdo nemohl snadno použít písmo na jiném webu, než pro který je licencováno. Proto písma vytvořená tímto generátorem nefungují, pokud je stránka otevřena z místního souborového systému (file:///).
Jak na to?
Řekněme, že chceme na svém webu použít například nové písmo Ubuntu. Necháme si zkonvertovat příslušné soubory Ubuntu-R.ttf , Ubuntu-B.ttf a Ubuntu-I.ttf. Vygenerované CSS ve výchozím nastavení vypadá následovně:
@font-face {
font-family: 'UbuntuRegular';
src: url('ubuntu-r-webfont.eot');
src: local('☺'), url('ubuntu-r-webfont.woff') format('woff'), url('ubuntu-r-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'UbuntuItalic';
src: url('ubuntu-i-webfont.eot');
src: local('☺'), url('ubuntu-i-webfont.woff') format('woff'), url('ubuntu-i-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'UbuntuBold';
src: url('ubuntu-b-webfont.eot');
src: local('☺'), url('ubuntu-b-webfont.woff') format('woff'), url('ubuntu-b-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}Syntaxe direktivy @font-face je jednoduchá. Obsahuje dva povinné údaje:
font-family– název, pod jakým bude písmo dostupnésrc– odkaz na URI písma Kromě těchto údajů může obsahovat i informace o stylu písma (font-weight, font-style či font-variant). Můžeme tak různé zdrojové soubory soustředit pod jeden společný název a odkazovat na něj standardním způsobem.
Všimněte si, že vlastnost src je uvedena dvakrát. Poprvé pro Internet Explorer, který nebere v potaz druhý výskyt, protože nezná parametr format. Hodnota je pro něj neplatná a použije se ta první. Ostatní prohlížeče rozumí druhému zápisu, proto hodnota src v druhém výskytu přepíše tu první. Parametr local má nesmyslnou hodnotu, jelikož je její interpretace ve Webkitu a OS X nepříliš dobře implementována.
Někomu se tento kód nemusí líbit, protože se podobá praktikám CSS hacků. Tomu, kdo je používal, způsobily jistě mnoho problémů. Alternativní řešení je udělat větvení na jednotlivé soubory o úroveň výš. Proti tomu lze ale namítnout, že se zavádí rozdílné rodiny písma nikoli na základě vzhledu, ale na souborovém formátu. Jiný způsob zápisu může vypadat například takto:
/* Web Open Font Format */
@font-face {
font-family: Ubuntu WOFF;
src: url(Ubuntu-R.woff);
}
@font-face {
font-family: Ubuntu WOFF;
src: url(Ubuntu-I.woff);
font-style: italic;
}
@font-face {
font-family: Ubuntu WOFF;
src: url(Ubuntu-B.woff);
font-weight: bold;
}
/* Embedded OpenType */
@font-face {
font-family: Ubuntu EOT;
src: url(Ubuntu-R.eot);
}
@font-face {
font-family: Ubuntu EOT;
src: url(Ubuntu-B.eot);
font-weight: bold;
}
@font-face {
font-family: Ubuntu EOT;
src: url(Ubuntu-I.eot);
font-style: italic;
}
/* TrueType */
@font-face {
font-family: Ubuntu TTF;
src: url(Ubuntu-R.ttf);
}
@font-face {
font-family: Ubuntu TTF;
src: url(Ubuntu-I.ttf);
font-style: italic;
}
@font-face {
font-family: Ubuntu TTF;
src: url(Ubuntu-B.ttf);
font-weight: bold;
}
body {
font-family: Ubuntu WOFF, Ubuntu EOF, Ubuntu TTF;
}CSS pro element body říká prohlížeči, aby zkoušel jednotlivé formáty a použil první podporovaný. Písma se stahují postupně, takže moderní prohlížeče stáhnou jen sadu ve formátu WOFF.
Co lze ovšem velmi doporučit, je seskupení všech řezů písma pod jeden název. Rodina písma je pak uvedena třikrát vždy s konkrétním řezem písma. Dá se toho docílit také patřičným nastavením generátoru. Neméně důležité je nastavit (možnost subsetting), aby se do písma zahrnuly jen ty znaky, které na webu skutečně využijeme. Dané písmo pak nebude tak veliké a uživatelům se stránka načte o něco dříve.
Seskupení písem pod jeden název s různými vlastnostmi bude vypadat takto:
@font-face {
font-family: 'Ubuntu';
src: url('Ubuntu-R-webfont.eot');
src: local('☺'), url('Ubuntu-R-webfont.woff') format('woff'), url('Ubuntu-R-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Ubuntu';
src: url('Ubuntu-I-webfont.eot');
src: local('☺'), url('Ubuntu-I-webfont.woff') format('woff'), url('Ubuntu-I-webfont.ttf') format('truetype');
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: 'Ubuntu';
src: url('Ubuntu-B-webfont.eot');
src: local('☺'), url('Ubuntu-B-webfont.woff') format('woff'), url('Ubuntu-B-webfont.ttf') format('truetype');
font-weight: bold;
font-style: normal;
}S takovouto definicí lze pak písma používat stejným způsobem jako systémová, tj. využívat všech výhod kaskádování. Můžete si např. nastavit rodinu písma pro element p a díky jednotnému jménu dokáže prohlížeč správně naložit s tagy jako i či strong, které mění výchozí vlastnosti písma.
Závěrem
Pro prohlížeče, které ještě neznají WOFF, neexistuje stoprocentně správný a univerzální zápis CSS. Kodér musí na základě svých zkušeností docílit toho, aby si každý prohlížeč stáhl písmo ve formátu, který nejlépe podporuje. Je tedy na vás, jaký zápis CSS si zvolíte a jak ho upravíte, aby byl na vašem webu účelný.
Web Open Font Format je snad nejrychleji implementovaná specifikace. V této chvíli (listopad 2010) ji podporuje už Internet Explorer, Firefox a Chrome. Rozhodně tedy neuděláme chybu, když do budoucna vsadíme právě na tento formát. Naneštěstí iPhone a iPad podporují jen formát SVG. Jeho použití pro písmo však není příliš vhodné. Chybí mu totiž jedna zásadní dovednost – vyrovnání mezer mezi písmeny. Internet Explorer 8 a starší rozumí jen formátu Embedded OpenType. Naproti tomu TrueType funguje v prohlížečích Firefox, Chrome, Opera a Safari.
Typografie ale nespočívá jen ve správné volbě písma. Důležité je také používat správné znaky. Vědět, že se spojovník liší od pomlčky a neplést si palce s uvozovkami. Dávno už nejsme omezeni počtem kláves či kódováním ASCII. Neméně podstatné je také zamyslet se nad využitím možnosti dělení slov v HTML v úzkých sloupcích textu.
Článek byl sepsán pro Zdroják.