Skapa rubriker med stor och liten överlappande text

Rubriker presenterar innehåll.

Vi kan tillämpa många effekter och tricks till grafikbaserade rubriker för att locka läsarna att fortsätta läsa, att ställa in tonen eller för att få en rubrik att sticka ut bland många.

Men ibland fungerar de mest uppenbara teknikerna, som att ändra visuell vikt och layout, mycket bättre.

Överlappande titlar använder en liten mängd stor text och en stor mängd små text för att kommunicera mer än en vanlig rubrik skulle kunna göra på egen hand. Låter motsägelsefullt? Endast om du ignorerar de fina poängen.

Läs vidare om hur du skapar minnesvärda rubriker med överlappande text.

Vad har de udda formerna ovan att göra med namnen "WDD" och " {$lang_domain} ”? De är olyckliga artefakter från att ha lagt en text över den andra utan hänsyn till placering eller detalj. Här är den förekommande bilden:

I ett ögonblick är grafiken ovan en enkel presentation av ett bloggnamn och dess förkortning. Tecknet är den officiella som används av bloggen; Den ljusa orange kommer direkt från webbplatsens tema; och båda textlinjerna är centrerade nästan perfekt.

Det är även stavat och kapitaliserat enligt bloggens stil. Men det är ett amatöriskt försök att efterlikna överlappningstekniken genom att slå en lång rad text på en kort. (Svagheterna i detta exempel är överdrivna, men inte ovanliga.)

Skuggningen ovan visar de nya formerna som skapats av de två bitarna av text. Hur de två linjerna relaterar till var och en i vilken ordning de läses beror på hur de läggs ut. Det finns mer att överlappa text än att sätta en ovanpå varandra.

Naturligtvis är överlappning inte alltid det bästa sättet att ordna en kort titel och lång underrubrik.

Nedanstående exempel visar några möjliga behandlingar när en design kräver något mer kreativ än vanligt h1 och h2 element.

Överlappande text har en elegans som inte enkelt kan dupliceras med HTML (ännu). Två textlinjer sammanlagt uppgår ofta till mer än summan av var och en för sig.

Grundläggande om överlappande text

Överlappande text kontrasterar två linjer av typ mot varandra. Den stora texten ligger bakom den lilla texten, som ofta innehåller flera ord. De knepiga delarna ser till att båda linjerna är lika läsbara, vilket gör att båda arbetar tillsammans istället för mot varandra och håller hela paketet på ämnet.

Olika tekniker ändrar effekten av överlappande text.

Här är de fyra huvudfaktorer som påverkar överlappande text:

• Placering har att göra med hur den lilla texten placeras i förhållande till den stora texten. Detta påverkar direkt hur texten läses. Om den lilla texten är uppe till vänster kommer den troligtvis att läsas först (dvs före den stora texten). Om den lilla texten är längst ned till höger kommer den troligtvis att läsas andra.
• Relativ vikt hänvisar till mängden uppmärksamhet en bit text ritar i förhållande till den andra. Med tanke på dess storlek tenderar den stora texten att dominera. Om den stora texten är blekad i bakgrunden kommer den lilla texten att hoppa ut.
• Röst (huvudsakligen typsnitt och färg) hänför sig till de estetiska val som ställer in stämningen för typografi.
• Interaktion är det svåraste. Det handlar om hur brevformerna i texterna fungerar med varandra. Interaktion beror på placering, typsnitt och karaktärerna själva. Målet är att visuellt knyta till synes motsatta linjer av text tillsammans.

Placering påverkar hur linjer som helhet läses

Den ordning i vilken du vill att besökare ska läsa texten är den viktigaste faktorn för att bestämma hur man ordnar linjerna av typen. Engelska är ett vänster-till-höger språk, liten text till vänster kommer att läsa avsevärt annorlunda än liten text till höger.

Med den lilla texten i övre vänstra hörnet läser grafen ovan som sådan: "Undvik dem som pesten. Clichés. "Fortfarande är" klichéer "skrivna så stora att folk kan läsa det först. Balansen mellan storlek och placering sätter de två linjerna på lika villkor.

