Co říkají obrazy? Čtení a tvorba vizuálních informací

10. Typografie a layout (Ú)

Typografie je jednoduše řečeno vzhled textu. Když mluvíme o typografii, mluvíme o tom, jak vypadají písmena, ale také, jak jsou uspořádána v rámci větších celků - řádků, odstavců či stránek. Proč se vyplatí vědět něco o výšce řádku, nebo o rozdílu mezi patkovým a bezpatkovým písmem? Postupně si to odhalíme.


Písmo jako vzduch

Plakát k dokumentu Helvetica. Autor: Gary Hustwit.S typografií se setkáváme dennodenně - v knížce, na webu, nebo také na dopravních značkách, na obalech potravin a vývěsních štítech restaurací. Čteme a píšeme různé texty do práce, školy, pro potěchu. Na některá písma jsme natolik zvyklí, až se pro nás stávají takřka neviditelnými - jsou natolik samozřejmá a všudypřítomná jako vzduch, který nám proudí plícemi. 

Nevěříte? Americký typograf Cyrus Highsmith si vymyslel zdánlivě banální experiment: strávit celý jeden den bez toho, aby přišel do kontaktu s písmem Helvetica. Pokud někde na Helveticu narazil, musel odklonit svůj zrak. Jak myslíte, že se mu dařilo? Úkol to byl náramně těžký! Již při ranním výběru oděvu si nemohl obléct téměř nic, protože většina štítků a nápisů byla právě v Helvetice. Svůj oblíbený jogurt musel také vynechat, stejně jako jízdu metrem, které bylo tímto písmem takřka obsypané. Helvetica na něj nenápadně číhala v novinách, v jídelním menu, na internetu a dokonce i na amerických dolarech a kreditních kartách. Pokud nevěříte, že je Helvetica skutečně tak všudypřítomná, vyzkoušejte si Highsmithův experiment na vlastní kůži, nebo se podívejte alespoň na loga, která ji využívají - od BMW, přes MattelEvian až po Skype.

Písmo je součástí vizuální komunikace. Zprostředkovává významy slov, ale také komunikuje samo o sobě svým tvarem, tloušťkou, velikostí. Důkladné čtení nejen slov, ale také písma, vám pomůže odhalit, co autor (úpravy) textu říká a pokud se naučíte používat písma účelně i vy sami, můžete umocnit svůj záměr již pouhým rozhodnutím: Times New Roman nebo Comic Sans? 


Písmo nebo font?

Nejprve si zkusíme vyjasnit několik typografických pojmů, které jste pravděpodobně již slyšeli, ale možná neznáte jejich přesný význam. Kromě označení písmo se stále častěji používá pojem font. Jaký je v tom rozdíl

Font bylo původně označení pro konkrétní fyzickou sadu kovových dílků se znaky (písmeny, mezerami, interpunkčními znaménky atd.), které tiskař otiskoval na papír. Písmo pak byla vizuální podoba těchto znaků. Stejně je to dnes, pouze již nemáme sady kovové, ale digitální. Pro příklad Arial je písmo, nicméně jeho konkrétní sady - Arial Black, Arial Narrow či Arial Rounded - jsou fonty. V Microsoft Wordu nebo Google Dokumentech jsou k dispozici desítky písem v podobě fontů, neboli ,,digitálních dílků“ složených z nul a jedniček. Font, jako pojem vázaný původně k technologické podobě písma, se s nástupem digitálních textových editorů ujal jako synonymum k původnímu pojmu písmo. Dnes se také v angličtině velice běžně používá type (písmo)typeface (design písma) a font (font) zaměnitelně, a to napříč laickou veřejností i mezi odborníky. Pokud tedy omylem řeknete font a máte na mysli vlastně písmo, nemusíte si s tím dělat těžkou hlavu.


Typy písem

Podle anatomie písmen se písma dělí na čtyři základní typy: patková (serif), bezpatková (sans serif), psaná (script) a dekorativní/nadpisová (decorative/display). Každý z typů je vhodný pro jiné použití, váže se k němu různá historie a má různé působení na čtenáře - ať už to považujete za psychologicky nebo kulturně podmíněné.

Typy fontů. Autor: Will Harris.Patková písma mají patku, tedy prodloužení v koncových tazích písmen. Typickými zástupci jsou Times New RomanGeorgia nebo Baskerville. Patková písma jsou vnímána jako tradiční, klasické, autoritativní, důvěryhodné, elegantní. Používají se zejména pro delší texty v knihách a novinách, nicméně mají v podstatě univerzální využití.

