Vytvoření nadpisů s velkým a malým překrývajícím se textem
Nadpisy obsahují obsah.
Můžeme použít mnoho efektů a triků na grafické nadpisy, aby přilákali čtenáře, aby mohli pokračovat ve čtení, nastavit tón nebo učinit jeden z mnoha postav.
Ale někdy nejvíce zřejmé techniky, jako je úprava vizuální váhy a rozložení, pracují mnohem lépe.
Přesahující tituly používají malé množství velkého textu a velké množství malých textů, které komunikují víc, než by to samo o sobě mohlo dělat samo. Zní to rozporuplně? Pouze pokud ignorujete jemné body.
Čtěte dále a zjistěte, jak vytvářet nezapomenutelné nadpisy s překrývajícím se textem.
Co mají výše uvedené liché tvary společně s názvy "WDD" a " {$lang_domain} "? Jsou to nešťastné artefakty, že položili jeden text nad druhou bez ohledu na umístění nebo detail. Tady je útočný obrázek:
Na první pohled je na obrázku výše jasná prezentace názvu blogu a jeho zkratky. Typ písma je oficiální používaný v blogu. jasně oranžová pochází přímo z tématu webu; a oba řádky textu jsou téměř dokonale centrovány.
Je dokonce hláskován a kapitalizován podle stylu blogu. Ale je to amatérský pokus napodobit překrývající se techniku tím, že slabou dlouhou čárou textu na krátkou. (Slabé stránky v tomto příkladu jsou přehnané, ačkoli nejsou neobvyklé.)
Stínování nahoře odhaluje nové tvary vytvořené těmito dvěma texty. Jak dvě řádky se vztahují ke každé a pořadí, ve kterém se čtou, závisí na tom, jak jsou rozloženy. Je více než překrývání textu než nastavení jednoho nad druhým.
Samozřejmě, překrývání není vždy nejlepší způsob, jak uspořádat krátký titul a dlouhý podtitul.
Níže uvedené příklady ukazují některé možné způsoby léčby, kdy návrh vyžaduje něco kreativnějšího, než je obvyklé h1 a h2 Prvky.
Přesahující text má eleganci, kterou nelze snadno duplikovat pomocí HTML (zatím). Dva řádky textu dohromady často představují více než součet každého jednotlivého.
Základy překrývajícího se textu
Přesahující text kontrastuje proti sobě dva řádky typu. Velký text spočívá za malým textem, který často obsahuje více slov. Choulostivé části zajišťují, že obě čáry jsou stejně čitelné, a tak obě spolupracují, namísto proti sobě a udržují celý balíček na téma.
Různé techniky mění vliv překrývajícího se textu.
Zde jsou čtyři hlavní faktory ovlivňující překrývající se text:
- Umístění má co do činění s tím, jak je malý text umístěn vzhledem k velkému textu. To přímo ovlivňuje způsob čtení textu. Je-li malý text směrem doleva, pravděpodobně bude čten jako první (tj. Před velkým textem). Pokud je malý text vpravo dole, bude pravděpodobně čten sekunda.
- Relativní váha se vztahuje na množství pozornosti, které jeden text kreslí vzhledem k druhému. Vzhledem k jeho velikosti má velký text tendenci ovládat. Pokud je však velký text vybledlý na pozadí, malý text vyskočí.
- Hlas (především písmo a barva) se vztahuje k estetickým rozhodnutím, které nastavuje náladu typografie.
- Interakce je nejpřísnější. To souvisí s tím, jak formáty písmen textu pracují navzájem. Interakce závisí na umístění, písmu a samotných charakterech. Cílem je vizuálně spojit zdánlivě opačné linie textu dohromady.
Umístění ovlivňuje, jak jsou čteny čáry jako celek
Pořadí, ve kterém chcete, aby si návštěvníci přečetli text, je nejdůležitějším faktorem při určování způsobu uspořádání řádků typu. Angličtina je jazyk zleva doprava, malý text vlevo bude číst výrazně odlišný od malého textu vpravo.
S malým textem v levém horním rohu se grafika nahoře načte takto: "Vyhněte se jim jako mor. Klišé. "Přesto jsou" klišé "napsány tak velké, aby si je lidé mohli přečíst jako první. Rovnováha mezi velikostí a umístěním položí obě linie na stejnou úroveň.
Výše uvedená verze je méně jednoznačná. Posun malého textu do dolní pravice dává jasný přednost velkému textu. Nyní se čte jako: "Clichés: Vyhněte se jim jako mor."
Nadpisy výše jsou zaměnitelné, protože každá linie je víceméně nezávislá. Když linky závisí na sobě, umístění je kritičtější. Zde je příklad špatné práce:
Umístěním malého textu do pravé dolní čáry visí čtenáři. "Mor: Vyhýbejte se klišé jako ..."? Přestože to většina lidí zjistí, moment váhání je rozdíl mezi průměrnou a dobrou prezentací.
Právě výše uvedené uspořádání je nejlepší, protože malý text je první částí věty. Pokud chceme malý text vpravo, velký text bude muset tvořit první část věty. Ale opět je tu zatracení.
V závislosti na větě nestačí použít pouze první slovo pro velký text, protože řádky textu musí pracovat jednotlivě i společně. Text výše rozděluje frázi nesprávně. Příkazové sloveso "vyhnout se" nemá samo o sobě dostatečný význam, aby bylo zaručeno nezávislosti. A "klišé jako mor" zní jako bychom porovnávali přebytečné fráze s chorobami, namísto předepisování vyhýbání se oběma. Význam všech grafických změn.
Dokonce i když musíme zmenšit velký text tak, aby se vešla, použije se dvě slova (úplná fráze) pro velký text, aby se oba řádky lépe četly.
Při překrývajícím se textu je získání správné fráze přes rozložení stejně důležité jako výběr barev a písma.
Rovnováha dominance tím, že pracuje s, nikoli proti pozadí
Ačkoli je cílem velkého textu ovládat, může také snadno potlačit malý text. Ale to není vždy špatné. Dobrá rovnováha neznamená, že by velký text neměl ovládat malý text, ale spíše ukazovat jeho relativní důležitost.
Velikost velkého textu přirozeně činí hlavní prohlášení. To je skvělé, pokud malý text má pouze podporovat velký text. Například:
"WWW" poprvé vyskočí. "Vítejte v digitálním věku", který rozvíjí myšlenku a podporuje tři Ws. Ale co když měl malý text přinést hlavní zprávu?
Nad hlavním textem je "Vítejte v digitálním věku". A co to znamená? Zanedbaná, "WWW" poskytuje nápovědu.
Čím více se velký text rozkládá na pozadí, tím menší je důležitost. Když je velký text stěží viditelný, malý text se stává hlavním prvkem.
Interakce je v detailech
Tvar písma je klíčem k jeho výraznému vzhledu. Když se dva řádky textu překrývají, vytvářejí kapsy, zvláštní tvary a jiné jemné rozptýlení.
Nad velkým oranžovým a malým bílým textem se přidávají zbytečné nepořádek na počitadla (tj. Díry uvnitř písmen). Samotný každý extra bit nebrání čitelnosti. Ale to je součástí problému: protože nejsou dost špatné, aby se text stal nečitelným, mohli by být snadno zamítnuty jako nedůležité.
Pro maximální čitelnost musíme zachovat písmena malého textu.
Jak je uvedeno výše, mírné úpravy vyloučily rušení:
- Mezi svorkami ve tvaru svorky velkého písmena "C" je slovo "text" mnohem jasnější.
- Všimněte si, jak svislé stonky "r" a "n" v "vysvětlujícím" splňují hrany velké "C."
- Čítače v "p" a "o" v "podporující" nyní obsahují pouze černou barvu.
- Zrušili jsme velké písmeno "A", aby se malá písmena "s" v "podporující" jasněji zobrazovala.
Cílem je zachovat tvary malých písmen, i když čtenáři si toho nevšimnou.
Typ písma je rozdíl
Ne každý typ písma je vhodný jak pro velké, tak pro malé velikosti. Na dostatečně malou velikost mohou zmizet detaily písma. A detaily, které jsou zvětšeny na velké velikosti, mohou někdy vytvářet neobvyklé problémy.
Čtyři výše uvedené kombinace písem se nezdaří z různých důvodů:
- Tento typ písma skriptu byl navržen tak, aby napodoboval rukopis. Jeho odřené hrany obsahují stovky vektorových bodů, z nichž většina se ztrácí v malé velikosti.
- Ale zkuste skript příliš velký a písmena vypadají méně jako rukopis a podobně jako vytesané cesty Illustratoru.
- Zapisovské kaligrafické hrany jsou lepší než Texas Hero, ale obrovský vzestup na "b" vrhá kompozici mimo rovnováhu.
- Lucida Blackletter je příliš složitý, aby byl praktický jako pozadí, přinejmenším bez velmi pečlivého uspořádání malého textu. Také její jedinečný charakter zmizí v malé velikosti. Jsou to tahače a serify, nebo je to jen fuzzy?
Pro velký text, příliš hustý nebo příliš tenký je správný
Když se překrývají texty, myslete si na velký typ jako text i pozadí . Čím komplikovanější jsou dopisy, tím více textury se stávají. To znamená, že je pravděpodobné, že v malém textu skryjí formáty písmen.
Chcete-li se vyhnout problémům, zkuste tukovitý nebo tenký. Extra silné a extra lehké tvary fungují lépe než pravidelná váha stejné tváře. Oba způsobují menší zásahy, protože malý text má menší šanci zasáhnout hranu.
Například velký text ve výše zmíněných variacích Světlo a Černá zasáhl méně malých písmen. Samozřejmě každá tvář - a každá sada slov - je jiná. Obecně platí, že střední zátěže způsobují více problémů než tenké a husté závaží.
Praktické příklady
Jak by to mohlo fungovat s pravděpodobnějším textem? Zde je několik příkladů překrývajících se textů.
Proč funguje: Vybledlý do pozadí, velký text dává malému textu jasnou prioritu. Geometrické tvary Musea mají jen málo rozptýlení.
Potenciální problémy: Toto překrytí nebude fungovat, pokud by malý text byl kratší. Chcete-li zprávu přenášet, malý text musí překrývat všech šest písmen velkého textu.
Proč to funguje: Malý text překračuje pouze tři tlusté a dvě tenké tahy barev. Spousta kontrastu, dokonce i pro teplou barevnou paletu.
Potenciální problémy: Zdá se, že energetické hrany velkého textu fungují proti elegantním liniím malého textu.
Proč to funguje: Oba řádky textu mají ostré geometrické tvary a jsou přesně zarovnány.
Možné problémy: Malý text vypadá trochu ztraceně? Do písma skutečně odráží ducha " steampunk ? "
Proč to funguje: Velkorysé sledování ve velkých písmenech a čisté čáry v obou textech činí každý znak jasný.
Potenciální problémy: Zkontroluje texturu pozadí příliš tvrdý typ na čtení?
Proč to funguje: Tlustý velký text je čitelný sám o sobě, zatímco intimní malý text přináší čtení. Několik doplňkových výplní udržuje barevnou hloubku hlavního písmena "S".
Potenciální problémy:
Pomáhá to?
Použijeme tyto lekce k naší původní kompozici.
Proč to funguje:
- Velký text se mísí s tmavým pozadím, ale jeho velikost zajišťuje viditelnost.
- Jasná barva činí malý text vystupující. Zarovnání vpravo ji vyvažuje.
- Pečlivé rozestupy malých písmen a jednoduchost velkých písmen udržují konflikt na minimu.
- Dvě písma sdílejí společné prvky. Například, dvě "W" s zarovnat, přestože v různých tvářích.
Napsaný výhradně pro Webdesigner Depot Ben Gremillion . Ben je webdesigner, který řeší komunikační problémy s lepším designem.
Jaké jsou některé možné problémy posledního příkladu? Podělte se o své myšlenky do níže uvedených komentářů.