Ovanstående version är mindre tvetydig. Att skaka den lilla texten till höger ger tydlig prioritet till den stora texten. Nu lyder det som: "Clichés: Undvik dem som pesten."

Rubrikerna ovan är utbytbara eftersom varje rad är mer eller mindre oberoende. När linjerna är beroende av varandra är placeringen mer kritisk. Här är ett exempel på ett dåligt jobb:

När du lägger på den lilla texten i nedre högerbladsläsare hänger. "Pest: Undvik clichés som ..."? Trots att de flesta kommer att räkna ut det är ögonblicket tvekan skillnaden mellan en medioker och en bra presentation.

Arrangemanget ovanför är bäst eftersom den lilla texten är den första delen av meningen. Om vi ​​vill sätta den lilla texten till höger, måste den stora texten bilda den första delen av meningen. Men igen är det en hitch.

Beroende på meningen är det inte tillräckligt med bara det första ordet för den stora texten, eftersom textlinjerna måste fungera individuellt såväl som tillsammans. Texten ovan splittrar frasen felaktigt. Det kommande verbet "undvik" har inte tillräckligt med mening för sig själv för att motivera oberoende. Och "klichéer som pesten" låter som att vi jämför överutnyttjade fraser till sjukdom, istället för att förskriva undvikande av båda. Betydelsen av hela grafiken ändras.

Även om vi måste krympa den stora texten för att passa, använder vi två ord (en komplett fras) för den stora texten gör båda linjerna bättre.

Med överlappande text är det lika viktigt att få rätt frasering genom layout så som färg och teckensnitt.

Balans Dominans genom att arbeta med, inte mot bakgrunden

Även om syftet med stor text är att dominera, kan det också enkelt smeder små text också. Men det är inte alltid dåligt. God balans handlar inte om att förhindra stor text från dominerande liten text, utan snarare om att visa sin relativa betydelse.

Storleken på den stora texten gör det naturligtvis det viktigaste uttalandet. Det är bra om den lilla texten bara är tänkt att stödja den stora texten. Till exempel:

"WWW" hoppar ut först. "Välkommen till den digitala tiden" utarbetar idén, som stöder de tre Ws. Men vad händer om den lilla texten skulle bära huvudbudskapet?

Ovan är huvudtexten "Välkommen till den digitala tiden". Och vad betyder det? Blekat bakom, "WWW" ger en ledtråd.

Ju mer den stora texten smälter in i bakgrunden, ju mindre betydelse det tar på. När den stora texten är knappt synlig blir den lilla texten huvudelementet.

Interaktion finns i detaljerna

Formen på en typsnitt är nyckeln till dess distinkta utseende. När två textlinjer överlappar varandra skapar de fickor, udda former och andra subtila distraktioner.

Ovanför lägger den stora orangen och den lilla vita texten onödig rodnad mot räknarna (dvs hålen i bokstäverna). Bara, varje extra bit hindrar inte läsbarheten mycket. Men det är en del av problemet: för att de inte är illa nog för att göra texten olöslig, kan de lätt avvisas som oväsentliga.

För maximal läsbarhet måste vi behålla de små bokstäverna.

Som visat ovan har små justeringar avbrutit störningen:

• Förskjutits mellan de klämliknande terminalerna i den stora "C", ordet "text" är nu mycket tydligare.
• Lägg märke till hur de vertikala stammarna av "r" och "n" i "explanatory" möter kanterna på den stora "C."
• Räknarna i "p" och "o" i "stödjande" innehåller nu bara svart.
• Vi har klippt stor bokstaven "A" för att göra små bokstäver "s" i "stödjande" tydligare.

Målet är att bevara formerna för de små bokstäverna, även om läsarna inte märker.

Typsnitt gör en skillnad

Inte alla teckensnitt är lämpliga för både stora och små storlekar. I en tillräckligt liten storlek kan en typsnittets detaljer försvinna. Och detaljer som förstoras i stor storlek kan ibland skapa ovanliga problem.

