Opret overskrifter med stor og lille overlappende tekst

Overskrifter introducerer indhold.

Vi kan anvende mange effekter og tricks til grafikbaserede overskrifter for at lokke læserne til at fortsætte med at læse, for at indstille tonen eller for at gøre en overskrift skiller sig ud blandt mange.

Men nogle gange fungerer de mest oplagte teknikker, som f.eks. Ændring af synsvægt og layout, meget bedre.

Overlappende titler bruger en lille smule stor tekst og en stor mængde små tekst til at kommunikere mere end en almindelig overskrift kunne gøre alene. Lyder modstridende? Kun hvis du ignorerer de fine punkter.

Læs videre for at lære at lave mindeværdige overskrifter med overlappende tekst.

Hvad har de ulige former ovenfor med navne "WDD" og " {$lang_domain} ”? De er uheldige artefakter fra at have lagt en tekst over den anden uden hensyn til placering eller detalje. Her er det fornærmende billede:

Et overblik, ovenstående grafik er en retfærdig præsentation af et blognavn og dets forkortelse. Skrifttypen er den officielle, der bruges af bloggen; den lyse appelsin kommer direkte fra webstedets tema; og begge tekstlinjer er centreret næsten perfekt.

Det er endda stavet og kapitaliseret i henhold til bloggens stil. Men det er et amatørligt forsøg på at efterligne den overlappende teknik ved at slå en lang række tekst på en kort. (Svaghederne i dette eksempel er overdrevne, men ikke ualmindelige.)

Skyggen ovenfor viser de nye former, der er skabt af de to stykker tekst. Hvordan de to linjer vedrører hver og den rækkefølge, de læser, afhænger af, hvordan de er lagt ud. Der er mere til overlappende tekst end at indstille en oven på den anden.

Selvfølgelig er overlapning ikke altid den bedste måde at arrangere en kort titel og lang undertitel på.

Nedenstående eksempler viser nogle mulige behandlinger, når et design kræver noget mere kreativt end normalt h1 og h2 elementer.

Overlappende tekst har en elegance, der ikke nemt kan duplikeres med HTML (endnu). To tekstlinjer sammen udgør ofte mere end summen af ​​hver enkelt.

Grundlag for overlappende tekst

Overlappende tekst kontrasterer to linjer af typen mod hinanden. Den store tekst hviler bag den lille tekst, som ofte indeholder flere ord. De vanskelige dele sikrer, at begge linjer er lige så læselige, at begge arbejder sammen i stedet for mod hinanden og holder hele pakken på emnet.

Forskellige teknikker ændrer effekten af ​​overlappende tekst.

Her er de fire hovedfaktorer, der påvirker overlappende tekst:

• Placering har at gøre med, hvordan den lille tekst er placeret i forhold til den store tekst. Dette påvirker direkte, hvordan teksten læses. Hvis den lille tekst er øverst til venstre, vil den sandsynligvis blive læst først (dvs. før den store tekst). Hvis den lille tekst er i bunden til højre, vil den sandsynligvis blive læst anden.
• Relativ vægt refererer til mængden af ​​opmærksomhed et stykke tekst trækker i forhold til det andet. På grund af sin størrelse har den store tekst tendens til at dominere. Men hvis den store tekst er falmet i baggrunden, så vil den lille tekst springe ud.
• Stemme (hovedsagelig skrifttype og farve) vedrører de æstetiske valg, der sætter stemningen i typografien.
• Interaktion er den vanskeligste. Det har at gøre med, hvordan bogstaverne af teksterne virker sammen med hinanden. Interaktion afhænger af placering, skrifttype og tegnene selv. Målet er at visuelt binde tilsyneladende modsatte linjer med tekst sammen.

Placering påvirker, hvordan linjer som hele læses

Den rækkefølge, hvor du vil have besøgende til at læse teksten, er den vigtigste faktor for at bestemme, hvordan du ordner linjerne af typen. Engelsk er et venstre til højre sprog, lille tekst til venstre vil læse væsentligt anderledes end lille tekst til højre.

Med den lille tekst i øverste venstre hjørne læses grafikken ovenfor som sådan: "Undgå dem som plaget. Clichés. "Alligevel er" clichés "skrevet så store, at folk måske læser det først. Balancen mellem størrelse og placering sætter de to linjer på lige fod.

