Typografie

Typografie hraje v grafickém designu jednu z nejdůležitějších rolí. Jedná se o umění nebo techniku zobrazování textu čtivým, stravitelným a přitažlivým způsobem. Jako designéři pracujeme se spoustou textu, který musíme umět vhodně zobrazit.

Co je font

Font je sada tisknutelných nebo zobrazitelných znaků v určitém stylu a velikosti. Sada fontů jednoho stylu se nazývá typeface (typ písma). Vezměmě si například písmo Times New Roman. Písmo Times New Roman samo o sobě font není. Je to typeface, protože nám nabízí kolekci fontů. Můžeme si vybrat jestli chceme tučné nebo slabé písmo, kurzívu, tučné písmo s kurzívou, a tak podobně. Font je tedy v podstatě jen varianta nějakého typu písma, ale není to celý typ písma.

Většina lidí označuje typ písma (typeface) jako font, i když to tak není. Podle mě na tom ale není nic špatného a myslím že i hodně profesionálních designérů běžně označuje typ písma jako font, i když vědí že se tomu správně říká typeface. Já na této stránce budu typ písma označovat také jako font.

Druhy písma

Fonty se dělí do několika hlavních kategorií. Patkové písmo patří například do kategorie Serif, bezpatkové naopak do kategorie Sans Serif, písmo se stejně širokými znaky se řadí do kategorie Monospace, a tak podobně.

Serif

Do kategorie Serif patří patkové písmo. Díky patkám se i menší text snadněji čte, proto jsou fonty této kategorie často používány v knihách.

Sans Serif

Slovo sans ve francouzštině znamená bez. Do kategorie Sans Serif tedy patří bezpatkové písmo. Díky své jednoduchosti se často hodí pro nadpisy. Protože mají jednoduchý a čistý vzhled, tak oproti serif fontům tolik nesoupeří s ostatními elementy designu.

Script

Stručně řečeno, do kategorie Script patří fonty, které vypadají jako ručně psané. Script fonty mohou být díky svým krásným křivkám velmi přesné s definovanou strukturou, nebo mohou být třeba zábavné a mít svou vlastní unikátní charakteristiku. Script fonty mohou být jedny z těžších fontů na použití, protože se dožadují pozornosti. Některé mohou být také těžší na čtení.

Pokud máme například grafický tablet, a chceme si vytvořit svůj vlastní script font, tak samozřejmě můžeme. Tomuto procesu se říká Hand Lettering. Prvním krokem Hand Letteringu je napsat ručně text, který chceme napsat. V druhém kroku tento text můžeme převést na vektor v nějakém editoru k tomu určeném a použít v našem designu. Vlastní Script font může našemu designu dát svůj vlastní unikátní vzhled.

Decorative

Do kategorie Decorative patří fonty, které vypadají spíš jako grafika než písmo. Tyto fonty jsou tak detailní, že mohou být klidně použity samostatně, bez přidání fotek nebo jiných elementů. Měli bychom je ale používat přiměřeně, protože mohou působit příliš ohromujícím dojmem pokud nejsou použity správně.

Monospace

Pokud mají všechny znaky fontu stejnou šířku, tak se jedná o monospace font. Monospace fonty se běžně používají v programování, takže pokud v našem designu zobrazujeme například nějaký kód, tak je vhodné je použít.

Anatomie písma

V předchozím textu jste se dozvěděli, že se fonty dělí do různých kategorií. Typografie je ale ve skutečnosti mnohem zajímavější. Jednotlivé znaky fontu se totiž dají rozdělit na části, jako by se jednalo o nějaké puzzle. Stejně jako lidé, tak i písma mají své vlastní osobnosti, nálady a styly. Dokonce mají také anatomické rysy.