Bezpatková písma nemají patku, jsou tedy hladší, bez ozdobných koncových detailů. Typickými zástupci jsou VerdanaArial nebo Calibri. Jsou vnímána jako moderní, čistá, objektivní, stabilní, progresivní. Podobně jako patková písma mají univerzální využití od dlouhých textů až po nadpisy. O něco častěji než patková se využívají v digitálním prostředí - například jako písma pro operační systémy nebo aplikace.

Psaná písma se snaží napodobit lidský rukopis a kaligrafii, většinou jsou tedy nakloněna do strany a jednotlivá písmena jsou vázána ligaturou. Typickými zástupci jsou MistralPacifico nebo Lobster. Působí vřele, vesele, umělecky, vášnivě, přátelsky. Používají se opatrně a spíše pro kratší texty jako jsou nadpisy - v delších textech mohou být nečitelné a působit těžkopádně. Nepřirozeně může působit kombinace dvou stejných psaných digitálních písmen za sebou, protože rukou nikdy dvě stejná písmena nenapíšete (například ve slově jazz).

Dekorativní/nadpisová písma mají velice různorodou podobu a často vznikají pouze pro specifické použití. Typickými zástupci jsou Cooper BlackImpact nebo Bills Mafia. Poutají pozornost, jsou originální, expresivní, zábavná, unikátní. Používají se - jak naznačuje již jejich název - především na nadpisy, loga a jiné texty, které by měly být výrazné a distinktivní. Vzpomeňte si třeba na ikonický westernový nápis WANTED, nebo třeba nápis na plakátu k Pulp Fiction.

Periodická tabulka písem. Autor: Cam Wilde.

Zajímavým přehledem typů písem je Periodická tabulka písem. Najdete v ní písma seřazena dle oblíbenosti a používanosti po vzoru periodické tabulky chemických prvků, ale také jména jejich tvůrců, datum vzniku a také typ, do kterého se písmo řadí. Zkuste se na ni podívat a zamyslet se nad tím, kolik písem je vám známých nebo alespoň povědomých. Pokud vás zaujme nějaký font a chtěli byste vidět jak vypadá použitý, podívejte se na Font in Use - najdete tam spoustu inspirace a příkladů použití nejen z těch nejznámějších písem, ale také těch, která jsou nová nebo experimentální.

HREJTE SI!

  1. Typewar - uhádnete, na který z dvou fontů se právě díváte?
  2.  - dokážete pomocí křivek upravit písmeno tak, aby bylo dokonale vyvážené?
  3. Kern Type - to ne, tak příšerné mezery! Co s tím uděláte? 


Rodiny a řezy

Ukázka rodiny písma Roboto. Autorka: Anna Puchovská via 1001 fonts.

Možná se ptáte, co je kurzíva a tučné, pokud to není typ písma? Každé písmo - ať už je patkové, bezpatkové, psané nebo dekorativní - má svou rodinu písma. V rámci této rodiny existuje základní písmo a pak jeho řezy, tedy odvozená písma, různé varianty základního písma. Právě kurzíva (italic) tučné (bold) jsou řezy písem. Pokud chcete mít zajímavý nebo kontrastní design, nemusíte utíkat za hranice rodiny - sáhněte po různých řezech téže rodiny a získejte chtěnou různorodost. Podívejte se na příklad základního písma Roboto Regular a jeho široké rodiny. Pro jeden design se doporučuje použít maximálně dvě rodiny písem, nicméně nebojte se kombinovat velké řezy s malými, široké s užšími, nebo patkové písmo s bezpatkovým.

Většina písem má malá (minusky) a velká písmena (verzálky), některá mají také různé řezy jako kapitálky (velká písmena ve velikosti malých písmen), kurzívu, tučné, tenký nebo střední řez. Další písma některé nebo žádné řezy kromě základního nemají. Správné verze řezů tvoří typografové, kteří kreslí každé písmeno zvlášť tak, aby bylo vyvážené a kvalitní. Toto je obzvlášť důležité uvědomit si při kurzívě - pokud stisknete ctrl+I ve Wordu, pouze nakloníte doprava základní písmo a vytvoříte tak falešnou kurzívu, která není tak kvalitní.

Podívejte se na příklad:

Falešná kurziva. Autorka: Andrea Grigerová.

  1. Základní písmo

  2. Řez kurzíva

  3. Falešná kurzíva




Fontobanky

