Jaký font je vhodné zvolit na web?

Dobrá otázka. Položte si ji ale prosím ještě předtím, než začnete navrhovat samotný design webu, abyste poté nemuseli  naprosto zbytečně předělávat styly. Tento článek píši jako ponaučení pro ty, kteří by snad udělali stejnou chybu jako já, nebo jednoduše neví, jaký typ textu zvolit ;-).

Pakliže pro web najdete skvělý font, který perfektně zapadá do navrženého prostředí, nemáte ještě zdaleka vyhráno. V neposlední (a vlastně skoro v první) řadě musíte totiž také myslet na uživatele, kteří daný font nemusí mít nainstalovaný v počítači (a že jich může být překvapivě hodně). Proč? Protože pokud si v CSS stylu nastavíte primární font, a poté sekundární (nebo v nejhorším případě žádný), nemusí se logicky vždy velikost písma sekundárního shodovat s tím primárním. To má za následek obrovské/miniaturní texty, které nemusí být k přečtení/koukání a totálně rozhodí šablonu webu. Pokud si sekundární font nenastavíte, zvolí počítač uživatele jiný, prohlížečem nastavený „defaultní“ font.

Pokud byste tedy uvažovali o tom, že si na stránky dáte nějaký neobvyklý originální font, podívejte se nejdřív, zda je podporován alespoň většinou uživatelů. Jak a kde to zjistit? Při řešení tohoto problému jsem narazil na poměrně užitečné stránky – www.codestyle.org. Zde se můžete podívat na přehlednou tabulku všech dostupných fontů u různých systémů a jejich percentuálního zastoupení u uživatelů. Čím více procent má daný font, tím více uživatelů jej samozřejmě na vašich stránkách uvidí tak, jak jste si naplánovali. Pokud ale chcete bezpodmínečně použít určitý nepříliš podporovaný font na webu, ujistěte se, že jako sekundární font jste si vybrali písmo naprosto bezpečně podporované, aby nedošlo k rozhození šablony (u některých fontů, obzvláště u zúžených písem „condensed“ je rozdíl ve velikosti oproti klasickým fontům obrovský).

Pro ty, kteří by nevěděli jak sekundární font do stylu zapsat, to zde vysvětlím. Je to velice jednoduché. V CSS se pro styl výběr fontu používá tag font-family: jméno_fontu;. Pokud chcete do tagu napsat i sekundární, terciérní a další fonty, oddělíte je prostě čárkou takto: font-family: Arial, Tahoma, Verdana;, přičemž pořadí se samozřejmě určuje zleva doprava.

Možná jste si už položili otázku – a nešlo by to udělat tak, aby si uživatel font stáhnul přímo z mého serveru a poté jej používal?  Ano, šlo. A to pomocí tagu @font-face. Jediným problémem je, že tento příkaz, ačkoliv už existuje nějaký ten rok, není stále příliš podporovaný. Pokud byste tento způsob chtěli použít, můžete si ho nastudovat například na webu jakpsatweb.cz.

Pokud chcete použít nějaký speciální font na webu, myslete také na to, aby byl obsah čitelný. Obsah je totiž to nejdůležitější. Na závěr zde vypíši krátký seznam všech bezpečně podporovaných fontů v dnešní době, který pochází z webu www.ampsoft.net.

  • Arial
  • Arial Black
  • Comic Sans MS
  • Courier New
  • Georgia
  • Impact
  • Lucida Console
  • Lucida Sans Unicode
  • Palatino Linotype
  • Tahoma, Geneva
  • Times New Roman
  • Trebuchet
  • Verdana
  • Symbol
  • Webdings
  • Wingdings
  • MS Sans Serif
  • MS Serif