Pokud si budete vytvářet třeba vlastní font, tak je pravděpodobně důležité znát anatomii písma. Pokud ale budete fonty ve svém designu jen používat, tak si myslím že to zas tak důležité není. Možná že pokud budete anatomii znát, tak se vám budou lépe vybírat fonty a budete vědět, které budou ve vašem designu vypadat dobře a které ne, ale to si jen myslím. Nejsem na anatomii písma žádný expert a znám jen pár pojmů v angličtině, které jsem se tu rozhodl popsat a ukázat na obrázcích. Pokud chcete znát české názvy, tak se můžete podívat třeba na tuto stránku.

• Znak - každé písmo se skládá z různých znaků
• Baseline - pomyslná čára, na které leží řádek textu
• X-Height - výška malého písmene x (ostatní znaky budou podobně vysoké)
• Ascenders - části znaků, které přesahují pomyslnou horní čáru textu
• Descenders - části znaků, které přesahují baseline

• Ascent line - pomyslná čára, která leží nad ascendery
• Descent line - pomyslná čára, která leží pod descendery

• stem - hlavní (obvykle vertikální) tah písma
• tail - klesající tah, často dekorativní
• ear - část, která se rozšiřuje mimo znak
• shoulder - zahnutá část znaku mířící dolů ze stemu
• loop - uzavřená nebo částečně uzavřená smyčka pod baseline
• closed counter - prázdné místo, které je uzavřené uvnitř znaku

• Crossbar - spojení dvou částí pomocí vertikálního tahu
• Leg - krátká sestupující část znaku

Existuje ještě mnoho dalších termínů týkajících se anatomie písma, ale těmi už se zabývat nebudeme. Mým cílem bylo jen popsat pár pojmů pro ukázku.

Serif fonty

Jak jsem již psal, do kategorie Serif patří patkové písmo. Serif fonty se ale ještě dále dělí na 4 kategorie: Old Style, Transitional, Modern a Slab.

Old Style

Kategorie Old Style je nejstarší kategorií Serif fontů. Italští tiskaři chtěli vytvořit písmo, které by se snadno četlo, pro tisk knih. Old Style fonty se v tištěné podobě tedy velmi snadno čtou, protože u nich není moc velký rozdíl v tloušťce jednotlivých tahů. Příkladem Old Style fontů je třeba Garamond nebo Palatino.

Transitional

Kategorie Transitional vznikla v polovině 18. století. Představuje přechod mezi serif fonty kategorie Old Style a kategorie Modern, proto má název Transitional. Oproti Old Style fontům je u Transitional fontů větší rozdíl v tloušťce jednotlivých tahů znaku. Kromě toho mají Transitional fonty také tendenci mít více ball terminalů, což je u písma takové kulaté zakončení namísto například čtvercového konce.

Klasickým příkladem Transitional fontu je Times New Roman. Dále sem patří třeba Baskerville nebo Cambria.

Modern

Serif fonty kategorie Modern disponují ještě větším rozdílem v tloušťce jednotlivých tahů znaku. Patří sem například fonty jako je Bodoni nebo Prata.

Slab

Serif fonty kategorie Slab byly původně vytvořeny k upoutání pozornosti na plakátech. Disponují tlustými tahy, které mezi sebou nemají skoro žádný rozdíl v tloušťce. Konce patek těchto fontů jsou také více obdelníkové nebo čtveraté. Pokud chceme upoutat pozornost, tak se k tomu Slab fonty určitě hodí.

Sans Serif fonty

Do kategorie Sans Serif patří bezpatkové písmo. Sans Serif fonty mají tendenci mít oproti Serif fontům moderní a čistý vzhled. Občas jim ale může chybět elegance a šarm, který je v některých případech potřeba. Každopádně pokud chceme vytvářet moderní design, tak se na to Sans Serif fonty většinou skvěle hodí. Mohou vyjadřovat smysl pro modernismus a minimalismus.

Sans Serif fonty vznikly mnohem později než Serif fonty, protože digitální obrazovky potřebovali mnohem čistší a jednodušší font. Dříve měli počítačové obrazovky mnohem menší rozlišení než dnes, a detaily fontu se tak mohli snadno ztratit.

