Webová typografie: Porovnání verzí

Z WikiKnihovna
 
(Není zobrazeno 7 mezilehlých verzí od stejného uživatele.)
Řádek 15: Řádek 15:
 
== Charakteristika ==
 
== 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í.<ref name="Wikipedie1"> 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</ref> 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. 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í.
+
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í.<ref name="Wikipedie1"> 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</ref> 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.<ref name="intro">RUTTER, Richard. In: '' IntroductionThe Elements of Typographic Style Applied to the Web '' [online]. 2005 [cit. 2012-05-22]. Dostupné z: http://webtypography.net/intro/</ref> 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.<ref name="SJL">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/</ref>
 
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.<ref name="SJL">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/</ref>
 
Základem pro všechny webové fonty je standard Unicode jako globální systém pro kódování znaků.<ref name="Wikipedie1"></ref>
 
Základem pro všechny webové fonty je standard Unicode jako globální systém pro kódování znaků.<ref name="Wikipedie1"></ref>
Řádek 28: Řádek 28:
 
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.<ref name="SJL"></ref>
 
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.<ref name="SJL"></ref>
  
−
'''Makro-typografie'''.<ref name="SJL"></ref>.<ref name="typolex">BEINERT, Wolfgang. Microtypographie. In: ''TYPOLEXIKON.DE'' [online]. 11. 3. 2011 [cit. 2012-05-22]. Dostupné z: http://www.typolexikon.de/m/mikrotypographie.html</ref>
+
'''Makro-typografie'''<ref name="SJL"></ref><ref name="typolex">BEINERT, Wolfgang. Microtypographie. In: ''TYPOLEXIKON.DE'' [online]. 11. 3. 2011 [cit. 2012-05-22]. Dostupné z: http://www.typolexikon.de/m/mikrotypographie.html</ref>
  
 
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.
 
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.
Řádek 37: Řádek 37:
  
  
−
== 10 věcí, které by měl každý webdesignér od typografii vědět==
+
== 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
 
*přečíst si po sobě svůj text
−
*co nejméně používat Lorem ipsum...
+
*co nejméně používat Lorem ipsum...nejlépe vůbec nepoužívat
 
*předvést jasnou hierarchii
 
*předvést jasnou hierarchii
 
*dávat pozor na makrotypografii i mikrotypografii
 
*dávat pozor na makrotypografii i mikrotypografii
−
*opatrně zacházet s typy barev
+
*opatrně zacházet s typy barev (nepoužívat podobné barvy, ale spíše kontrastní)
 
*brát vážně CSS
 
*brát vážně CSS
 
*nepoužívat centrovaný text
 
*nepoužívat centrovaný text
 
*vypořádat se s citacemi a speciálními symboly
 
*vypořádat se s citacemi a speciálními symboly
 
*plánovat zvětšení dosavadního textu
 
*plánovat zvětšení dosavadního textu
−
*ukázat preferenci sans-serifu
+
*ukázat preferenci sans-serifu <ref name="webdepot">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/</ref>
  
 
== Poznámky ==
 
== Poznámky ==
Řádek 65: Řádek 65:
  
 
5.BEINERT, Wolfgang. Makrotypographie. In: ''TYPOLEXIKON.DE'' [online]. 11. 3. 2011 [cit. 2012-05-22]. Dostupné z: http://www.typolexikon.de/m/makrotypographie.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/

Aktuální verze z 22. 5. 2012, 22:04

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/

Citováno z „https://wiki.knihovna.cz/index.php?title=Webová_typografie&oldid=23872“