Webová typografie: Porovnání verzí
| (Není zobrazeno 13 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. | + | 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 26: | Řádek 26: | ||
== Makro-typografie a Mikro-typografie == | == 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. | + | 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''' | + | '''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. | ||
| − | '''Mikro-typografie''' | + | '''Mikro-typografie'''<ref name="SJL"></ref><ref name="typolex2">BEINERT, Wolfgang. Makrotypographie. In: ''TYPOLEXIKON.DE'' [online]. 11. 3. 2011 [cit. 2012-05-22]. Dostupné z: http://www.typolexikon.de/m/makrotypographie.html</ref> |
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ů. | 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 | + | == 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 59: | Řádek 59: | ||
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 | 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/ | ||
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 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 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,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
- ↑ 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,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/
- ↑ 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
- ↑ BEINERT, Wolfgang. Microtypographie. In: TYPOLEXIKON.DE [online]. 11. 3. 2011 [cit. 2012-05-22]. Dostupné z: http://www.typolexikon.de/m/mikrotypographie.html
- ↑ BEINERT, Wolfgang. Makrotypographie. In: TYPOLEXIKON.DE [online]. 11. 3. 2011 [cit. 2012-05-22]. Dostupné z: http://www.typolexikon.de/m/makrotypographie.html
- ↑ 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/