Pokud chcete, aby bylo vaše písmo skutečně vyvážené a hezké, vždy používejte požadovaný řez ve formě fontu. V textových či grafických editorech najdete mnoho předinstalovaných fontů, další najdete v bezplatných fontobankách, kde si je můžete stáhnout ve formátu TTF nebo OTF. Jak nainstalovat font do vašeho počítače se můžete naučit třeba v tomto videu, je to velice jednoduché a intuitivní. Z bezplatných fontobank doporučujeme hlavně Google Fonts, Font Squirrel, DaFont, nebo Free Fonts Project, pro zajímavá studentská a designérská písma prohledejte Behance  nebo Awwwards. Fonty si také můžete koupit na Pangram Pangram FoundryAdobe Fonts, nebo přímo některá česká a slovenská písma.


Jak se mi to bude číst?

Nyní máte přehled o základních typografických pojmech - víte, jaký je rozdíl mezi písmem a fontem, které základní typy a řezy písem existují a kde je můžete získat. Teď si řekneme něco o jejich použití. Pokud budete vybírat písmo, bude vás zajímat především, jak se má vzhledem k čitelnosti a/nebo čtivosti. Jaký je mezi těmito dvěma ukazateli rozdíl?

Čitelnost i čtivost nemusí být pro vás vždy stejně důležité. Pokud píšete delší text, například seminární práci, dejte si záležet na čtivosti písma, abyste docílili, že čtenář váš text dočte bez obtíží a udrží si pozornost. Při kratších textech jako jsou nadpisy se zaměřte spíše na čitelnost - budou čteny rychle a převážně z dálky, ve větších velikostech a výraznějších řezech. Pokud budou málo čtivé, nemusí to vadit. Nadpisy slouží spíše na upoutání pozornosti, vyvolání emocí a sdělení jasné krátké informace. I nečtivá a méně čitelná písma mají svá využití, neberte tedy níže uvedené doporučení jako dogma, které se musíte za každých okolností držet - odpovídejte výběrem písma na potřeby vašeho designu.

PORUCHY ČTENÍ

V případě, že se chcete pokusit o větší přístupnost vašeho textu, zvažte specifické potřeby čtenářů. Například čtenáři s poruchami čtení (s dyslexií) ocení bezpatkové fonty, větší velikosti písma, zarovnání textu do strany (zarovnání do bloku jim stěžuje přechod z řádku do dalšího řádku) nebo zvýraznění tučným místo kurzívy, která se dyslektikům kvůli výraznému sklonu písmen čte velmi obtížně. Pro lepší vnímání pomůže také uspořádání textu do krátkých odstavců, doplnění grafickými prvky (obrázky, schématy), výraznými nadpisy a ikonami. Můžete také zvážit poskytnutí alternativ k textu ve formě videí a audionahrávek. 

Pokud vás zajímají další specifické potřeby, které mohou mít čtenáři při čtení textu například na webových stránkách, podívejte se na příručku pro knihovny Přístupné webové stránky.


Čtivost

Pravděpodobně jste se již setkali s tímto pokynem pro formátování textu v diplomové práci - pište v Times New Roman, 12b velikost, zarovnání do bloku, 1,5 řádkování. Tato pravidla nejsou dána jen tak bez rozmyslu. Je to typická norma, která klade důraz na čtivost (readability). Takto upravený delší text se čte velice dobře a rychle. Co za to může?

Velikost písma - menší písmo se čte hůře. Pro delší text je optimální písmo velikosti 12b, menší zvažte v závislosti od publika (senioři a děti čtou malá písmena obtížně).

Velikost písma. Autorka: Ilene Strizver.

Verzálky - velká písmena se od sebe odlišují méně než malá, text celý napsaný v Caps Lock je proto těžko čitelný. Není vhodný pro delší texty, použijte jej spíše na zvýraznění.

Verzálky. Autorka: Ilene Strizver.

Výška řádku - těsné mezery mezi řádky snižují čtivost. Řádek by měl být vždy o minimálně 3b větší, než je velikost písma. Porovnejte sami. V příkladu je písmo ve velikosti 18b, nalevo je v řádku velkém 18b a napravo v řádku velkém 23b.

Výška řádku. Autorka: Ilene Strizver.

Délka řádku - příliš krátké řádky mají mnoho rozdělených slov na konci, což snižuje čtivost; v příliš dlouhých řádcích se zase ztrácíte a musíte se často vracet. Optimální délka řádku je 45-70 znaků.

Délka řádku. Autorka: Ilene Strizver.

