Fonty - sumář, časté chyby

Stručný sumář

Alfou a omegou internetové typografie jsou řezy Arial (či Helvetica), Courier a Times, které se vyskytují snad na všech platformách, mnohdy jako základní fonty. Jejich nadužíváním však nevyhnutelně došlo k tomu, že zejména Arial a Times působí dosti fádně. Z tohoto důvodu přichází ke slovu alternativní, elegantnější rodiny písem. Zde je malý přehled řezů a jejich definicí.

ŘezDefinice
Arialfont-family: sans-serif;
Courierfont-family: monospace;
Georgiafont-family: Georgia, "New York CE", utopia, sans-serif;
Lucida Consolefont-family: "Lucida Console", "Monaco CE", fixed, monospace;
Palatino Linotypefont-family: "Palatino Linotype", "New York CE", utopia, serif;
Tahomafont-family: Tahoma, "Lucida Grande CE", lucida, sans-serif;
Timesfont-family: serif;
Trebuchet MSfont-family: "Trebuchet MS", "Geneva CE", lucida, sans-serif;
Verdanafont-family: Verdana, "Geneva CE", lucida, sans-serif;

Nejčastější chyby

Neúplná definice řezu písma

Prohlédněte si následující zápis:

p { font-family: "Trebuchet MS", Tahoma, "Geneva CE", lucida; }

Zdá se Vám zcela v pořádku? Neměl by. Tváří se sice poměrně nevinně, pro každý odstavec v dokumentu bude použit řez Trebuchet MS, není-li v systému přítomen, alternuje Tahoma, pro Mac OS definici jistíme Genevou a linux si přijde na své s lucidou. Chybí však to úplně nejpodstatnější – obecná rodina fontů.

Pamatujte si, že můžete klidně zapomenout na uživatele libovolného operačního systému, můžete je i cíleně ignorovat, ale nikdy si nemůžete odpustit zápis generické (obecné) rodiny toho kterého fontu. Správný zápis je tedy:

p { font-family: "Trebuchet MS", Tahoma, "Geneva CE", lucida, sans-serif; }

Nadužívání různých řezů

Podívejte se na toto:

p { font-family: sans-serif; }
span { font-family: "Palatino Linotype", serif; }
h2 { font-family: monospace; }
li { font-family: Georgia, serif; }

Tato definice je technicky veskrze správná, porušuje však jedno z nejdůležitějších typografických pravidel. Míchá v jednom dokumentu čtyři různé řezy písma. To je hrubá chyba.

Více různých řezů v jednom dokumentu totiž:

Obecně se uvádí, že ideální počet písem na jednu stránku jsou dvě. Obvykle pak jeden typ pro nadpisy, druhý pro samotný text. Z vlastní zkušenosti vím, že je-li text správně strukturován, není problém do stránky začlenit tři různé řezy. Platí to však pouze na robustnějších webech s precizním layoutem, vyžaduje to dost šikovnosti a citu pro detail.

Používání netradičních fontů

Kód mluví sám za sebe:

font-family: Keypunch, sans-serif;

Rodina fontů Keypunch opravdu existuje, ale přesto je naivní si myslet, že ji bude mít rozumné procento uživatelů ve svém systému přítomnu. Operujte jen s takovými řezy, u kterých máte jistotu, že se vykreslí správně. Existují sice metody, kterak ponouknout uživatelův prohlížeč ke stažení žádaného fontu, ale ty se v praxi používají zcela minimálně. Namísto nich raději weboví tvůrci sáhnout k náhradě takového textu obrázkem, chtějí-li mermomocí daný font použít.

Chybějící uvozovky

Ano, chybějící uvozovky jsou opravdu kapitola sama pro sebe. Nebudu se Vám snažit namluvit, že to bez nich nefunguje. Funguje. Je to ale, pregnantně řečeno, pěkná prasárna. Takže vždycky pišme kód takhle:

p { font-family: "Trebuchet MS", "Geneva CE", lucida, sans-serif; }

V další kapitole si ukážeme, kterak můžeme definovat font pomocí CSS.