Webová typografie

Z WikiKnihovna
Přejít na: navigace, hledání

Autor: Daniela Králová

Klíčová slova: webová typografie

Synonyma: typografie pro web, web typografie, typografie na webu

Související pojmy:

nadřazené - typografie, webdesign, informační design
podřazené - font, písmo, sazba písma


Charakteristika

Webová typografie je termín označující typografii digitálních textů a týká se použití druhů písem ve webovém prostředí.[1] Tato disciplína byla donedávna webovými designery opomíjena, avšak v poslední době je jí věnována stále větší pozornost.[2] Neexistují ucelená typografická pravidla pro web, ale jedná se spíše o poznatky vycházející z klasické typografie přizpůsobená jinému prostředí. Správné použití typografie je zásadním aspektem webdesignu. Pomáhá vytvořit srozumitelný a ucelený web. Typografie se zabývá nastavením, uspořádáním a sazbou textů, a to takovým způsobem, který je vizuálně přitažlivý, dostupný a snadno čitelný. Bez ohledu na to, jak dobrý obsah mají webové stránky, pokud nejsou všechny informace prezentované textem snadno čitelné, je kvalita obsahu snížena.[3] Základem pro všechny webové fonty je standard Unicode jako globální systém pro kódování znaků.[1]

Historie

V začátcích HTML bylo nastavení druhů písem a jejich styly stanoveny výhradně prohlížečem. Až do roku 1995 neexistoval způsob, jak ovlivnit písma zobrazené na webových stránkách. Tehdy prohlížeč Netscape, představil tag <font>, který byl pak použit ve specifikaci HTML 2 jako standard. Nicméně font definovaný tagem musí být nainstalován na počítači uživatele. V opačném případě by byl použit takzvaný „Fallback font“ (nouzový font/písmo), jako jsou v prohlížeči předem nastavená písma sans-serif nebo monospace. Specifikace CSS2 byla vydána v roce 1998 a pokoušel se zlepšit proces výběru písma přidáním přiřazování odpovídajícího písma, syntézy a stahování. Tyto techniky však nebyly moc používány a ze specifikace CSS2.1 byly odstraněny. V roce 1997 přidal Internet Explorer ve verzi 4.0 funkci na podporu stahování jiných fontů (písem) z webového serveru. Stahování písem bylo později zařazeno v modulu písem CSS3, a od té doby bylo implementováno v Safari 3.1, Opera 10 a Mozilla Firefox 3.5. To se následně zvýšilo zájem o webovou typografii, stejně jako o využívání stahování písma.[4]

Makro-typografie a Mikro-typografie

Dva klíčové aspekty typografie v oblasti web designu jsou Makro-typografie a Mikro-typografie, které se zabývají dvěma různými, ale stejně podstatnými prvky typografie.[3]

Makro-typografie[3][5]

Makro-typografie je zaměřena na složení textu jako celku. Zabývá se komplexním optickým dojmem sazby textu, přičemž je kladen i důraz na funkci, techniku a estetiku. Zajišťuje, že je text kontinuitní s rozložením webových stránek. To znamená pečlivé rozmístění odstavců, a to ve vztahu k barevnému schématu, obrázkům a jiným textem na stránce.

Mikro-typografie[3][6]

Mikro-typografie je založena na jemnějších aspektech uspořádání textu, jako jsou mezery a psaní. Zabývá se samotným písmem a jeho použitím. Patří sem rovněž návrh a tvorba písma, typometrie písmen, čísel a jiných znaků.


10 věcí, které by měl každý webdesignér o typografii vědět

  • přečíst si po sobě svůj text
  • co nejméně používat Lorem ipsum...nejlépe vůbec nepoužívat
  • předvést jasnou hierarchii
  • dávat pozor na makrotypografii i mikrotypografii
  • opatrně zacházet s typy barev (nepoužívat podobné barvy, ale spíše kontrastní)
  • brát vážně CSS
  • nepoužívat centrovaný text
  • vypořádat se s citacemi a speciálními symboly
  • plánovat zvětšení dosavadního textu
  • ukázat preferenci sans-serifu [7]