Pro velké tučné nadpisy jsou Sans Serif fonty vynikající. Na druhou stranu, ve větším bloku textu se občas mohou trochu ztratit. Jsou dobré pro digitální média a jsou k tomuto účelu navržené, ale pro tisk může být občas lepší použít Serif font. Samozřejmě také záleží na stylu, který se snažíme vyvolat.

Sans Serif fonty se stejně jako Serif fonty také dělí do 4 základních kategorií: Grotesque, Neo-Grotesque, Humanist a Geometrical.

Grotesque

Nejstarší kategorií Sans Serif fontů je Grotesque. Patří sem například fonty jako je Gothic nebo Source Sans Pro.

Neo-Grotesque

Další kategorií Sans Serif fontů je Neo-Grotesque. Řekl bych že v porovnání s Grotesque kategorií jsou Neo-Grotesque fonty takové více jednotné. Patří sem např. Arial nebo Helvetica.

Humanist

Třetí kategorií Sans Serif fontů je Humanist. U fontů této kategorie je větší kontrast mezi výškami řádku a mohou obsahovat také různé detailnější prvky. Patří sem např. Gill Sans nebo Tahoma.

Geometrical

Fonty z kategorie Geometrical jsou postaveny na geometrických tvarech. Pokud se u nich například podíváme na písmeno O, tak uvidíme kruh. Patří sem např. Raleway nebo DM Sans.

Tloušťka písma

Jak pravděpodobně víte, textu můžeme nastavovat různou tloušťku. Můžeme třeba nastavit aby byl tučný, nebo naopak štíhlý. Záleží na fontu, jak velký výběr tloušťky nám nabídne. Script a Decorative fonty nastavování tloušťky většinou neumožňují, ale jiné většinou ano.

Tučné písmo můžeme použít, když chceme divákovi zdůraznit nějakou důležitou informaci. Také můžeme tučné písmo použít například pro nadpis. Určitě se ale také v některých případech hodí použít tenké písmo. Jak na nás tučné a tenké písmo působí si teď ukážeme.

Tučné písmo

Tučné písmo na nás může působit jako křik nebo hlasitá řeč. Pomáhá nám něco zdůraznit, aby si toho divák všiml.

Tenké písmo

Tenké písmo můžeme v některých případech také použít pro text který chceme zdůraznit. Samozřejmě ale musíme text zdůraznit nějakým jiným způsobem, například větší velikostí písma. Když něco zdůrazňujeme pomocí tenkého písma, tak jsme při tom měkčí a na diváka to nepůsobí jako křik nebo hlasitá řeč.

Kerning a Leading

Když pracujeme v našem designu s textem, tak můžeme manuálně změnit velikost mezery mezi znaky nebo mezi řádky. Měnění velikosti mezer mezi znaky se nazývá kerning, a měnění velikosti mezer mezi řádky se nazývá leading (čte se leding).

Kerning

Jedno z důležitých rozhodnutí, které musíme jako designéři uskutečnit když pracujeme například s nadpisy, je jaké nastavíme mezery mezi znaky. Musíme se rozhodnout jestli nastavíme širší nebo uzší mezery. V kratším nadpisu může nastavení širokých mezer mezi znaky písmo povýšit na jinou úroveň. Písmo díky širším mezerám může působit více elegantněji a high-end. Naopak na delší nadpis nebo blok textu se široké mezery moc nehodí.

Pokud textu nastavíme úzké mezery, tak tím do našeho designu můžeme v některých případech přidat pocit naléhavosti. Úzké mezery také dělají tučné písmo více soudržné a spojené.

Nastavování širokých mezer pro malá písmena skoro nikdy nevypadá dobře. Pokud děláme nadpis a chceme použít široké mezery, tak je pravděpodobně vždy nejlepší použít velká písmena.

Leading

