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í řadě musíte totiž také myslet na uživatele, kteří daný font nemusí mít nainstalovaný (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 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ý 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 si můžete prohlédnout přehlednou tabulku všech dostupných fontů u různých systémů a jejich percentuelního zastoupení u uživatelů. Čím více procent má daný font, tím více uživatelu jej 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 font bezpečně podporovaný, aby nedošlo k rozhození šablony (u některých fontů, obzvláště u zúžených fonty „condensed“, je rozdíl 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, bude tag vypadat například takto: font-family: Arial, Tahoma, Verdana;. Přičemž pořadí určuje pozice v řádku.

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 na webu jakpsatweb.cz.

Pokud chcete použít nějaký speciální font na webu, myslete na to, aby to bylo také k přečtení. Obsah je důležitější, než font. Na závěr bych zde vypsal 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


Příspěvek byl publikován v rubrice Návody. Můžete si uložit jeho odkaz mezi své oblíbené záložky.

Napsat komentář

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *

*

Můžete používat následující HTML značky a atributy: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>