Ovenstående version er mindre tvetydig. At skubbe den lille tekst til nederst til højre giver tydelig forrang til den store tekst. Nu lyder det som: "Clichés: Undgå dem som pesten."

Overskrifterne ovenfor er udskiftelige, fordi hver linje er mere eller mindre uafhængig. Når linjerne er afhængige af hinanden, er placeringen mere kritisk. Her er et eksempel på et dårligt job:

At lægge den lille tekst i de nederste højre blade læser hængende. "Pest: Undgå klichéer som ..."? Selvom de fleste mennesker vil finde ud af det, er tøven med forskellen mellem en middelmådig og en god præsentation.

Ordningen lige ovenfor er bedst, fordi den lille tekst er den første del af sætningen. Hvis vi ønsker at sætte den lille tekst til højre, så skal den store tekst udgøre den første del af sætningen. Men igen er der et hitch.

Afhængigt af sætningen er det ikke nok at bruge bare det første ord til den store tekst, fordi tekstlinjerne skal fungere individuelt såvel som sammen. Teksten ovenfor opdeler sætningen ukorrekt. Det befalende verb "undgå" har ikke nok mening i sig selv til at berettige uafhængighed. Og "klichéer som pesten" lyder som om vi sammenligner overbrugte sætninger med sygdom, i stedet for at ordinere undgåelse af begge. Betydningen af ​​hele grafikken ændres.

Selvom vi skal krympe den store tekst til at passe, bruger to ord (en komplet sætning) til den store tekst, at begge linjer læser bedre.

Med overlappende tekst er det lige så vigtigt at få den rigtige formulering gennem layout, som farve og skrifttype valg.

Balance Dominans ved at arbejde med, ikke mod, baggrunden

Selv om formålet med stor tekst er at dominere, kan den også let smøre lille tekst også. Men det er ikke altid dårligt. God balance handler ikke om at forhindre stor tekst i at dominere lille tekst, men snarere om at vise deres relative betydning.

Størrelsen af ​​den store tekst gør det naturligvis den vigtigste erklæring. Det er godt, hvis den lille tekst kun skal understøtte den store tekst. For eksempel:

"WWW" springer først ud. "Velkommen til den digitale tidsalder" uddyber ideen og støtter de tre Ws. Men hvad nu hvis den lille tekst skulle bære hovedbudskabet?

Ovenfor er hovedteksten "Velkommen til den digitale tidsalder." Og hvad betyder det? Faded bag, "WWW" giver et tip.

Jo mere den store tekst blandes i baggrunden, desto mindre er det påkrævet. Når den store tekst er knap synlig, bliver den lille tekst hovedelementet.

Interaktion er i detaljerne

Formen på et skrifttype er nøglen til sit særprægede udseende. Når to tekstlinjer overlapper hinanden, skaber de lommer, ulige former og andre subtile distraktioner.

Ovenfor tilføjer den store oransje og den lille hvide tekst unødvendig rod i tællerne (dvs. hullerne inde i bogstaverne). Alene forhindrer hver ekstra bit ikke meget læsbarhed. Men det er en del af problemet: fordi de ikke er dårlige nok til at gøre teksten uligelig, kunne de let afskediges som ubetydelige.

For at opnå maksimal læsbarhed skal vi bevare små tekstbogstaver.

Som vist ovenfor har små justeringer fjernet forstyrrelsen:

• Gendannet mellem de klanglignende terminaler i den store "C", ordet "tekst" er nu meget klarere.
• Bemærk hvordan de lodrette stængler af "r" og "n" i "explanatory" møder kanterne af den store "C."
• Tællerne i "p" og "o" i "støttende" indeholder nu kun sort.
• Vi har skåret stort bogstav "A" for at gøre små bogstaver "s" i "støttende" klarere.

Målet er at bevare formerne i de små bogstaver, selvom læserne ikke bemærker.

Typeface gør en forskel

Ikke alle skrifttyper passer til både store og små størrelser. Ved en lille nok størrelse kan et skrifts detaljer forsvinde. Og detaljer, der forstørres i stor størrelse, kan nogle gange skabe usædvanlige problemer.

