Prostě napíšeš text, zvolíš nějaký ten font (kromě comic sans of course) a je to. Nebo ne? Pro copywritery a designéry je typografie základní nástroj, který může jejich práci buď vynést do nebe, nebo zakopat sto metrů pod zem.
Dnes ti přinášíme přehled typografických pravidel a nástrojů i pořádnou porci typografické inspirace.
Úvod do typografie: Proč na ní záleží?
Začněme pěkně od sherifového A a pojďme spolu až po bezpatkové Z. Typografie není jenom o výběru správného fontu, i když je to její podstatná část. Zahrnuje všechno od zarovnání textu přes mezery mezi řádky (leading) a písmeny (kerning) až po správné použití boldu nebo kurzívy.
Když copywriter nebo designer všechno tohle ovládá, text je catchy a člověka zkrátka chytne a nepustí. Když má ale ten, kdo sází texty, v typografii mezery (a nemyslíme teď ty správné mezery mezi písmeny), může to čtenáře zdržovat, mást nebo dokonce úplně odradit od čtení.
V kontextu copywritingu i designu je typografie zásadní. Pro copywritery je typografie nástroj, který zajistí, že jejich texty dobře zní i dobře vypadají a taky se snadno čtou. Pro designéra je to prostředek, jak zajistit, že vizuální stránka textu ladí s celkovým vzhledem a atmoškou projektu.
Vitrium Opus - 3D Glass Typography Posters by Ion Lucin
Zdroj: behance.net
Typografická pravidla pro lepší čitelnost
Psané slovo a sdělení má mega velkou moc, ale ty ho musíš umět správně podat, aby ji mohlo využít. Tady je pár klíčových principů, které ti pomůžou udržet vysoce čtivý obsah:
#1 Vizuální hierarchie
Když pěkně rozčleníš text pomocí různých velikostí a stylů písma, hned to oku lahodí víc. Rozlišuj nadpisy, podnadpisy a běžné texty. Zaměř se na to, aby rozdíly mezi jednotlivými úrovněmi hierarchie byly dostatečně zřetelné, ale nepřežeň to.
Tip pro praxi: Dej si záležet na výběru zajímavého fontu pro nadpisy.
Typografie je tak trochu magic
Inspo: graphicdesignforum.com
#2 Kontrast
Tady musíš brát v úvahu klasicky barvy, jako u běžného designu, a navíc taky velikost a tloušťku fontu. Ale základ zůstává stejný – tvým cílem je zajistit dobrou čitelnost pro všechny.
Když dáš vysoký kontrast mezi text a pozadí (černý text na bílém pozadí), zvládnou ho přečíst třeba i ti, co vidí hůř. Takový světle šedý text na bílém pozadí potom může na první pohled vypadat dobře, ale přečíst ho je tak trochu peklíčko.
Když kombinuješ různé fonty v jednom projektu, musíš taky myslet na vizuální rovnováhu. Kombinace patkového písma pro nadpisy a bezpatkového pro tělo textu může fungovat velmi dobře, pokud je kontrast mezi nimi dostatečný, ale ne příliš výrazný.
Tip pro praxi: Otestuj si kontrast písma online v appce Contrast Checker.
Příklad škálování kontrastních hodnot – od nízkého kontrastu až po vysoký
Zdroj: venngage.com
#3 Výběr správného fontu
Tohle bývá pain nejednoho zkušeného designéra nebo copywritera. Jak vybrat fonty, které k sobě ladí a vyvolávají tu správnou emoci? Pomůže ti naše minitabulka a taky nástroje, které najdeš na konci článku.
Tip pro praxi: V jednom projektu kombinuj max 2 až 3 různá písma.
#4 Správné mezery
Mezery mezi písmeny (kerning), řádky (leading) a odstavci (spacing) stojí za tím, jestli budou čtenáři tvoje texty milovat nebo nenávidět. Obsah může být sebelepší, ale když jsou písmena nalepená moc na sobě, je to pro spoustu lidí trigger. A pokud necháš mezery naopak moc velké, text působí roztříštěně.
Kerning: Úprava mezer mezi jednotlivými znaky – spousta programů to dělá automaticky, ale hlavně u tištěných materiálů musíš občas zapojit i manuální (do)ladění.
Leading: Vertikální mezera mezi řádky textu. Ideálně by měla být o něco větší než výška písma.
Odstavce a mezery mezi nimi: Odstavce jsou důležité pro strukturování textu. Dodržování konzistentních mezer mezi odstavci pomáhá udržet čitelnost a přehlednost.
Tip pro praxi: Ideální leading je asi 120–150 % výšky textu.
#5 Responzivní typografie
Mobil, tablet, monitor… na každém zařízení bude text vypadat trochu jinak. Úkolem zkušeného UX/UI designéra je zajistit text responzivní pro všechny obrazovky, ať už svůj oblíbený content hltáš na telefonu nebo v noťasu.
Pro responzivní typografii používej relativní jednotky (em nebo rem) namísto pevných hodnot v pixelech. Tak se velikost písma automaticky přizpůsobí velikosti obrazovky.
Dej si pozor i na flexibilní rozvržení (layout), díky kterému se text přizpůsobí různým šířkám a výškám screenů bez ztráty čitelnosti a dalších erorů.
Tip pro praxi: Zkontroluj si text na různých zařízeních. Můžeš k tomu použít developerské rozhraní v prohlížeči nebo online simulátor Responsive Design Checker.
#6 Přístupnost (Accessibility)
Dobrý designér vždycky myslí na to, aby byl jeho design v prvé řadě funkční, a platí to i pro typografii. Akurátní kontrast, dostatečně velké písmo a možnost jeho zvětšení bez toho, aby to rozbilo celý design – tohle je zkrátka nutnost. Mysli i na ty, kdo mají nějaká omezení.
Tip pro praxi: Otestuj si přístupnost svého designu v bezplatné online aplikaci WAVE.
#7 Konzistence
Jasně, je těžké vybrat si z těch desítek parádních fontů, nad kterými ti srdce plesá. Ale nacpat jich 5 do jednoho textu? No way! Buď konzistentní a udrž čistý a profi vzhled.
Když už nastavíš pro svůj projekt typografická pravidla, dodržuj je bez výjimky i napříč všemi platformami a médii. Přeskakování mezi různými fonty, velikostmi a styly by totiž působilo neprofesionálně a k budování důvěry ve značku to zrovna nepřispívá.
Tip pro praxi: Jestli vás na projektu pracuje víc, shrňte typografická pravidla do praktického průvodce a vyvěste si ho někde na cloudu, ať se k němu dostanou všichni z týmu.
#8 Branding a emoce
Fonty jsou mocné a typografie dokáže posílit identitu značky i přenášet emoce. Písmo by vždycky mělo odpovídat tónu značky – například seriózní banka bude nejspíš používat jinou typografii než tvůrce handmade vláčků pro děti.
Tip pro praxi: Písmo, které použiješ, by mělo ladit s image brandu a mělo by nést stejnou emoci.
FFTC Brand Identity by HOLOGRAPHIK
Když text a design kopou za jeden tým
Webdesignéři a UX/UI designéři typografická pravidla ovládají – nebo by alespoň měli ovládat – levou zadní. Když jsi senior copywriter, nejspíš se k typografii dostaneš taky, a proto je důležité, abyste společně vytvořili catchy texty, které mají kromě skvělého obsahu taky luxusní formu.
Jak má vypadat dokonalá symbióza mezi oběma týmy? Pojďme na to mrknout zblízka.
Spolupráce od začátku
Senior copywriter a designér by spolu měli spolupracovat už od začátku projektu a ideálně by měli zapojit i marketingové oddělení. Společné diskuze o cílovce, tone of voice a cílech projektu povedou k tomu, že design i text budou v dokonalé harmonii.
Testování a feedback
Tady už jsme na poli UX/UI. Když je text i design ready to go, je důležité ho otestovat na reálných lidech. Vychytali jsme detaily? Co hierarchie textu, je správně nastavená? Jak moc je to celé (ne)čitelné? Když dostaneš upřímný feedback, můžeš ladit až k dokonalosti.
Pravidla a šablony
Některé projekty jsou jednorázovky, typografická pravidla nastavíš jednou a je hotovo. Větší projekt už vyžaduje důkladnější péči. Šablony a jasné nastavení pravidel zaručí, že všechno psané bude konzistentní. Mimochodem při tom buduješ brand, protože typografie je důležitý prvek každé značky.
Fonts hanging out by @ellecordova
Zdroj: instagram.com
Kde hledat typografickou inspiraci?
Měj oči na šťopkách a rozhlížej se kolem sebe, typografie je totiž všude. Kouká na tebe z každého obalu v regálu tvého oblíbeného obchodu a ovlivňuje tě na nevědomé úrovni. Chceš se nechat inspirovat? Zvědom si to.
Dívej se na přebaly produktů, pečlivě si prohlížej každou reklamu, která se kolem tebe mihne, prozkoumej webovky, které se ti líbí. Na webu máš tu výhodu, že po rozkliknutí DevTools stránky můžeš zjistit název použitého fontu. Tištěné designy si vyfoť a projeď online appkou WhatTheFont nebo Font Squirrel Matcherator.
Dalším skvělým zdrojem typografické inspirace jsou servery Dribbble nebo Behance. Online portfolia, kde najdeš spoustu use cases. Texty, barvy a jejich použití v reálných projektech – tady se můžeš inspirovat od opravdových profíků. Let's go!
Strukturam Variable by Virág Sándor and Media & Design Eger
Zdroj: behance.net
Praktické online nástroje typografa
Základní typografická pravidla už znáš, teď je čas si hrát. Máme pro tebe pár tipů, kde si můžeš nové skills hned procvičit v praxi.
Skvělý zdroj bezplatných písem, která jsou optimalizovaná pro webové použití.
Ideální nástroj pro rychlé vytváření grafických návrhů s možností ladění typografie. A taky tam najdeš spoustu inspa.
Nevíš, jak kombinovat oblíbené fonty? Tahle appka to udělá za tebe.
Zdroj kvalitních a free fontů pro komerční použití. Font Squirrel obsahuje taky nástroj Webfont Generator, který umí konvertovat jakýkoli font do formátu optimalizovaného pro webové stránky.
Skvělá stránka pro inspiraci a tipy na aktuální typografické trendy. Ukazuje reálné příklady, jak různé fonty vypadají v praxi na různých webových stránkách. Najdeš tam seznamy fontů, které se hodí pro různé účely.
Už víš jak a proč
Typografie je mocný nástroj, který ladí texty a vnáší do nich emoce. Je důležité si taky uvědomit, že skvělá typografie není jenom o estetice, ale taky o funkčnosti. Jestli jsou psaní nebo úprava textu součástí tvojí profese, typografie tě určitě nemine.
Tak mrkni na inspiraci, projeď si všechny nástroje a pohraj si s fonty. A jestli chceš vědět víc, přihlas se na některý z našich online kreativních kurzů, kde typografii učí profíci, kteří s ní přicházejí denně do kontaktu.
Buď přímo kurz Základy typografie s Vojtěchem Kollertem nebo třeba kurz pro pokročilé copywritery s Petrou Rybkovou.