Barva a kontrast - malý kontrast mezi barvou a podkladem zapříčiňuje nižší čtivost. Myslete na to především, pokud používáte za písmem jiné než bílé pozadí. Pokud chcete prostřídat černobílou klasiku, zkuste například dvě komplementární barvy.

Barva a kontrast. Autorka: Ilene Strizver.


Čitelnost

Čitelnost (legibility) vypovídá o tom, jestli jsou jednotlivé znaky písma dobře odlišitelné a díky tomu je možné je bez problémů přečíst. Čitelnost písma tedy vyplývá především z jeho designu. Faktorů, které čitelnost ovlivňují je více:

Šířka znaků - je dobré zachovat takou, která je běžná. Příliš kondenzovaná písma (vlevo), ale také příliš roztažená písma se čtou mnohem hůř. 

Šířka znaků. Autorka: Ilene Strizver.

Váha - příliš tučné (vpravo) a příliš tenká písma (vlevo) se čtou obtížné. Pro delší texty jsou vhodná písma řezu regular.

Váha. Autorka: Ilene Strizver.

Designové detaily - okrasné prvky, rozmazané kontury apod. mohou snižovat čitelnost, nicméně při kratších textech to vůbec nemusí vadit (vpravo).

Designové detaily. Autorka: Ilene Strizver.

Kontrast tahů - písma jako Didot, které se objevuje třeba na titulce Vogue, mají některé tahy tenké a jiné tučnější. Velký kontrast mezi tenkými a tučnými tahy v rámci písmena snižuje čitelnost (vlevo).

Kontrast tahů. Autorka: Ilene Strizver.

Patky - i když mnozí věří, že patková písma jsou lépe čitelná, nemůže za to patka samotná. Jednoduché bezpatkové písmo může být mnohem čitelnější (vpravo) než patkové písmo s ozdobnými kudrlinkami (vlevo).

Patky. Autorka: Ilene Strizver.


Vkus, trendy, zvyklosti a identita

Do rozhodování o výběru písma mohou vstupovat ještě další faktory, jako je osobní vkus, trendy, zvyklosti nebo identita. Ukažme si jejich působení na písmech, které budí kontroverzi.

Comic Sans

Microsoft Bob. Utor: Al Williams.Mnoho designérů, ale také laiků nahlíží na Comic Sans přes prsty. Je to vážně tak špatné písmo, nebo je pes zakopaný jinde? Příběh Comic Sansu skutečně začíná při pejskovi, a to konkrétně při Bobovi, kreslené postavičce z dílny Microsoftu. Bob měl prostřednictvím komiksových bublin s textem pomáhat uživatelům zorientovat se ve Windowsu. Typograf Vincent Connare chtěl, aby Bob ,,mluvil“ čtivým, přátelským a veselým písmem, vytvořil proto Comic Sans. I když Bob nakonec Comic Sansem ,,nemluvil“, rychle se stalo toto písmo tak populární, až bylo takřka všude - v operačním systému mobilů, ve firemních prezentacích, v pozvánkách na oslavy. Problém nastal až když se tento vřelý a trošku dětinský font začal objevovat na náhrobních kamenech nebo ve vědeckých prezentacích, kde jeho žoviální vyznění působilo nevkusně a neprofesionálně. Dalo by se tedy říct, že Comic Sans získal svou špatnou pověst kvůli nadužívání a nepatřičným použitím, ne proto, že by byl vysloveně nekvalitní. 

Písma podléhají trendům stejně jako barvy nebo tvary (všimněte si například trend zaoblování ve webovém designu na nové verzi Facebooku). Typografové se shodují na tom, že v obecnosti je nejčitelnější to, na co jsme zvyklí, nicméně taková ,,klasická“ písma se také časem omrzí. Pokud chce typograf vytvořit masově oblíbené písmo, vyhráno má, když písmo působí známě, ale zároveň je v nějakém detailu nové a vzrušující, nenudí. Pokud chcete vědět, co je aktuálně trendy, podívejte se na Typewolf, pokud vás zajímají věčné klasiky, kterými nic nezkazíte, podívejte na výběry. Brouzdejte internetem, všímejte si písem, která jsou kolem vás, přemýšlejte nad tím, jak na vás působí, jestli vás baví, nebo už vám lezou krkem. A pokud vás nějaké písmo osloví, ale nevíte, jak se jmenuje, vyhledejte si ho pomocí What the Font.


MUNI

