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.

příklad zrna z písem, které nejsou zarovnány

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:

příklad textu se špatným zarovnáním

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é.)


příklad textu se špatným zarovnáním

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.

tři příklady dalších způsobů, jak splnit velké a malé tituly

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.

příklady umístění, relativní váha, hlas a interakce

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.

malý text zarovnaný vlevo nahoře

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ň.

malý text zarovnaný dole vpravo

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:

malý text zarovnaný dole vpravo

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í.

malý text zarovnaný vlevo nahoře

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í.

malý text zarovnaný dole vpravo

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.

malý text zarovnaný dole vpravo

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:

velký text překonává malý text

"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?

velký text vybledl zpět k vyvážení váhy s malým textem

Nad hlavním textem je "Vítejte v digitálním věku". A co to znamená? Zanedbaná, "WWW" poskytuje nápovědu.

příklady, jak velký text může zmizet

Čí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í.

text s problémy

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.

text s řešeními

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.

příklady toho, jak nevhodné písma způsobují problémy

Čtyři výše uvedené kombinace písem se nezdaří z různých důvodů:

  1. 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.
  2. Ale zkuste skript příliš velký a písmena vypadají méně jako rukopis a podobně jako vytesané cesty Illustratoru.
  3. Zapisovské kaligrafické hrany jsou lepší než Texas Hero, ale obrovský vzestup na "b" vrhá kompozici mimo rovnováhu.
  4. 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.

příklady toho, jak hustý a tenký velký text funguje nejlépe

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ů.

generický název blogu v neškodné mátově zelené

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.


tetsuo / kaneda, dialog z poslední poloviny filmu Akira

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.


steampunk, high-tech viktoriánské parní síly

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 ? "


Trajan je krásný a přehnaný v dramatických filmových plakátech

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í?


vzorku 5

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: SxSW je obvykle vykreslena v bitmapovém písmu; to jsou off-značky. Také skriptů v malém textu používejte jen málokdy.

Pomáhá to?

Použijeme tyto lekce k naší původní kompozici.

příklad textu se špatným zarovnáním
vzorku 6

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ářů.