Poznámky

  1. 1,0 1,1 Webtypografie. In: Wikipedia: the free encyclopedia [online]. St. Petersburg (Florida): Wikipedia Foundation, last modified on 13. 5. 2012 [cit. 2012-05-22]. Dostupné z: http://de.wikipedia.org/wiki/Webtypografie
  2. RUTTER, Richard. In: IntroductionThe Elements of Typographic Style Applied to the Web [online]. 2005 [cit. 2012-05-22]. Dostupné z: http://webtypography.net/intro/
  3. 3,0 3,1 3,2 3,3 LOGAN, Sam. Macro and Micro Typography. SJLwebdesign.com[online]. [cit. 2012-051-22]. Dostupné z: http://www.sjlwebdesign.co.uk/sjl-blog/index.php/typography/macro-and-micro/
  4. Web typography. In: Wikipedia: the free encyclopedia [online]. St. Petersburg (Florida): Wikipedia Foundation, last modified on 10. 5. 2012 [cit. 2012-05-22]. Dostupné z: http://en.wikipedia.org/wiki/Web_typography#cite_note-0
  5. BEINERT, Wolfgang. Microtypographie. In: TYPOLEXIKON.DE [online]. 11. 3. 2011 [cit. 2012-05-22]. Dostupné z: http://www.typolexikon.de/m/mikrotypographie.html
  6. BEINERT, Wolfgang. Makrotypographie. In: TYPOLEXIKON.DE [online]. 11. 3. 2011 [cit. 2012-05-22]. Dostupné z: http://www.typolexikon.de/m/makrotypographie.html
  7. Webdesignerdepot. 10 Web Typography Rules Every Designer Should Know. In: Webdesignerdepot.com [online]. February 2009 [cit. 2012-05-22]. Dostupné z: http://www.webdesignerdepot.com/2009/02/10-web-typography-rules-every-designer-should-know-2/


Použitá literatura

1. Webtypografie. In: Wikipedia: the free encyclopedia [online]. St. Petersburg (Florida): Wikipedia Foundation, last modified on 13. 5. 2012 [cit. 2012-05-22]. Dostupné z: http://de.wikipedia.org/wiki/Webtypografie

2. Web typography. In: Wikipedia: the free encyclopedia [online]. St. Petersburg (Florida): Wikipedia Foundation, last modified on 10. 5. 2012 [cit. 2012-05-22]. Dostupné z: http://en.wikipedia.org/wiki/Web_typography#cite_note-0

3. LOGAN, Sam. Macro and Micro Typography. SJLwebdesign.com[online]. [cit. 2012-051-22]. Dostupné z: http://www.sjlwebdesign.co.uk/sjl-blog/index.php/typography/macro-and-micro/

4. BEINERT, Wolfgang. Microtypographie. In: TYPOLEXIKON.DE [online]. 11. 3. 2011 [cit. 2012-05-22]. Dostupné z: http://www.typolexikon.de/m/mikrotypographie.html

5.BEINERT, Wolfgang. Makrotypographie. In: TYPOLEXIKON.DE [online]. 11. 3. 2011 [cit. 2012-05-22]. Dostupné z: http://www.typolexikon.de/m/makrotypographie.html

6. Webdesignerdepot. 10 Web Typography Rules Every Designer Should Know. In: Webdesignerdepot.com [online]. February 2009 [cit. 2012-05-22]. Dostupné z: http://www.webdesignerdepot.com/2009/02/10-web-typography-rules-every-designer-should-know-2/

7. RUTTER, Richard. In: IntroductionThe Elements of Typographic Style Applied to the Web [online]. 2005 [cit. 2012-05-22]. Dostupné z: http://webtypography.net/intro/