MUNI je příkladem písma, které vzniklo jako součást jednotného vizuálního stylu instituce (corporate design), spolu s dalšími prvky jako je logo, barevnost nebo webové stránky. Aby instituce působila profesionálně, důvěryhodně a měla vysokou poznatelnost, potřebuje navenek komunikovat jednotně, přičemž důležitou součástí této komunikace je právě písmo. Výrazně odlišné písmo od jiných, například tvarově nebo barevně způsobí, že si okamžitě spojíte text s institucí i bez toho, abyste si ho museli přečíst. 

V případě Masarykovy univerzity se typograf Marek Pistora inspiroval městem Brno, ve kterém Masarykova univerzita sídlí. Po vzoru funkcionalistické architektury, která je pro Brno charakterotvorná, vsadil na hodnoty jednoduchosti a účelnosti, které přenesl do tvarů písmen (stabilní minimalistické linie). Zvolil druh písma monospace, tedy takové, ve kterém je šířka každého písmene stejná. Volba monospace je odkazem na písma používaná v programovacím kódu a má také sloužit jako ,,znak jisté demokratické rovnosti a univerzálního vzdělanostního základu“. Masarykova univerzita se tedy snaží už písmem komunikovat své přednosti, kterými se chce odlišit od jiných univerzit - důraz na modernost, nové technologie, demokratické hodnoty a kvalitní vzdělanostní základ.

Tvorba písma na míru je zpravidla drahá, designový proces precizní a zdlouhavý. Vlastní písmo je však z dlouhodobého hlediska mocným komunikačním nástrojem a může být dobrou investicí, která instituci přinese výhodu nad konkurencí i profit. Otázkou zůstává, jestli čtenář rozezná a akceptuje vizi typografa a jestli se s výsledným designem identifikuje, nebo jej spíše odradí. Nicméně cíle poznatelnosti lze dosáhnout i pokud se design čtenáři nelíbí (viz. ).

ÚKOL

Znáte to, píšete seminárku a dáváte si hodně záležet na obsahu. Pak je zničehonic málo času na doladění nadpisů, barviček, uvozovek a vám zůstává jen pár minut před deadlinem. Zkusíme to jinak! :) Dnes se v rámci posledního semestrálního úkolu (ještě vás čeká závěrečný) podíváme důkladně na typografii a vizuální úpravu dokumentu (layout).

Vyberte si variantu a upravte podle poznatků z modulu:

  1. dokument tak, aby byl co nejvíce čtivý - zpracujte libovolný text a obrázky (např. seminárku, povídku, článek) v rozsahu max. 1800 znaků
  2. slidy v prezentaci tak, aby byly co nejlépe čitelné - zpracujte libovolný text a obrázky (např. prezentaci osobního/školního projektu) v rozsahu min. 5 a max. 10 slidů

Zaměřte se na doporučení z lekce: zvolte vhodné fonty a jejich velikosti, délku a výšku řádku, barevný kontrast s pozadím atd. Nevažte se nyní na povinný MUNI vizuál či jiná pravidla pro grafickou úpravu dokumentů, na které jste možná zvyklí. Designujte si podle svého tak, aby se vám výsledek líbil, ale zároveň tak, aby byl funkční.  :)


Pokuste se vyvarovat častým typografickým pochybením - pomůže vám Typografický tahák nebo naše video o nejčastějších typografických chybách:

Úkol publikujte na svém portfoliu v editovatelném formátu (!) (žádné pdf, pouze formáty, ve kterých si můžeme rozklikat nastavení dokumentu a podívat se důkladně na každé vaše písmeno :), např. doc., rtf., google doc, .ppt, google slides) do pondělí 2.5. Můžete také blíže popsat vaši zkušenost, výzvy, radosti, strasti atd. a interagovat se spolužáky v Miro.

PRO NADŠENCE


Čtěte | čtivou knihu Ten můj font: Stručné dějiny typografie v esejích plnou zajímavých a vtipných příhod o fontech a jejich tvůrcích; oceňovanou a přehlednou Type Rules! The Designer’s Guide to Professional Typography, pokud vás zajímá typografie do hloubky a také prakticky; nebo některou z těchto výborných knih o typografii

Sledujte | podívejte se na netradiční dokument Helvetica, pokud stále nevěříte, že písmo je všude a ovlivňuje naši každodennost

Zapište si | ESB089 Počítačové edice a prezentace, pokud si chcete prohloubit znalosti o typografických zásadách, zjistit, jaký je rozdíl mezi pomlčkou a spojovníkem, které jsou správné české uvozovky, nebo co je kerning