De fyra teckensnittskombinationerna ovan misslyckas av olika anledningar:

1. Detta skripttecken var utformat för att efterlikna handstil. Dess ragged kanter innehåller hundratals vektorgrader, varav de flesta går förlorade i en liten storlek.
2. Men gör manuset för stort och bokstäverna ser mindre ut som handskrift och mer som scalloped Illustrator-banor.
3. Zapfinos kalligrafiska kanter går bättre än Texas Heroes, men den enorma uppstigaren på "b" kastar kompositionen ur balans.
4. Lucida Blackletter är för komplicerad för att vara praktisk som bakgrund, åtminstone utan mycket noggrann arrangemang av den lilla texten. Dess unika karaktär försvinner också i liten storlek. Är de swoops och serifs, eller är det bara fuzzy?

För stor text, för tjock eller för tunn är bara rätt

När du överlappar text, tänk på stor typ som både text och bakgrund . Ju mer komplicerade bokstäverna är desto mer textur-liknande blir de. Det vill säga att de är mer benägna att dunkla brevformerna i den lilla texten.

För att undvika problem, gå fett eller tunt. Extra tjocka och extra ljusformer fungerar bättre än en vanlig vikt på samma ansikte. Båda påverkar mindre eftersom den lilla texten har mindre chans att slå en kant.

Till exempel slog den stora texten i ljus och svarta variationerna ovan färre små bokstäver. Naturligtvis är varje ansikte - och varje uppsättning ord - annorlunda. Men i allmänhet ger medelsvikter större problem än tunna och tjocka vikter.

Praktiska exempel

Hur kan detta fungera med mer sannolik text? Här är några exempel på överlappande text.

Varför det fungerar: Visst i bakgrunden, den stora texten ger tydlig prioritet till den lilla texten. Museos geometriska former har få distraheringar.

Potentiella problem: Denna överlappning skulle inte fungera om den lilla texten var kortare. För att bära meddelandet måste den lilla texten överlappa alla sex bokstäverna i den stora texten.

Varför det fungerar: Den lilla texten går över endast tre tjocka och två tunna färgstreck. Massor av kontrast, även för en varm färgpalett.

Potentiella problem: Den stora textens energetiska kanter verkar fungera mot de smarta textens eleganta linjer.

Varför det fungerar: Båda textraderna har skarpa geometriska former och justeras exakt.

Potentiella problem: Ser den lilla texten lite bort? Skyltar typsnittet verkligen andan av " steampunk ?”

Varför det fungerar: Generös spårning i stora bokstäver och rena linjer i båda texterna gör varje tecken klart.

Potentiella problem: Gör bakgrundsstrukturen den typ som är för svår att läsa?

Varför det fungerar: Den tjocka stora texten är läsbar på egen hand, medan den intima små texten inbjuder att läsa. Flera extra fyllningar upprätthåller färgdjupet för huvudstaden "S" bokstäver.

Potentiella problem: SxSW återges typiskt i en bitmappstyp; dessa är off-brand. Använd också skript i liten text sparsamt.

Men hjälper det?

Låt oss tillämpa dessa lektioner i vår ursprungliga komposition.

Varför det fungerar:

• Den stora texten smälter in i den mörka bakgrunden, men dess storlek ser till att den är synlig.
• Den ljusa färgen gör att den lilla texten stannar ut. Riktlinjen balanserar den.
• Noggrann avstånd mellan de små bokstäverna och enkelheten hos de stora bokstäverna håller konflikter till ett minimum.
• De två tecknen delar gemensamma element. Till exempel, de två "W" s-linjerna, trots att de ligger i olika ansikten.

Skriven uteslutande för Webdesigner Depot av Ben Gremillion . Ben är en webbdesigner som löser kommunikationsproblem med bättre design.

Vad är några av de potentiella problemen i det sista exemplet? Vänligen dela dina tankar i kommentarerna nedan.

• ← 10 Ikoniska teckensnitt och varför du aldrig ska använda dem
• 12 viktiga regler att följa vid utformning av en logotyp →