De fire skriftkombinationer ovenfor mislykkes af forskellige årsager:

1. Denne skrifttype er designet til at efterligne håndskrift. De raggede kanter indeholder hundredvis af vektorpunkter, hvoraf de fleste går tabt i en lille størrelse.
2. Men gør scriptet for stort, og bogstaverne ser mindre ud som håndskrift og mere som scalloped Illustrator-stier.
3. Zapfinos kalligrafiske kanter går bedre end Texas Hero's, men den enorme opstigning på "b" smider sammensætningen ud af balance.
4. Lucida Blackletter er for kompliceret til at være praktisk som baggrund, i det mindste uden meget omhyggeligt arrangement af den lille tekst. Desuden forsvinder dens unikke karakter i en lille størrelse. Er de swoops og serifs, eller er det bare uklar?

For stor tekst, for tykt eller for tynd er netop ret

Når du overlapper tekst, tænk på stor type som både tekst og baggrund . Jo mere komplicerede bogstaverne er, desto mere teksturlignende bliver de. Det vil sige, at de er mere tilbøjelige til at forklare brevformularerne i den lille tekst.

For at undgå problemer skal du gå fedt eller tynd. Ekstra tykke og ekstra lyse former virker bedre end en almindelig vægt af samme ansigt. Begge forstyrre mindre, fordi den lille tekst har mindre chance for at ramme en kant.

For eksempel ramte den store tekst i lys og sort variationerne over færre små bogstaver. Selvfølgelig er hvert ansigt - og hvert sæt ord - anderledes. Men generelt giver mellemvægte flere problemer end tynde og tykke vægte.

Praktiske eksempler

Hvordan kan dette arbejde med mere sandsynlig tekst? Her er et par eksempler på overlappende tekst.

Hvorfor det virker: Faded i baggrunden, den store tekst giver klar prioritet til den lille tekst. Museos geometriske former har få forstyrrelser.

Potentielle problemer: Denne overlapning virker ikke helt, hvis den lille tekst var kortere. For at bære beskeden skal den lille tekst overlappe alle seks bogstaver i den store tekst.

Hvorfor det virker: Den lille tekst krydser kun tre tykke og to tynde farvefarver. Masser af kontrast, selv for en varm farvepalet.

Potentielle problemer: Den store teksts energiske kanter ser ud til at virke imod de små teksts elegante linjer.

Hvorfor virker det: Begge tekstlinjer har skarpe geometriske figurer og er justeret præcist.

Potentielle problemer: Ser den lille tekst lidt tabt ud? Skifter skrifttyperne virkelig ånden i " steampunk ?”

Hvorfor det virker: Generøs sporing i store bogstaver og rene linjer i begge tekster gør hvert tegn klart.

Potentielle problemer: Gør baggrundsstrukturen den type, der er for svær at læse?

Hvorfor det virker: Den tykke store tekst er læselig alene, mens den intime lille tekst inviterer til læsning. Flere ekstra fyldninger opretholder farvedybden af ​​hovedstaden "S" bogstaver.

Potentielle problemer: SxSW gengives typisk i en bitmap skrifttype; disse er off-brand. Brug også scripts i lille tekst sparsomt.

Men hjælper det?

Lad os anvende disse lektioner til vores oprindelige sammensætning.

Hvorfor virker det:

• Den store tekst blandes ind i den mørke baggrund, men størrelsen sikrer, at den er synlig.
• Den lyse farve gør den lille tekst skiller sig ud. Højrejusteringen balancerer den.
• Omhyggelig afstand mellem små bogstaver og enkeltheden af ​​de store bogstaver holder konflikten til et minimum.
• De to skrifttyper deler fælles elementer. For eksempel justerer de to "W" s, på trods af at de er i forskellige ansigter.

Skrevet udelukkende til Webdesigner Depot af Ben Gremillion . Ben er webdesigner, der løser kommunikationsproblemer med bedre design.

Hvad er nogle af de potentielle problemer i det sidste eksempel? Venligst del dine tanker i kommentarerne nedenfor.

• ← 10 ikoniske skrifttyper og hvorfor du aldrig bør bruge dem
• 12 Nødvendige regler at følge, når du designer et logo →