Kromě nastavování mezer mezi znaky můžeme také nastavovat mezery mezi řádky textu. Větší mezery mezi řádky mohou kratší text roztáhnout přes větší část designu. Když se podíváte na následující ukázku, tak můžete vidět že nastavením větších mezer mezi řádky můžeme nastavit výšku textu tak, aby končil zároveň s obrázkem.

Úzké mezery mezi řádky mohou bloku textu pomoct působit více pospolu a můžeme jej přečíst jako jeden celek.

Zarovnání

Text můžeme v našem designu zarovnávat vlevo, vpravo nebo na střed.

Zarovnání vlevo

Nic neporazí sílu zarovnání vlevo, obzvlášť s delšími nadpisy nebo frázemi. Zarovnání vlevo může text udělat více stabilnějším a takovým více uzemněným.

Zarovnání na střed

Pokud text z minulé ukázky zarovnáme na střed, tak nám může připadat že něco ztratil. I když v tomto konkrétním případě se mi zarovnání na střed líbí také, ale dal bych přednost zarovnání zleva.

Zarovnání na střed může být dobré hlavně například pro menší nadpisy nebo fráze.

Zarovnání vpravo

V designu se zarovnání vpravo moc nepoužívá. I když to v některých případech může dávat smysl, tak je stejně většinou lepší použít zarovnání vlevo. Čteme totiž zleva doprava a pokud je text zarovnaný vpravo, tak nám to moc nesedí.

I když se zarovnání vpravo moc nepoužívá, můžeme jej použít na různé menší věci. V následujícím obrázku je například zarovnání vpravo použito pro dolní část nadpisu.

Hierarchie písma

Zlatým pravidlem designu je dodržovat silnou hierarchii. Náš design se skládá z různých částí. Máme nadpisy, podnadpisy, text, CTA (call to action - výzva k akci), a často ještě mnohem více. Je důležité abychom od sebe různé části našeho designu odlišili a zobrazili je ve vhodném pořadí.

Nadpis je v designu většinou ta nejdůležitější věc, protože určuje jestli diváka zaujme a bude číst dál. Z tohoto důvodu bývají nadpisy velké, aby si jich divák všiml jako první a chtěl se po jejich přečtení dozvědět více. Co naopak nemusí být nijak výrazně zvýrazněno je například datum a místo konání, pokud děláme třeba nějakou pozvánku. Ne že by tyto informace nebyli důležité, ale divák se na ně může chtít podívat až později, pokud ho naše pozvánka zaujme.

Je dobré nechávat náš design jednoduchý nebo se jej snažit udělat jednoduchým. V programování a designu existuje princip KISS. Je to zkratka pro 'Keep it simple, Stupid!', což v češtině znamená 'Nech to jednoduché, hloupé!'. Měli bychom se snažit obsah různě logicky rozmístit tak, aby se v něm divák snadno vyznal. Občas také můžeme vypustit nějaké informace a přidat třeba CTA s odkazem na webovou stránku, kde se divák může dozvědět více informací.

Párování fontů

V našem designu nemusíme používat jen jeden font. Můžeme klidně zkombinovat dva fonty dohromady. Měli bychom to ale dělat hlavně pro nadpisy a podobně věci. Používání více fontů v hlavním textu může být moc ohromující. Pro jeden design je vhodné kombinovat 2-3 fonty, víc ne.

Párování fontů je o experimentování. Neexistují žádná pravidla, která by určovala, které fonty se k sobě budou hodit a které ne. Prostě vybíráme různé fonty a zkoušíme jestli spolu vypadají dobře. Jsou ale určité kombinace fontů, které spolu většinou fungují dobře. Je to o tom, že by kombinované fonty měli být snadno odlišitelné. Pokud jsou snadno odlišitelné, tak dohromady většinou fungují. Tyto kombinace jsou následující:

• Serif font se Sans Serif fontem
• font s malými písmeny a font s velkými písmeny
• Script font s tučným Sans Serif fontem
• Script font se Serif fontem